javascript - 如何开发自定义 Protractor 定位器？

Question

我有一个 Angular 应用程序，我在其中放置自定义 html 属性(“data-testid='saveButton'”)以用于识别，例如按钮、输入等 Protractor 对此没有内置定位器:xpath-way 不起作用，因为它总是从文档根目录搜索(为了克服这个限制，我将不得不做很多字符串魔术来构建 xpath-string，所以我放弃了这个变体)。

于是想自己写一个定位器，咨询了官方Protractor Documentation .

文档留给我一个重要的问题: 父元素对象有哪些可用方法？在他们的示例中，他们使用 using.querySelectorAll('button'); 但他们怎么知道他们可以使用这个？

我在 Protractor 文档中搜索“querySelectorAll”，看它是否可能是 ElementFinder 或 WebElement 的方法，但我没有找到它。

我也没有找到调试定位器的方法(只能通过 browser.pause() 停止 Protractor 测试)，所以我无法查看运行时来了解我可以用给定的父元素。

那么有人知道我如何获得有关父元素具有哪些方法的信息吗？

Answer 1

parent-element，本质上是选择器的上下文，是一个由浏览器处理的 DOM 元素 - 它可以使用任何 DOM 函数，在本例中为 Element.querySelectorAll .正如 addLocator 的示例所说的关于您传递给它的函数:

This function will be serialized as a string and will execute in the browser.

此外，请记住，有一种方法可以为 xpath 选择器提供上下文，从而避免从根目录进行搜索:

var context = element(by.css('.some-parent-element-class'));
var divDirectDescendants = context.element(by.xpath('div'));
var divAllDescendants = context.element(by.xpath('.//div'));

使用 CSS 这些将是:

var divDirectDescendants = element(by.css('.some-parent-element-class > div'));
var divAllDescendants = element(by.css('.some-parent-element-class  div'));

此外，还有一种方法可以通过 CSS selector 实现您想要的效果(毕竟 querySelectorAll 是什么):

var everyElementWithMyAttr = element.all(by.css('[data-testid="saveButton"]'));