相当于 cypress 中的 find() 的剧作家答案

【问题标题】：playwright equivalent of find() in cypress相当于 cypress 中的 find() 的剧作家
【发布时间】：2022-11-16 14:39:03
【问题描述】：

有没有办法遍历 playwright 中的 html 元素，比如 cypress 中的 cy.get("abc").find("div")？

换句话说，剧作家中有任何find()等效方法吗？

page.locator("abc").find() 在剧作家中不是一个有效的方法:(

【问题讨论】：

根据cypress docs，它似乎试图找到给定选择器的后代。你想要那个吗？或任何其他特定用例？
在剧作家中需要相同的功能，我可以在其中遍历 html 元素。我们有这样的东西吗？

标签： javascript cypress playwright browser-automation

【解决方案1】：

如果将父元素句柄分配给变量，则任何 findBy* 函数（或 locator）都将仅在父元素中搜索。下面的示例中，父项是 div，子项是 button，我们使用 .locator() 来查找元素。

test('foo', async ({ page }) => {
  await page.goto('/foo');
  const parent = await page.locator('div');
  const child = await parent.locator('button');
});

【讨论】：

【解决方案2】：

您可以组合选择器，这将解析为 abc 下面的 div

page.locator("abc div")

【讨论】：

【解决方案3】：

让我们考虑具有以下 HTML 的网站 https://www.example.com

<body style="">
  <div>
    <h1>Example Domain</h1>
    <p>This domain is for use in illustrative examples in documents. You may use this
    domain in literature without prior coordination or asking for permission.</p>
    <p>
      <a href="https://www.iana.org/domains/example">More information...</a>
    </p>
  </div>
</body>

如@agoff所述，您可以使用嵌套定位器page.locator('p').locator('a')，或者您可以直接在定位器page.locator('p >> a')中指定嵌套选择器

// @ts-check
const playwright = require('playwright');

(async () => {
  const browser = await playwright.webkit.launch();
  const context = await browser.newContext();
  const page = await context.newPage();
  await page.goto('https://www.example.com/');

  // Here res1 and res2 produces same output
  const res1 = await page.locator('p').locator('a'); // nested locator
  const res2 = await page.locator('p >> a'); // directly specifying the selector to check the nested elements
  const out1 = await res1.innerText();
  const out2 = await res2.innerText();
  console.log(out1 == out2); // output: true
  console.log(out1); // output: More information...
  console.log(out2); // output: More information...

  // Traversal
  const result = await page.locator('p');
  const elementList = await result.elementHandles(); // elementList will contain list of <p> tags
  for (const element of elementList)
  {
    const out = await element.innerText()
    console.log(out);
  }
  // The above will output both the <p> tags' innerText i.e
  // This domain is for use in illustrative examples in...
  // More information...

  await browser.close();
})();

既然你提到了需要遍历HTML元素，那么elementHandles就可以用来遍历上面代码中locator指定的元素。

【讨论】：