【问题标题】:Document.querySelector() is not showing all elementsDocument.querySelector() 未显示所有元素
【发布时间】:2022-01-08 16:20:47
【问题描述】:
我是一个新手,正在尝试设计相关的 CSS 选择器和 JSPath 来运行我的自动化脚本。
在途中,我发现这两者的返回语句不同。请检查以下示例。有人可以告诉我需要在 JSPath 中进行哪些更改以保持结果与相对 CSS 选择器相同。
相对 CSS 选择器的结果。
相对 JSPath 的结果。
JS 只返回第一个元素,而上面的 css 选择器返回多个。我需要在 JS 中进行哪些更改才能保持结果不变。
【问题讨论】:
标签:
javascript
selenium
css-selectors
selectors-api
queryselector
【解决方案1】:
Document.querySelector()
Document 方法querySelector() 返回文档中与指定选择器或选择器组匹配的第一个WebElement。如果未找到匹配项,则返回 null。
注意:匹配是使用深度优先的前序遍历完成的
文档的节点从文档的第一个元素开始
标记并按数字顺序遍历顺序节点
子节点。
语法:
element = document.querySelector(selectors);
Document.querySelectorAll()
Document 方法querySelectorAll() 返回一个静态NodeList,表示与指定选择器组匹配的文档元素列表。
注意:虽然 NodeList 不是 Array,但可以
使用 forEach() 对其进行迭代。也可以转换成真实的
Array 使用 Array.from()。但是,一些较旧的浏览器没有实现 NodeList.forEach() 和 Array.from()。这个可以
使用 Array.prototype.forEach() 绕过。
语法:
elementList = parentNode.querySelectorAll(selectors);
使用 CssSelector
虽然使用xpath 或css-selectors 将返回与指定选择器组匹配的文档元素列表。
结论
如上所述,当您使用 querySelector() 时,仅返回第一个匹配元素。如果您的用例是返回所有匹配的元素,您需要使用 querySelectorAll() 作为:
document.querySelector("div[slot^='Learner']>div>div>span")
【解决方案2】:
你必须使用
document.querySelectorAll();