使用 Selenium 的 text 和 innerHTML 之间的区别
Posted
技术标签:
【中文标题】使用 Selenium 的 text 和 innerHTML 之间的区别【英文标题】：Difference between text and innerHTML using Selenium 【发布时间】：2017-03-17 21:30:53 【问题描述】：使用 selenium 时获得 text 和 innerhtml 有什么区别。即使我们在特定元素下有文本，但当我们执行.text 时，我们会得到空值。但是.get_attribute("innerHTML") 工作正常。
有人能指出两者之间的区别吗？什么时候有人应该使用 '.get_attribute("innerHTML")' 而不是 .text？
【问题讨论】：
"innerHTML" 将返回此元素的内部 HTML，其中包含其中的所有 HTML 标签，包括文本和标签，如“<p>This is demo</p>"”，而 .text 只会检索其后代的所有文本内容，而没有任何HTML tags.example: "这是演示"
我可以理解这一点....但有时....当您执行以下driver.find_element_by_css_selector("p").text 时将一无所获。但是做 driver.find_element_by_css_selector("p").get_attribute("innerHTML") 会导致提取This is demo....为什么会这样？
问题可能出在您的选择器上...当您使用 driver.find_element_by_css_selector("p").text ....如果您可以分享您正在尝试的网页的网址...我可以更好地解释事情
"http://www.costco.com/Weatherproof%C2%AE-Men's-Ultra-Tech-Jacket.product.100106552.html" 尝试使用以下行获取产品标题driver.find_element_by_css_selector("h1[itemprop='name']").text 没有产生任何结果....但是 driver.find_element_by_css_selector("h1[itemprop='name']").get_attribute("innerHTML" ) 得到产品标题"Weatherproof\xae Men's Ultra Tech Jacket"
我用详细信息更新了评论...在添加更多详细信息之前我错误地按下了回车...我的错误
【参考方案1】：
首先，text 是一个属性，而innerHTML 是一个属性。 property 和 attribute 之间从根本上是有一些区别的。
get_attribute("innerHTML")
get_attribute(innerHTML) 获取元素的innerHTML。
此方法将首先尝试返回具有给定名称的属性的值。如果不存在具有该名称的属性，则返回具有相同名称的 attribute 的值。如果没有具有该名称的attribute，则返回None。
被认为是真实的值，即等于true 或false，将作为布尔值返回。所有其他非None 值都作为字符串返回。对于不存在的属性或属性，返回None。
参数：
innerHTML - Name of the attribute/property to retrieve.
例子：
# Extract the text of an element.
my_text = target_element.get_attribute("innerHTML")
文字
text 获取元素的文本。
定义：
def text(self):
"""The text of the element."""
return self._execute(Command.GET_ELEMENT_TEXT)['value']
例子：
# Extract the text of an element.
my_text = target_element.text
听起来仍然相似？阅读下文...
Attributes and properties
当浏览器加载页面时，它解析 HTML 并从中生成 DOM 对象。对于元素节点，大多数标准 HTML 属性会自动成为 DOM 对象的属性。
例如，如果标签是：
<body id="page">
那么 DOM 对象有body.id="page"。
注意：属性-属性映射不是一对一的！
HTML attributes
在 HTML 中，标签可能具有属性。当浏览器解析 HTML 以创建标签的 DOM 对象时，它会识别标准属性并从中创建 DOM 属性。
所以当一个元素有 id 或另一个标准属性时，相应的属性就会被创建。但如果属性是非标准的，则不会发生这种情况。
注意：一个元素的标准属性对于另一个元素可能是未知的。例如，
type是<input>标签的标准属性，但不是<body>标签的标准属性。标准属性在相应元素类的规范中进行了描述。
所以，如果一个属性是非标准的，就不会有它的 DOM 属性。在这种情况下，可以使用以下方法访问所有属性：
elem.hasAttribute(name)：检查是否存在。
elem.getAttribute(name)：获取值。
elem.setAttribute(name, value)：设置值。
elem.removeAttribute(name)：移除属性。
读取非标准属性的示例：
<body something="non-standard">
<script>
alert(document.body.getAttribute('something')); // non-standard
</script>
</body>
Property-attribute synchronization
当标准属性发生变化时，相应的属性会自动更新，并且（有一些例外）反之亦然。但也有例外，例如 input.value 仅从 attribute -> 同步到 property，但不同步。这个特性其实派上用场了，因为用户可以修改值，然后在它之后，如果我们想从HTML中恢复“原始”值，它就在属性中。
根据python中的Attributes and Properties，当我们用someObject.someAttr之类的东西引用对象的属性时，Python使用几种特殊的方法来获取对象的someAttr属性。在最简单的情况下，属性只是实例变量。
Python 属性
从更广泛的角度来看：
属性是出现在对象名称之后的名称。这是句法结构。例如，someObj.name。
实例变量是对象内部__dict__ 中的一项。
属性引用的默认语义是提供对实例变量的访问。当我们提到someObj.name 时，默认行为实际上是someObj.__dict__['name']
Python 属性
在 Python 中，我们可以使用内置的property() 函数或@property 装饰器将getter、setter（和deleter）函数与属性名称绑定。当我们这样做时，对属性的每个引用都具有直接访问实例变量的语法，但它调用给定的方法函数。
【讨论】：
【参考方案2】：.text 将检索视口中不存在的文本的空字符串，因此您可以将对象滚动到视口并尝试 .text 它应该检索值。
相反，innerhtml 可以获取值，即使它存在于视口之外
【讨论】：
【参考方案3】：例如，<div><span>Example Text</span></div>
.get_attribute("innerHTML") 为您提供当前元素内的实际 HTML。所以theDivElement.get_attribute("innerHTML") 返回“<span>Example Text</span>”
.text 只给你文本，不包括 HTML 节点。所以theDivElement.text 返回“Example Text”
请注意，.text 的算法取决于每个浏览器的 webdriver。在某些情况下，例如元素被隐藏，当您使用不同的 webdriver 时，您可能会得到不同的文本。
我通常从.get_attribute("innerText") 而不是.text 获取文本，因此我可以处理所有情况。
【讨论】：
【参考方案4】：Chrome（我不确定其他浏览器）会忽略 HTML 代码中的额外空格并显示为单个空格。
<div><span>Example Text</span></div> # notice the two spaces
.get_attribute('innerHTML') 将返回双倍行距文本，这是您在检查元素时会看到的内容），而.text 将返回只有 1 个空格的字符串。
>>> print(element.get_attribute('innerHTML'))
'Example Text'
>>> print(element.text)
'Example Text'
这种差异并非微不足道，因为以下将导致 NoSuchElementException。
>>> arg = '//div[contains(text(),"Example Text")]'
>>> driver.find_element_by_xpath(arg)
类似地，.get_attribute('innerHTML') 对于以下返回 Example&nbsp;Text，而 .text 返回 Example Text。
<div><span>Example Text</span></div>
【讨论】：
【参考方案5】：我刚刚选择了css选择器并使用了以下代码：
from selenium import webdriver
driver = webdriver.Chrome()
driver.maximize_window()
driver.get("http://www.costco.com/Weatherproof%C2%AE-Men's-Ultra-Tech-Jacket.product.100106552.html")
print driver.find_element_by_css_selector(".product-h1-container.visible-xl-block>h1").text
然后打印出来：
Weatherproof® Men's Ultra Tech Jacket
问题是 chrome 或 firefox 上的 h1[itemprop='name'] 选择器返回 2 个匹配节点，而 .product-h1-container.visible-xl-block>h1 只返回一个匹配节点，这就是为什么它打印预期的结果
为了证明我的观点，运行以下代码：
from selenium import webdriver
driver = webdriver.Chrome()
driver.maximize_window()
driver.get("http://www.costco.com/Weatherproof%C2%AE-Men's-Ultra-Tech-Jacket.product.100106552.html")
x= driver.find_elements_by_css_selector("h1[itemprop='name'] ")
for i in x:
print "This is line " , i.text
它会打印出来
This is line
This is line Weatherproof® Men's Ultra Tech Jacket
因为 select_element_by_css_selector 选择了第一个具有匹配选择器的元素并且不包含任何文本，所以它不会打印。希望你现在明白了
【讨论】：
那太棒了......但在上面的选择和这个driver.find_element_by_css_selector("h1[itemprop='name']").text之间没有发现区别......都选择了相同的元素，对吗？......为什么在.text的情况下有效
您的选择器返回 2 个匹配节点，其中一个不包含文本，第二个包含它，而我的只有 1 个包含文本，所以它会打印出来
感谢清晰的解释！！！！我们真的在页面中有两个元素吗...就像一个可见的和一个不可见的...当我们检查元素时无法捕捉到它...这与浏览器有关...还是再次错过了任何琐碎的东西？
reviewsCount = driver.find_elements_by_css_selector("li[itemprop='review']") reviewTitle = reviewsCount[0].find_elements_by_css_selector(".bv-content-title") reviewTitle[0].get_attribute("innerHTML") 在这种情况下 reviewTitle 只有一个元素。但在这种情况下 .text 没有工作....
@VivekSrinivasan，你能解释一下你要通过这个序列实现什么以上是关于使用 Selenium 的 text 和 innerHTML 之间的区别的主要内容，如果未能解决你的问题，请参考以下文章
text Selenium使用选定的Chromedriver版本安装和启动
Python+Selenium练习-利用partial link text定位元素