Testcafe Selector 功能，它们是如何工作的？

Question

当你有一个选择器和一些链接的函数时

Selector('[data-testid="somevalue"]')
      .nth(0)
      .find('div')
      .withAttribute('class', 'someclass');

这是作为对 dom 的单个查询还是它查询第一个（选择器）并在那里以编程方式通过 dom？

我想了解这一点，因为我有一个失败的选择器，我需要用 dom 来验证它。

选择器

Selector('[data-testid="table-row"]')
      .nth(0)
      .find('div')
      .withAttribute('class', 'checkbox-ui');

Answer 1

由于 checkbox-ui 类似乎是您要选择的 div-container 中的其他类之一（并且它不是关于顺序的列表中的第一类），您可以按照以下方法进行选择div 正确：

Selector('[data-testid="table-row"]')
      .nth(0)
      .find('div[class*="checkbox-ui"]')

使用字符串时，withAttribute 方法用于严格匹配。因此，您当前的 Selector 无法匹配 div。

关于* CSS-Selector，可以进一步看this.

Answer 2

在 TestCafe v2.4.0 中，由于 Visual Selector Debugger，使用选择器进行实验变得更加容易。要使用它，请使用

await t.debug()

暂停测试并在 TestCafe 状态栏上方找到 Debug Selector 面板。