CODEWITHSUNDEEP
javascriptnode.jspuppeteer
mehdi Ichkarrane
mehdi Ichkarrane

Reputation: 426

How to go back in a new page using puppeteer?

I m using nodejs puppeteer to scrape a website. I've come across a situation where i need to go back in a new tab, but i couldn't find a way to do it in puppeteer (i can produce it manually on windows by ctrl + clicking the browser's go back button)

below is an example where i need to launch many pages in parallel starting from a particular page

const page = await browser.newPage();
await page.goto(myWebsiteUrl);
// going through some pages..

for (let i = 0; i < numberOfPagesInParallel; i++) {
   // instanciating many pages with goback
   const newBackPage = await page.gobackAndReturnNewPage(); // this is what i wish i could do, but not possible in puppeteer
   const promise = processNewBackPageAsync(newBackPage);
   this.allPromises.push(promise);
}

await Promise.all([...this.allPromises])

Upvotes: 1

Views: 4730

Answers (1)

Leo
Leo

Reputation: 2350

I searched across puppeteer api and chrome devtools protocol and don't find any way to clone a tab or clone history to another tab, maybe this is a usefull feature to add to both puppeteer and chrome CDP.

But, there is a way to create a new page and go back in history without need to track history, the limitation of this solution is that the new page does not share/clone the history of original page, I also tried to use Page.navigateToHistoryEntry but since the history is owned by page I got a error

So, there is the solution that creates a new page and go to last history url.

const puppeteer = require("puppeteer");

(async function() {
    // headless: false
    // to see the result in the browser
    const browser = await puppeteer.launch({ headless: false });
    const page = await browser.newPage();

    // let's do some navigation
    await page.goto("http://localhost:5000");
    await page.goto("http://localhost:5000/page-one");
    await page.goto("http://localhost:5000/page-two");

    // access history and evaluate last url of page
    const session = await page.target().createCDPSession();
    const history = await session.send("Page.getNavigationHistory");
    const last = history.entries[history.entries.length - 2];

    // create a new page and go back
    // important: the page created here does not share the history
    const backPage = await browser.newPage();
    await backPage.goto(last.url);

    // see results
    await page.screenshot({ path: "page.png" });
    await backPage.screenshot({ path: "back-page.png" });

    // uncomment if you use headless chrome
    // await browser.close();
})();

References:

https://chromedevtools.github.io/devtools-protocol/tot/Page/#method-getNavigationHistory

Upvotes: 2

Related Questions