如何选择在单击 puppeteer 和 mocha 后显示的元素（如弹出框）？

Question

我正在使用 mocha 测试，我想测试单击按钮后元素是否可见。一种类似的情况是当您在没有登录的情况下点击 youtube 上的“喜欢”按钮时。有什么建议？我尝试使用以下代码来选择 dom，但它总是“未定义”，而我可以从浏览器中选择它。等待页面.waitFor(3000);await page.$('#contentWrapper > ytd-modal-with-title-and-button-renderer')

Answer 1

您可以使用以下内容：

await page.waitForNavigation();

await page.waitForSelector('#contentWrapper > ytd-modal-with-title-and-button-renderer', {visible: true});

waitForNavigation - 将等待新页面加载（如果页面加载正在进行）

waitForSelector - 方法将等待特定选择器出现在 dom 中

{visible: true} - 将确保元素可见

如果它不起作用，那意味着没有页面加载正在进行，您可以简单地删除第一行并运行：

await page.waitForSelector('#contentWrapper > ytd-modal-with-title-and-button-renderer', {visible: true});

这是一个额外的，以防您将来使用xpath：

await page.waitForXPath( xpath_selector );

它与waitForSelectorxpath 用法相同。

Answer 2

你必须使用waitForSelector. 它可以等待页面更改并仅在此选择器出现在页面中时触发。