剧作家 - 嵌套定位器调用

Question

我正在尝试测试这样的结构：

<div custom-id=a>
  <div custom-id=b>
    <h1>one</h1>
  </div>
  <div custom-id=b>
    <h1>two</h1>
  </div>
</div>
<div custom-id=a>
  <div custom-id=b>
    <h1>three</h1>
  </div>
  <div custom-id=b>
    <h1>four</h1>
  </div>
</div>

我想分两部分查询。首先，取回所有 custom-id=a 节点，然后针对每个节点，取回所有 custom-id=b 节点。

根据我之前提出的问题，我的印象是这样的东西会起作用：

const aNodes = await this.page.locator("custom-id=a");

for (let aNode in aNodes) {
  const bNodes = await aNode.evaluate(node =>
    Array.from(node.querySelectorAll('custom-id="b"')));
}

但是当我尝试这个时，IDE linter 告诉我 aNode 是一个字符串。我想我预计 aNodes 将是一个我可以再次查询的数组。

如果您已经按照这些思路回答了我的问题，我深表歉意。我在这里很难掌握一些基础知识。

Answer 1

A locator 本身是不可迭代的。但是您可以使用 count 函数获取元素计数，然后 nth 一次获取一个元素：

const aNodes = await this.page.locator("custom-id=a");
const count = await aNodes.count();
for (let i = 0; i < count; ++i) {
  const bNodes = await aNodes.nth(i).evaluate(node =>
    Array.from(node.querySelectorAll('custom-id="b"')));
}

剧作家 - 嵌套定位器调用

Playwright - nested locator calls

typescript

playwright