Rayrun
← Back to Discord Forum

Waiting for an element to not exist

Does it exist at all? If not, then I'd suggest adding such assertion when you know for sure that all elements are there.

For example: you assert that ALL the elements that need to be present/visible are there, then you check if the element that you do not want is hidden/detached. It isn't bullet proof, but it's a start. Maybe try and run a bunch of times to see if it's OK?

If it exists at some point, I guess just wait for it to be present and then to be hidden, or the state that you want it to be.

This thread is trying to answer question "How can I wait for an element to not exist or be hidden during web testing?"

5 replies
@mookiept: the element should NOT be visible to the user, the problem is that the test doesn't know if the element isn't there because it shouldn't be or if its not there because it hasn't loaded yet, unfortunately theres no other elements we can use to determine that everything else has finished loading, thought about waiting for network idle but it's not really possible due to other things happening in the background

the element should NOT be visible to the user, the problem is that the test doesn't know if the element isn't there because it shouldn't be or if its not there because it hasn't loaded yet, unfortunately theres no other elements we can use to determine that everything else has finished loading, thought about waiting for network idle but it's not really possible due to other things happening in the background

yeah, and networkidle is not quite recommended. Perhaps wait for a network request that loads all the elements/or one that gets you to a stage that you're pretty confident everything has loaded?

Is that a spinner or loading overlay you're talking about, or something else?

// Enable request interception
    await page.route('**/*', (route) => route.continue());
  
    // Track the number of open AJAX requests
    let openAjaxRequests = 0;
  
    // Intercept AJAX requests to increment/decrement the openAjaxRequests counter
    page.on('request', (request) => {
      if (request.resourceType() === 'xhr') {
        openAjaxRequests++;
      }
    });
    page.on('response', (response) => {
      if (response.request().resourceType() === 'xhr') {
        openAjaxRequests--;
      }
    });
    await page.waitForFunction((openRequests) => openRequests === 0, openAjaxRequests);

Not sure if this helps but this is how I did it. This waits for all ajax requests to finish. For me it was a overlay mask and checked for attached/detached state

@r3m6525

VinceAlvarez

you can use WaitFor({state : 'hidden'}) method to wait for an element to get hidden

Answer

Waiting for Elements in Playwright

When testing with Playwright, you often need to wait for elements to disappear or become hidden. Here's how you can do it.

Waiting for an Element to Not Exist

To wait for an element to not exist, use the waitFor method with the state option set to 'hidden'. This makes Playwright wait until the element is no longer visible.

import { chromium } from 'playwright';

async function waitForElementNotExists() {
  const browser = await chromium.launch();
  const context = await browser.newContext();
  const page = await context.newPage();

  await page.goto('https://ray.run');

  await page.waitFor('.my-element', { state: 'hidden' });
}

waitForElementNotExists();

Waiting for an Element to Be Hidden

If you want to wait for an element to be hidden (but still exist in the DOM), use the state option with 'visible' and 'hidden'. This makes Playwright wait until the element transitions from being visible to hidden.

import { chromium } from 'playwright';

async function waitForElementHidden() {
  const browser = await chromium.launch();
  const context = await browser.newContext();
  const page = await context.newPage();

  await page.goto('https://ray.run');

  await page.waitFor('.my-element', { state: 'visible' });
  await page.waitFor('.my-element', { state: 'hidden' });
}

waitForElementHidden();

Remember, these examples assume you've navigated to a webpage and have a page object. You may need to adjust the code based on your testing scenario. Happy testing with Playwright!

Related Discord Threads

TwitterGitHubLinkedIn
AboutQuestionsDiscord ForumBrowser ExtensionTagsQA Jobs

Rayrun is a community for QA engineers. I am constantly looking for new ways to add value to people learning Playwright and other browser automation frameworks. If you have feedback, email luc@ray.run.