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

Question

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

例如，抓取网站列表并保存 CSS 为元素的 z-index 提供异常大值的页面是理想的。除了渲染页面的 CSS 抓取功能外，一切都已构建。有人对解决这个问题有什么建议吗？

Answer 1

我会在没有看到您的代码的情况下进行破解。 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

我希望这个回答对一些人有所帮助。显然，您需要 post 一个片段才能进行更完整的分析。祝你好运！

Answer 2

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):
Returns一个CSS的值属性

get_attribute(姓名):
获取元素的给定属性或属性。

如果已设置，此方法将 return 给定属性的值，否则 return 具有相同名称的属性的值（如果存在），或者None.

被认为是真实的值，即等于“true”或“false”，被 returned 作为布尔值。所有其他非 None 值都被 return 编辑为字符串。对于不存在的属性或特性，None 被 returned.

参数：
name - 要检索的 attribute/property 的名称。

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

不是很好的文档。

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

Parse rendered HTML for CSS property value in Python

html

css

python

selenium

phantomjs