量角器获取 DOM 元素并使用它们的属性

Posted 2023-03-13

【中文标题】量角器获取 DOM 元素并使用它们的属性

【英文标题】：Protractor getting DOM element and using their properties

【发布时间】：2018-07-02 03:45:07

【问题描述】：

我在 Polymer/Angular 应用程序上使用 Protractor 和 Selenium 运行 e2e 测试。 大多数元素都在 shadow DOM 中（我设法使用自定义 css 定位器来处理它，但它使我的测试变得不稳定，因为 dom 中的任何更改都会破坏它们）。问题是开发人员已经实现了一个虚拟滚动列表： 滚动列表中只加载了几个项目，滚动时会加载下一个项目。 我问我的开发人员如何处理它，他们告诉我我必须获取 Web 组件并在没有量角器的情况下对其进行测试，也就是运行这样的命令：

document.querySelector('virtual-scroll').baseList

其中 baseList 是标签的公共属性。 我试过了

var element = browser.executeScript('return document.querySelector("virtual-scroll")');
element.then(function (el)
  console.log(el.$.baseList);
);

但上面的命令返回一个 WebElement。有没有办法像 javascript querySelector 命令一样返回 html DOM 元素？

编辑：根据要求提供我想获得的带有滚动列表属性的源代码

【问题讨论】：

我发现我可以使用这个命令：browser.executeScript('return document.querySelector("iris-app").baseList;')。它有效，但我仍然不明白为什么我不能只获取父母并调用他的属性。

尝试最少量的 Protractor 的 API by.deepCSS()，它用于在 Shadow DOM 中通过 css 选择器查找元素，详情：protractortest.org/#/api?view=ProtractorBy.prototype.deepCss

AFAIK 它已被弃用，这就是我使用自定义 css 定位器的原因。这些工作正常，这不是这里的问题。如果您误会了，我很抱歉，如果有人也有提示，这只是一个旁注。

【参考方案1】：

如果“virtual-scroll”是影子根元素的名称，baseList 是该元素的属性。您可以使用以下命令获取它。

var baseList = browser.executeScript('return document.querySelector("virtual-scroll").baseList');

顺便说一句，您可以使用 Selenium 测试 shadow DOM。请参阅下面的示例。

var shadowRootElement = browser.executeScript('return document.querySelector("virtual-scroll").shadowRoot');
var element = shadowRootElement.findElement(......);

【讨论】：

我知道我可以通过这种方式获取属性，但这使得我的测试很难维护：每次我想使用属性并保存时，我都必须调用 browser.executeScript(return blabla.property)它在 var 中以供以后重用。我希望能够调用 let a = browser.executeScript(return blabla) console.log(a.property)

@JiggyJinjo 你为什么不得到影子根？

因为 baseList 没有加载到 DOM 中，它的一部分被动态“注入”到 virtual-scroll 中（有数百个项目，同时在 virtual 中只加载了 15 个）滚动）

你能在 ChromeDevtool 中围绕虚拟滚动显示 HTML 的屏幕截图吗？我仍然不明白为什么不能在 shadow DOM 中获取元素的属性。

我更新了我的帖子，我实际上可以通过使用 browser.executeScript('return document.querySelector("iris-app").baseList;') 获取元素的属性但是，我无法访问父标签的属性，例如: a = browser.executeScript('return document.querySelector("iris-app");'); console.log(a.baseList);