我如何断言某个元素不在剧作家的页面上？

Question

我正在测试包含徽标的 PWA，我想确保徽标不会出现在某些页面上。

如何断言某个元素不存在？我检查了 Playwright assertions documentation，但它只有检查确实存在的事物的示例。

因为剧作家要求我们await一切，所以我想这样做：

async assertNoLog(): Promise<boolean> {
  await this.page.locator('div#page-id');
  // Now check if logo is on page.
}

但我不确定要写什么才能真正搜索徽标。

Answer 1

您可以使用您期望元素具有的条件。例如，在 Playwright 的主页上，您希望 class .navbar__brand 的元素可见，但您还希望 class .notexists 的元素不可见（在这种情况下该元素将不存在）。然后你可以这样做：

test('element does exist @pass', async ({ page }) => {
  await page.goto('https://playwright.dev/');
  const locator = await page.locator('.navbar__brand').isVisible();
  expect(locator).toBeTruthy();
});

test('element does NOT exist @fail', async ({ page }) => {
  await page.goto('https://playwright.dev/');
  const locator = await page.locator('.notexists').isVisible();
  expect(locator).toBeTruthy();
});

这样做当然会return相同的结果：

test('element does exist @pass', async ({ page }) => {
  await page.goto('https://playwright.dev/');
  expect(await page.locator('.navbar__brand').isVisible()).toBe(true);
});

test('element does NOT exist @fail', async ({ page }) => {
  await page.goto('https://playwright.dev/');
  expect(await page.locator('.notexists').isVisible()).toBe(true);
});

正如我所说，元素的条件由您决定。例如，如果您想断言具有 visibility:hidden 的元素也不存在于 DOM 中，因为它根本不应该存在，您可以将可见性和 .isHidden() 条件包装在if/else，等等。当然，可以随意使用布尔值 (toBe(true)/toBe(false)、toBeTruthy()/toBeFalsy())。

这些不是最优雅的解决方案，但我希望它们能有所帮助。

我如何断言某个元素不在剧作家的页面上？

How can I assert that an element is NOT on the page in playwright?

playwright