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?"
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
// 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
Related Ask AI answer for "What is the method to make Playwright wait until an element is no longer visible or does not exist in the DOM during web testing?".
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!
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 [email protected].