在Python中解析CSS属性值的呈现HTML

时间:2015-01-06 18:03:02

标签: python html css selenium phantomjs

我目前正在使用 Selenium PhantomJS 与Python一起抓取呈现的网页。很容易检查HTML内容中是否存在某些单词(例如if "example" in html ...),但我有兴趣在页面中搜索包含值大于或等于的CSS属性的元素某事。

例如,理想的情况是抓取网站列表并保存具有CSS的页面,从而为元素提供z-index异常大的值。除了渲染页面的CSS爬行功能外,所有内容都已构建。有没有人有解决这个问题的建议?

2 个答案:

答案 0 :(得分:0)

我会在不看你的代码的情况下对它进行破解。 Here're the docs - 听起来你已经读过了。

css_items = driver.find_elements_by_css_selector(tag.selector)
# use a list comprehension to test if element meets your criterion
desired_elems = [item for item in css_items if item.get_attribute(property) >= abnormally_large_value]
if len(desired_elems):
     pass # do some code stuff

以下是docs for the get_attribute() method

我希望答案有所帮助。显然,您需要发布一个代码段以进行更完整的分析。祝你好运!

答案 1 :(得分:0)

的index.html:

<!DOCTYPE html>
<html>
<head>
  <!-- For html5 (default is UTF-8) -->
  <meta charaset="UTF-8">
  <title>Phantom JS Example</title>

  <style>
    img#red {
      position: absolute;
      left: 100px;
      top: 100px;
      z-index: 5;    #***z-index set by CSS****
    }

    img#black {
      position: absolute;
      left: 100px;
      top: 100px;
      z-index: 2;    #***z-index set by CSS****
    }
  </style>
</head>

<body>
  <div>Hello</div>

  <img src="4row_red.png" id="red" width="40" height="40">
  <img src="4row_black.png" id="black" width="40" height="40">

<script>
window.onload = function() {
  var red = document.getElementById('red');
  red.style.zIndex = "0";    #****z-idex set by JAVASCRIPT****
};
</script>

from selenium import webdriver

driver = webdriver.PhantomJS()
driver.set_window_size(1120, 550) #For bug
driver.get("http://localhost:8000")

png = driver.find_element_by_id('red')
#print png.css_value('zIndex')  <--AttributeError: 'WebElement' object has no attribute 'css_value'
print "{} id={}-> {}".format(
    png.tag_name,
    png.get_attribute('id'),
    png.value_of_css_property('zIndex')
)
#print png.style('zIndex')  <--AttributeError: 'WebElement' object has no attribute 'style'
print "get_attribute('zIndex') -> {}".format(
    png.get_attribute('zIndex')
)

print '-' * 20

imgs = driver.find_elements_by_tag_name('img')

for img in imgs:
    print "{} id={}-> {}".format(
        img.tag_name,
        img.get_attribute('id'),
        img.value_of_css_property('zIndex')
    )

print "get_attribute('zIndex') -> {}".format(
    imgs[-1].get_attribute('zIndex')
)

print '-' * 20

all_tags = driver.find_elements_by_tag_name('*')

for tag in all_tags:
    print "{} --> {}".format(
            tag.tag_name,
            tag.value_of_css_property('zIndex')
    )

driver.quit()


--output:--
img id=red-> 1    #Found the z-index set by the js.
get_attribute('zIndex') -> None  #Didn't find the z-index set by the js
--------------------
img id=red-> 1
img id=black-> 3  #Found the z-index set by the css stylesheet
get_attribute('zIndex') -> None  #Didn't find the z-index set by the css stylesheet
--------------------
html --> 0
head --> auto
meta --> auto
title --> auto
style --> auto
body --> auto
div --> auto
img --> 1
img --> 3
script --> auto

设定:

$ pip install selenium
$ brew install phantomjs

https://realpython.com/blog/python/headless-selenium-testing-with-python-and-phantomjs/

<强> value_of_css_property(PROPERTY_NAME):
返回CSS属性的值

<强> get_attribute(名称):
获取元素的给定属性或属性。

如果设置了此属性,此方法将返回给定属性的值,否则返回具有相同名称的属性值(如果存在),或者返回None。

被视为真实的值,即等于“真”或“假”,将作为布尔值返回。所有其他非None值都以字符串形式返回。对于不存在的属性或属性,返回None。

参数数量:
name - 要检索的属性/属性的名称。

http://selenium-python.readthedocs.org/en/latest/api.html#selenium.webdriver.remote.webelement.WebElement.value_of_css_property

不是很好的文档。