木偶检测何时打开新选项卡 [英] Puppeteer detect when the new tab is opened

问题描述

一个非常简单的问题.

在某些情况下，我的Web应用程序将打开一个新标签. 但是，当我尝试获取所有选项卡(await browser.pages())时，只会得到一个初始页面.

My web app opens a new tab under some conditions. But when I try to get all tabs (await browser.pages()) I get only one, initial page back.

如何在代码中获取新页面的对象?

How can I get the new page's object in my code?

当您没有使用await browser.newPage()的puppeteer创建新标签页时，就会发生这种情况，但是当您执行以下操作时:

This happens when you don't create new tab with puppeteer with await browser.newPage(), but when you do something like this:

await (await browser.pages())[0].evaluate(() => {
    window.open('http://www.example.com', '_blank');
});

该页面在browser.pages()响应中将不可用.

The page won't be available in the browser.pages() response.

谢谢！

推荐答案

在应用打开新标签页时，不知道的情况很难.对我来说，它工作得很好.这是演示如何使用它的代码.阅读评论以了解步骤.

It's hard without knowing your conditions when the app opens a new tab. It works perfectly fine for me. Here is a code demonstrating how I can use it. Read the comments to understand the steps.

已更新:

window.open()不会返回承诺，因此browser.pages()的执行速度比浏览器可以创建和报告事件的速度快.我们可以使用targetcreated事件来了解是否创建了任何新标签.

window.open() doesn't return a promise, thus browser.pages() is executed faster than the browser can create and report the event. We can use the targetcreated event to know if any new tab is created.

browser.on('targetcreated', function(){
    console.log('New Tab Created');
})

如果您稍等片刻或返回承诺，您会看到它在browser.pages()个计数之内报告了它.

If you wait for a while or return a promise, you will see it reports it within browser.pages() count.

await tabOne.evaluate(() => {
    window.open('http://www.example.com', '_blank');
  });
await tabOne.waitFor(2000); // await for a while
console.log("current page count ", (await browser.pages()).length); // 3

这是最终代码.

const puppeteer = require('puppeteer');

(async () => {
  const browser = await puppeteer.launch();

  browser.on('targetcreated', function(){
    console.log('New Tab Created');
  })

  // get current tab count
  console.log("current page count ", (await browser.pages()).length); // 3

  // create a new tab
  await browser.newPage();
  // lets see if tab increased
  console.log("current page count ", (await browser.pages()).length); // 3

  // use destructuring for easier usage
  const [tabOne, tabTwo] = (await browser.pages());

  // use the tabs aka Page objects properly
  await tabOne.goto('https://example.com');
  console.log("Tab One Title ",await tabOne.title()); // Example Domain

  // use the tabs aka Page objects properly
  await tabTwo.goto('https://example.com');
  console.log("Tab Two Title ",await tabTwo.title()); // Example Domain

  await tabOne.evaluate(() => {
    window.open('http://www.example.com', '_blank');
  });
  await tabOne.waitFor(2000); // wait for a while
  console.log("current page count ", (await browser.pages()).length); // 3

  // close the browser
  await browser.close();
})();

如果运行它，将按以下顺序获得结果.

If you run it, you'll get the result in following sequence.

/*
current page count  1
New Tab Created
current page count  2
Tab One Title  Example Domain
Tab Two Title  Example Domain
New Tab Created
current page count  3
*/

这篇关于木偶检测何时打开新选项卡的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！