如何使用 Playwright 定位具有特定文本的 div 并测试 id？

Question

我有一个这样的 HTML：

<div>
  <div>Internal Description</div>
  <app-rich-text-editor>
    <div data-testid="rich-text-editor">
    </div>
  </app-rich-text-editor>
</div>

<div>
  <div>External Description</div>
  <app-rich-text-editor>
    <div data-testid="rich-text-editor">
    </div>
  </app-rich-text-editor>
</div>

如果我用

await page.getByTestId('rich-text-editor')

我得到了两个 div。它们之间的区别是文本“内部描述”和“外部描述”。如何使用

data-testid="rich-text-editor"

和父级并行

<div>Internal Description</div>

定位第一个 div？

Answer 1

您可以自上而下地工作：

通过文字选择div
使用
```
+
```
CSS 选择器来抓取下一个
```
<app-rich-text-editor>
```
同级

使用

getByTestId

功能通过

[data-testid="rich-text-editor"]

进行选择。

const playwright = require("playwright"); // ^1.39.0

const html = `<!DOCTYPE html><html><body>
<div>
  <div>Internal Description</div>
  <app-rich-text-editor>
    <div data-testid="rich-text-editor">
      ok
    </div>
  </app-rich-text-editor>
</div>
<div>
  <div>External Description</div>
  <app-rich-text-editor>
    <div data-testid="rich-text-editor">
      not ok
    </div>
  </app-rich-text-editor>
</div>
</body></html>`;

let browser;
(async () => {
  browser = await playwright.firefox.launch();
  const page = await browser.newPage();
  await page.setContent(html);
  const text = await page.getByText("Internal Description")
    .locator("+ app-rich-text-editor")
    .getByTestId("rich-text-editor")
    .textContent();
  console.log(text.trim()); // => ok
})()
  .catch(err => console.error(err))
  .finally(() => browser?.close());

也可以：

const text = await page.getByText("Internal Description")
  .locator('+ app-rich-text-editor [data-testid="rich-text-editor"]')
  .textContent();

也就是说，如果您正在测试自己的页面，使用“重”选择器和 CSS 可能是一种反模式。考虑向父元素添加特定的测试 ID，或在应用程序中使用其他属性和结构，以保持定位器简单并避免使用 CSS。

如何使用 Playwright 定位具有特定文本的 div 并测试 id？

问题描述投票：0回答：1

1个回答

最新问题

如何使用 Playwright 定位具有特定文本的 div 并测试 id？

问题描述 投票：0回答：1

1个回答

最新问题

问题描述投票：0回答：1