Hash-based navigation with puppeteer

问题

I am trying to navigate to the url which contains # in the url which is returning Error: Navigation Timeout Exceeded: 30000ms exceeded

it('should go to new link', async function(){
    await page.goto('https://example.com/#/abc', {waitUntil: 'networkidle2'})
    await page.waitForNavigation()
    await page.waitFor(15000);
})

Original code expects a path to a tag having value as #/abc

    await page.waitForSelector('a tag selector')
    await page.click('a tag selector')
    await page.waitForNavigation()
    await page.waitFor(5000);
    await page.screenshot({ path: 'abc.png' })

Running the test file with command mocha --timeout 75000

package.json

"devDependencies": {
    "chai": "^4.1.2",
    "karma": "^2.0.3",
    "karma-chai": "^0.1.0",
    "karma-chrome-launcher": "^2.2.0",
    "karma-mocha": "^1.3.0",
    "karma-requirejs": "^1.1.0",
    "mocha": "^5.2.0"
},
"dependencies": {
  "puppeteer": "^0.12.0",
  "requirejs": "^2.3.5"

}

Updated the code to

await page.goto('https://example.com/#/abc', {waitUntil: 'load'})
await page.waitForSelector('selector on desired page');
await page.waitFor(5000);
await page.screenshot({ path: 'abc.png' })

and added headless: false, I can see it does go to the page wait for some amount of time but still throw the error Error: Navigation Timeout Exceeded: 30000ms exceeded

回答1:

goto automatically waits for navigation. Your waitForNavigation is expecting it to make another navigation request. You also don't need to wait for 25 seconds to make this right.

However for such ajax site, IMO, you should wait for some selector that loads only when the page is completely loaded.

You can also pass a timeout parameter to increase the timeout and see if that works.

The following is good enough.

it('should go to new link', async function(){
    await page.goto('https://example.com/#/abc', {waitUntil: 'networkidle2', timeout: 60000 })
    await page.waitFor('#SomeSelectorThatWeWaitFor')
})

The best way to debug this is to see the behaviour of target page carefully.

来源：https://stackoverflow.com/questions/50938926/hash-based-navigation-with-puppeteer

标签

mocha

Puppeteer