网站首页 > 技术文章正文

selenium中的text、innerText、outerText以及textContent比较

nanyue 2024-11-14 16:47:55 技术文章 1 ℃

在使用selenium过程中为了获取元素的文本内容，通过搜索引擎搜索发现常用的方式是获取

元素的text、innerText、outerText以及textContent。在使用过程中难免会有一些疑惑，这四者之间的区别是什么。

根据搜索引擎和自己实验的结果，我总结出以下几条信息。

一、元素的 innerHTML、outerHTML、innerText、outerText属性之间的区别

以下内容参考链接 https://www.cnblogs.com/yuer20180726/p/11135575.html整理和修改

先看一个示例代码

<!--html相关代码-->
<html>
	<head></head>
	<body>
		<div id="testdiv">
			<p>Text in DIV</p>
		</div>
	</body>
</html>

#python相关代码
from selenium import webdriver
import selenium

print('谷歌浏览器: 83.0.4103.116')
print("selenium版本号：" + selenium.__version__)
browser = webdriver.Chrome(r'C:/chromedriver.exe')
browser.get("file:///C:/test.html")
table = browser.find_element_by_xpath('//*[@id="testdiv"]')
print("-------text---------")
print(table.text)
print("-------innerText---------")
print(table.get_attribute("innerText"))
print("-------outerText---------")
print(table.get_attribute("outerText"))
print("-------textContent---------")
print(table.get_attribute("textContent"))
print("-------innerHTML---------")
print(table.get_attribute("innerHTML"))
print("-------outerHTML----------")
print(table.get_attribute('outerHTML'))
browser.quit()

#运行结果
谷歌浏览器: 83.0.4103.116
selenium版本号：3.141.0
-------text---------
Text in DIV
-------innerText---------
Text in DIV
-------outerText---------
Text in DIV
-------textContent---------

			Text in DIV
		
-------innerHTML---------

			<p>Text in DIV</p>
		
-------outerHTML----------
<div id="testdiv">
			<p>Text in DIV</p>
		</div>

document对象中有innerHTML、innerText这两个属性，都是获取document对象文本内容，但使用起来还是有区别的；

1） innerHTML设置或获取标签所包含的HTML+文本信息(从标签起始位置到终止位置全部内容，包括HTML标签，但不包括自身)

2） outerHTML设置或获取标签自身及其所包含的HTML+文本信息（包括自身）

3） innerText设置或获取标签所包含的文本信息（从标签起始位置到终止位置的内容，去除HTML标签，但不包括自身）

4） outerText设置或获取标签自身及其所包含的文本信息（包括自身）

innerText和outerText在获取的时候是相同效果，但在设置时，innerText仅设置标签所包含的文本，而outerText设置包含包括标签自身在内的文本。

根据上面的代码，发现无论怎么样设置元素值获取innerText和outerText值都一样。于是我继续搜索，参考https://www.iteye.com/blog/walsh-261966文中内容。innerText和outerText两者在获取值时返回结果一致，但是在设置值时，innerText不会修改元素本身属性，而outerText则会修改元素本身属性。

二、元素的text、innerText 和 textContent 的区别

以下内容参考链接 https://juejin.im/post/5c0914c5f265da610e7fe372整理和修改

我们再看一段代码

<!--html相关代码-->
<html>
<head>
</head>
<body>
	<table id="table_1">
		<tr id="tr_1">
			<td id="td_1"><span>1</span></td>
			<td id="td_2" ><span>2</span></td>
		</tr>
		<tr id="tr_2" >
			<td id="td_3" hidden=true><span>3</span></td>
			<td id="td_4"><span>4</span></td>
		</tr>
	</table>
</body>
</html>

为了节约篇幅，我这里就不展示Python代码。此处Python代码和上文一致，仅将元素设置为"table_1"。

运行结果:

谷歌浏览器: 83.0.4103.116
selenium版本号：3.141.0
-------text---------
1 2
4
-------innerText---------
1     	2
4
-------outerText---------
1     	2
4
-------textContent---------

		
			1
			2
		
		
			3
			4
		
	
