web-dev-qa-db-ja.com

Puppeteerでタブを切り替える方法は？

これが私のユースケースです：

クリックすると新しいタブが開き、コンテンツが読み込まれるリンクがあります。

私が探しているもの：

新しいタブが開いている間にページの参照を切り替える方法や、新しいタブの参照を作成する方法はありますか？

puppeteer
8
Kaushik

リンクがクリックされた後に開かれたページを取得するには、 popup イベントをリッスンできます。ページが新しいタブまたはウィンドウを開いたときに発行されます。

コードサンプル（上記のリンク先のドキュメントから）

const [newPage] = await Promise.all([
    new Promise(resolve => page.once('popup', resolve)),
    page.click('a[target=_blank]'),
]);

これにより、現在のページでウィンドウが開くのを待っている間にリンクをクリックします。 newPageが開かれたページになります。

代替アプローチ：開いているすべてのページのリストを取得するには、 browser.pages ：

const pages = await browser.pages();

pagesは、開いているすべてのページを含む配列になります。

2
Thomas Dondorf

次の機能を使用します。

let clickAndWaitForTarget = async (clickSelector, page, browser) => {
  const pageTarget = page.target(); //save this to know that this was the opener
  await page.click(clickSelector); //click on a link
  const newTarget = await browser.waitForTarget(target => target.opener() === pageTarget); //check that you opened this page, rather than just checking the url
  const newPage = await newTarget.page(); //get the page object
  // await newPage.once("load",()=>{}); //this doesn't work; wait till page is loaded
  await newPage.waitForSelector("body"); //wait for page to be loaded

  return newPage;
};

そしてそれを使用します：

await page.waitForSelector('a[href="/admin"]');
page = await clickAndWaitForTarget('a[href="/admin"]', page, browser);

// Admin page
//console.log(JSON.stringify(page.target()));
await page.waitForSelector('a[href="/users"]');
2
G. I. Joe

現在、この問題をフォローすることができます https://github.com/GoogleChrome/puppeteer/pull/554 この機能がpuppeteerにいつ追加されるかを知ることができます。または、JoelEinbinderがフォークしたレポを使用できます

1
Anh Thang Bui