如何在 Puppeteer 中单击 pop-up/new 选项卡 windows 中的元素

Question

我使用了以下示例来定位弹出窗口 window/newtab，但事后可用的方法有限。我只能真正做一些事情，比如捕获 URL 并关闭选项卡（以及其他事情）。

我想做的是与 google/twitter 登录弹出窗口交互，但 puppeteer 似乎没有针对多个 window 句柄的解决方案，至少在尝试时在点击元素中进行交互。

const newPagePromise = new Promise(x => browser.once('targetcreated', target => x(target.page()));
await page.click('my-link'); //Opens pop-up window
const newPage = await newPagePromise;

我希望有这样的东西（除了上面写的代码）：

const element = await newPage.$(selector);
await element.click();

这不起作用。还有其他人有这个需求吗？

Answer 1

对此持保留态度。我正在以 api 文档不推荐的方式使用 puppeteer，因此我不得不翻译您在下面看到的一些内容。

我很乐意回答任何其他问题。

总而言之，此解决方案允许您打开一个新的 tab/pop-up，并与之交互 tab/pop-up。我什至能够关闭弹出窗口并切换回原始页面，这在下面没有提到。

const newPagePromise = getNewPageWhenLoaded()
await page.click('my-link'); //Opens pop-up window
const newPage = await newPagePromise;
newPage = newPage.mainFrame();
const element = await newPage.waitForSelector('img');
newPage.click(element);

function getNewPageWhenLoaded() {
    return new Promise((x) => browser.once('targetcreated', async (target) => {
        const newPage = await target.page();
        const newPagePromise = new Promise(() => newPage.once('domcontentloaded', () => x(newPage)));
        const isPageLoaded = await newPage.evaluate(() => document.readyState);
        return isPageLoaded.match('complete|interactive') ? x(newPage) : newPagePromise;
    }));
}

如何在 Puppeteer 中单击 pop-up/new 选项卡 windows 中的元素

How to click elements within pop-up/new tab windows in Puppeteer

selenium

node.js

puppeteer