如何使用puppeteer从不同的异步函数在同一浏览器窗口打开页面?

Question

我有两个不同的函数(下面代码示例中的openbrowser和open)，它们使用puppeteer打开页面。我希望这两个函数在同一个浏览器窗口中打开它们的页面。当前，当调用每个函数时，每个函数都会打开一个新的浏览器窗口。

let openbrowser = async () => {
const browser = await puppeteer.launch({
headless: false,
});
const page = await browser.newPage();
page.setViewport({
width: 1280,
height: 800,
isMobile: false,
});
await page.goto("https://youtube.com/");
};
let open = async () => {
const browser = await puppeteer.launch({
headless: false,
});
const page = await browser.newPage();
page.setViewport({
width: 1280,
height: 800,
isMobile: false,
});
await page.goto("https://www.youtube.com/results?search_query=avatar");
};
openbrowser()
open()

即使open只是调用openbrowser，它仍然会启动一个新的浏览器来打开页面。

let open = async () => {
openbrowser()
};

如何让不同的函数在同一个浏览器窗口中打开url ?

Answer 1

您打开两个浏览器和两个页面，因此您得到两个页面。

简单地重用相同的浏览器和页面(又名浏览器选项卡)导航到下一页:

let openbrowser = async () => {
// initialize:
const browser = await puppeteer.launch({ headless: false, });
const page = await browser.newPage();
await page.setViewport({ width: 1280, height: 800, isMobile: false, });
// load first page:
await page.goto("https://youtube.com/");
// do stuff with this page, such as: await page.screenshot()
// navigate to next page:
await page.goto("https://www.youtube.com/results?search_query=avatar");
// after all done:
await page.close();
await sleep(2000);
await browser.close();
};
(async() => {
openbrowser();
})();

您可以将此代码拆分为函数，只需传递page对象:

const loadPage1 = async (page) => {
await page.goto("https://youtube.com/");
// do stuff with this page, such as: await page.screenshot()
};
const loadPage2 = async (page) => {
await page.goto("https://www.youtube.com/results?search_query=avatar");
// do other stuff
};
let browser;
(async() => {
// initialize:
browser = await puppeteer.launch({ headless: false });
const page = await browser.newPage();
await page.setViewport({ width: 1280, height: 800, isMobile: false });
loadPage1(page); // load first page
loadPage2(page); // navigate to next page
// after all done:
await page.close();
await sleep(2000);
})()
.catch(err => console.error(err))
.finally(() => browser?.close());