如何检查元素是否在剧作家的文档中？

Question

我想测试一个元素是否已经被渲染。所以我想要除了如果存在。有这方面的命令吗？

await page.goto(‘<http://localhost:3000/>');
const logo = await page.$(‘.logo’)

// expect(logo.toBeInDocument())

Answer 1

如果你用page.$()查询一个元素，你可以简单地使用：

const logo = await page.$('.logo');
if (logo) {

}

同样，如果您使用 page.$$() 查询多个元素：

const logo = await page.$$('.logo');
if (logo) {

}

因为这个例子returns（等待之后）一个元素句柄数组，你也可以在条件中使用属性 length：

const logo = await page.$$('.logo');
if (logo.length) {

}

所有这些示例中的关键是等待 page.$() 和 page.$$() return.

的承诺

Answer 2

由于 Playwright 团队不鼓励使用 ElementHandle (page.$(), page.$$())，您可以使用 Locator 对象和 count() 方法：

expect(await page.locator('data-testid=exists').count()).toBeTruthy();
expect(await page.locator('data-testid=doesnt-exist').count()).toBeFalsy();

如果您想检查元素是否已呈现（我假设您的意思是可见），您可以使用 toBeVisible 断言：

await expect(page.locator('data-testid=is-visible')).toBeVisible();

How to check if an element is in the document with playwright?