为什么webelement的测试有时候从源代码的角度看是不正常的

Posted 2021-03-31

the source code that has issue

请参考图片

页面中有一个选择

我使用xpath

".//*[@id='edit-comanyinfo-window']//li[text()='20-99']"

找到元素

但有时，文字显示如下：

"
20
-
99
"

为什么？

它并不总是这样显示

我知道还有其他方法来定位元素

我只是想明白为什么！

其他时间的某些页面

enter image description here

这是正常的，html源代码中的元素是“20-99”

答案

您看到的结果是WebElement的绝对表示：

".//*[@id='edit-comanyinfo-window']//li[text()='20-99']"

出现在DOM Tree中的代表如下：

"
20
-
99
"

您的下一个问题是，为什么我们将元素视为：

20-99

这是因为与javascript相关的The HTML DOM (Document Object Model)

JavaScript的力量：

加载网页时，Web Browser会创建页面的Document Object Model。 HTML DOM Model被构造为对象树，如下图所示：

使用对象模型，JavaScript可以获得创建动态HTML所需的全部功能，因为：

• JavaScript可以change页面中的所有HTML elements
• JavaScript可以change页面中的所有HTML attributes
• JavaScript可以change页面中的所有CSS styles
• JavaScript可以remove现有HTML elements and attributes
• JavaScript可以add new HTML elements and attributes
• JavaScript可以react到页面中所有现有的HTML events
• JavaScript可以在页面中使用create new HTML events

WebElement布局的变化是由于JavaScript的存在