Puppeteer: How can I wait until a list is closed? How can I wait until an element is disappeared from the DOM?

Viewed 4797

Сase: There is a list in which you need to select an item, then it closes. When you click on another item the list does not have time to close. Finally there is one more click on another list element.

await page.waitForSelector('.list');
await page.click('.list');
await page.waitForSelector('.list-element');
await page.click('.list-element'); // click on the list element and list closes
await page.click('.another-element'); // click on the list
3 Answers

For waiting for an element to disappear from DOM, you need to start waiting first for the element to disappear before the action which makes it so:

await Promise.all([
  await page.waitForSelector(waitingSpinner,{state: 'detached'}),
  await page.click('This is the element which causes the spinner to start')
]);

Try this:

await page.waitForSelector('.list', {state: 'hidden'});

await page.waitForSelector('.list');
await page.click('.list');
await page.waitForSelector('.list-element');
await page.click('.list-element');
await page.waitForSelector('.list', {state: 'hidden'});
await page.click('.another-element');

This is the API Documentation: https://playwright.dev/docs/api/class-page#page-wait-for-selector

Related