javascriptangulartypescriptroutespuppeteer

How to navigate Angular routes without full reload in Puppeteer

I'm taking screenshot from a Angular website with Puppeteer and want to navigate routes without triggering a full page reload. Using page.goto() causes a reload, but Angular's client-side router should allow navigation without it.

For example:

await page.goto('http://localhost:4200/home'); // Full reload
await page.goto('http://localhost:4200/about'); // Full reload

I've also tried simulating a click on routerLink, which works:

await page.click('a[routerLink="/about"]');

However, I want to programmatically navigate without relying on existing links. Ideally, I'd like to use Angular's Router.navigate() or some equivalent through Puppeteer.

Solution

  • I think you can try, I found similar code in angular github source code:

    This should change the url and load the page without page refresh.

    window.history.pushState(null, '', event.target.href);