Puppeteer：我怎样才能等到列表关闭？如何等到元素从 DOM 中消失？答案

【问题标题】：Puppeteer: How can I wait until a list is closed? How can I wait until an element is disappeared from the DOM?Puppeteer：我怎样才能等到列表关闭？如何等到元素从 DOM 中消失？
【发布时间】：2020-09-13 07:20:01
【问题描述】：

Сase： 有一个列表，您需要在其中选择一个项目，然后它会关闭。当您单击另一个项目时，列表没有时间关闭。最后再单击另一个列表元素。

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

【问题讨论】：

也许page.select() 或elementHandle.select() 可以帮忙？
你能检查一下这个stackoverflow.com/questions/61647401/… 吗？也许这有帮助
在playwright中可以使用page.waitForSelector(selector, {state: "detached"});等待元素从dom中分离出来

标签： puppeteer playwright

【解决方案1】：

为了等待一个元素从 DOM 中消失，你需要首先开始等待元素消失，然后再进行操作：

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

【讨论】：

如果有帮助，请为答案投票。

【解决方案2】：

您可以从以下列表中一次选择多个项目：

// multiple selection
page.selectOption('select#colors', ['red', 'green', 'blue']);

来源：https://playwright.dev/docs/api/class-page#page-select-option

【讨论】：

【解决方案3】：

试试这个：

等待 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');

这是 API 文档：https://playwright.dev/docs/api/class-page#page-wait-for-selector

【讨论】：