-------innerHTML---------

		<tbody><tr id="tr_1">
			<td id="td_1"><span>1</span></td>
			<td id="td_2"><span>2</span></td>
		</tr>
		<tr id="tr_2">
			<td id="td_3" hidden="true"><span>3</span></td>
			<td id="td_4"><span>4</span></td>
		</tr>
	</tbody>
-------outerHTML----------
<table id="table_1">
		<tbody><tr id="tr_1">
			<td id="td_1"><span>1</span></td>
			<td id="td_2"><span>2</span></td>
		</tr>
		<tr id="tr_2">
			<td id="td_3" hidden="true"><span>3</span></td>
			<td id="td_4"><span>4</span></td>
		</tr>
	</tbody></table>

text、innerText和outerText 不能取到没有渲染在页面上的文本，也就是说隐藏的文本无法获取，textContent能获取所有的文本。
对于元素下面的子元素的文本获取（例如本文中table下面的span元素），text、innerText和textContent获取文本的格式不一样，个人感觉innerText最贴合浏览器显示。
innerText 会带来性能影响，由于 innerText 的值依赖渲染之后的结果，会受到 CSS 样式的影响，因此它会触发重排（reflow），所以使用它会有一定的性能影响；而 textContent 不会，因此更建议使用 textContent。
textContent 是 W3C 兼容的文字内容属性，但是 IE 不支持。innerText 不是 W3C DOM 的指定内容，FireFox不支持。谷歌浏览两者都支持。

为了验证第3点，我修改了部分Python代码，做了一个小实验。

import datetime
#统计获取text属性1000次耗时
time = datetime.datetime.now()
for _ in range(1000):
    text = table.text
time = datetime.datetime.now() - time
print("text循环1000次耗时：" + str(time))
#统计获取innerText属性1000次耗时
time = datetime.datetime.now()
for _ in range(1000):
    table.get_attribute("innerText")
time = datetime.datetime.now() - time
print("innerText循环1000次耗时：" + str(time))
#统计获取outerText属性1000次耗时
time = datetime.datetime.now()
for _ in range(1000):
    table.get_attribute("outerText")
time = datetime.datetime.now() - time
print("outerText循环1000次耗时：" + str(time))
#统计获取textContent属性1000次耗时
time = datetime.datetime.now()
for _ in range(1000):
    table.get_attribute("textContent")
time = datetime.datetime.now() - time
print("textContent循环1000次耗时：" + str(time))
#统计获取innerHTML属性1000次耗时
time = datetime.datetime.now()
for _ in range(1000):
    table.get_attribute("innerHTML")
time = datetime.datetime.now() - time
print("innerHTML循环1000次耗时：" + str(time))
#统计获取outerHTML属性1000次耗时
time = datetime.datetime.now()
for _ in range(1000):
    table.get_attribute("outerHTML")
time = datetime.datetime.now() - time
print("outerHTML循环1000次耗时：" + str(time))

测试多次后，每次运行情况大致相同，测试耗时结果如下：

谷歌浏览器: 83.0.4103.116
selenium版本号：3.141.0
text循环1000次耗时：0:00:08.362634
innerText循环1000次耗时：0:00:03.509617
outerText循环1000次耗时：0:00:03.101705
textContent循环1000次耗时：0:00:03.016933
innerHTML循环1000次耗时：0:00:03.166532
outerHTML循环1000次耗时：0:00:03.373977

意外发现，调用text属性耗时最长。innerText、outerText、textContent、innerHTML、outerHTML耗时相差不大，所以我不敢保证第三点的正确性。可能是因为我本地selenium版本和谷歌浏览器版本与原作者之间存在差异所导致的，或者是因为我所测试的html过于简单，并没有太多渲染的地方。

上一篇： app自动化测试(Android)--App 控件定位
下一篇： XML之dom4j的xpath解析（dom4j解析xml生成对象）

网站首页 > 技术文章 正文

selenium中的text、innerText、outerText以及textContent比较

一、元素的 innerHTML、outerHTML、innerText、outerText属性之间的区别

二、元素的text、innerText 和 textContent 的区别

猜你喜欢

网站首页 > 技术文章正文