如何使用 playwright 检查某个元素是否在文档中？

Question

我想测试一个元素是否已被渲染。所以我希望期望 if 存在。有这个命令吗？

\n

await page.goto(\xe2\x80\x98<http://localhost:3000/>');\nconst logo = await page.$(\xe2\x80\x98.logo\xe2\x80\x99)\n\n// expect(logo.toBeInDocument())\n

\n

Answer 1

由于剧作家团队不鼓励使用 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();

Answer 2

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

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

}

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

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

}

由于此示例返回（等待后）元素句柄数组，因此您还可以length在条件中使用属性：

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

}

所有这些示例中的关键是等待承诺page.$()并page.$$()返回。