javascript - puppeteer 操纵者无法控制第三个选项卡

Question

我正在尝试让我的 puppeteer 脚本打开 4 个选项卡，每个选项卡都指向不同的 url。我遇到的是我可以让脚本成功控制在我的 chrome 驱动程序中打开的前 2 个选项卡。但是，每当它到达第三个选项卡时，我都会收到一条错误消息

"(node:8141) UnhandledPromiseRejectionWarning: Unhandled promise rejection (rejection id: 1): TypeError: Cannot read property 'goto' of undefined (node:8141) [DEP0018] DeprecationWarning: Unhandled promise rejections are deprecated. In the future, promise rejections that are not handled will terminate the Node.js process with a non-zero exit code."

let pages = await browser.pages();
const p1 = 'https://www.page.com/tab1';
const p2 = 'https://www.page.com/tab2';
const p3 = 'https://www.page.com/tab3';
const p4 = 'https://www.page.com/tab4';
const ptest = 'https://www.test.com';


    await browser.newPage();
    await browser.newPage();
    await browser.newPage();
    await browser.newPage();

    await pages[0].goto(p1, {waitUntil: 'load'});
    await pages[1].goto(p1, {waitUntil: 'load'});
    await pages[2].goto(p1, {waitUntil: 'load'});
    await pages[3].goto(p1, {waitUntil: 'load'});

Answer 1

问题

抛出错误是因为browser.pages()解析为所有当前打开的页面的数组。如果我们逐行查看它，会发生以下情况(假设您从“全新”浏览器开始):

let pages = await browser.pages();

pages 现在是一个包含一页的数组(浏览器启动后的默认空白页)。

await browser.newPage();
await browser.newPage();
await browser.newPage();
await browser.newPage();

您创建了四个新页面，但这不会自动更新您的 pages 数组。 pages 仍然只包含一页。

await pages[0].goto(p1, {waitUntil: 'load'});

第一次调用是因为 pages[0] 包含一个页面。

await pages[1].goto(p1, {waitUntil: 'load'});

这将引发错误(无法读取未定义的属性“goto”)，因为 pages[1] 未定义。

修复(和代码改进)

将您的行 let pages = await browser.pages(); 在您的代码中向下移动，以便在您使用页面之前调用。为了改进您的代码，您还可以删除一个 browser.newPage() 调用，因为一个页面已经存在(现在您实际上有五个打开的页面)并且为了加快您的代码，您可以使用 Promise.all:

const p1 = 'https://www.page.com/tab1';
const p2 = 'https://www.page.com/tab2';
const p3 = 'https://www.page.com/tab3';
const p4 = 'https://www.page.com/tab4';
const ptest = 'https://www.test.com';

await Promise.all([ // opens all pages at once
    browser.newPage(),
    browser.newPage(),
    browser.newPage(),
]);

let pages = await browser.pages(); // now resolves with four pages

await pages[0].goto(p1, {waitUntil: 'load'});
await pages[1].goto(p1, {waitUntil: 'load'});
await pages[2].goto(p1, {waitUntil: 'load'});
await pages[3].goto(p1, {waitUntil: 'load'});