Visiting tutorialspoint with cypress keeps waiting for the page to load

Question

If you try cy.visit('/') with a baseURL of https://www.tutorialspoint.com/html/index.htm you'll see that the viewport doesn't resemble the website at all: NOTE: seems like there's a difference between using baseURL or you just the full URL inside cy.visit(). Either case cy.visit ends up failing:

Your page did not fire its load event within 60000ms

I can't seem to go past visiting the website. Meaning, I can't perform any validations inside it. Cy.visit (or any other navigation hacks and custom commands I've tired) end up failing in different ways.

Probably the website is expecting some resource that never loads, can I just stop the website to load any further?

Answer 1

The page https://www.tutorialspoint.com/html/index.htm never completes loading. When viewed in Google Chrome F12 Network (without using Cypress) it shows continual requests and no data for the time it took to complete the page load. Which suggests that the page load was never complete.

Compare this to loading the Cypress documentation page https://docs.cypress.io/guides/overview/why-cypress which shows a completed load time.

Answer 2

The failure to page-load appears to be due to trackers and advertisers, perhaps historical and no longer functional.

Unless specifically testing those "features", you can stub them out and proceed with testing the page.

For example, here's a couple I picked out that seem to resolve the page-load problem

it('tests tutorialpoint', () => {
  cy.intercept('https://usersync.gumgum.com/**', {})          // tracking?
  cy.intercept('https://image6.pubmatic.com', {})             // advertising?

  cy.visit('https://www.tutorialspoint.com/html/index.htm')
  cy.get('h1').contains('HTML Tutorial')                      // passes
})

Realistically you would want to test a web site without interference from links that clog the network traffic.

Answer 3

Quodos to Nunzio for a good solution. I would take the whitelist approach instead, makes for a much faster execution.

Include the base domain, also bing.com since a page script is relying on that domain.

const whitelist = ['tutorialspoint.com', 'bing.com']
cy.intercept('*', (req) => {
  if (!whitelist.some(wl => req.url.includes(wl))) {
    req.reply({})
  }
})

cy.visit('https://www.tutorialspoint.com/html/index.htm');
cy.get('h1').contains('HTML Tutorial')
cy.contains('li', 'HTML - Iframes').click()
cy.get('h1').contains('HTML - Iframes')         // on the new page now