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

user_1209486 0
Viewed 3150

I'm testing a website that includes a logo, and I want to make sure the logo does not appear on some pages.

How can I assert that an element does NOT exist? I checked the Playwright assertions documentation, but it only has examples of checking for things that do exist.

async assertNoLog(): Promise<boolean> {
  await this.page.locator('div#page-id'); // now the page has loaded
  // How do I check if logo is on page without throwing an error if it is missing
}

I'm not sure what to write here to assert that my element is not found anywhere on the page.

playwright
2 Answers
user_9984950

You can play with the conditions you expect your element to have. For example, at Playwright's homepage you expect an element by the class .navbar__brand to be visible, but you also expect an element by the class .notexists NOT to be visible (in this case this element would not exist). Then you can do:

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();
});

Doing this, of course, would return the same results:

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);
});

As I say, the element's conditions are up to you. For example, if you want to assert an element with visibility:hidden is also not present in the DOM, because it simply shouldn't be, you can wrap the visibility and a .isHidden() conditions within a if/else, etc. And of course, feel free to play with booleans (toBe(true)/toBe(false), toBeTruthy()/toBeFalsy()).

These are not the most elegant solutions out there, but I hope they can help.

user_122257200
Related