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

Question

the source code that has issue

请参考图片

页面中有一个选择

我使用xpath

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

找到元素

但有时，文字显示如下：

"
20
-
99
"

为什么？

它并不总是像这样显示

我知道还有其他方法可以找到元素

我只想了解原因！

其他时间的某些页面

enter image description here

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

Answer 1

您看到的结果是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

的存在