Unable to load a specific URL with Cypress

Question

I’m unable to load the following URL with Cypress. Getting timeout error. I have set the page load time to 2 mins, still same issue. General URLs eg. (https://www.google.co.nz/) works fine.

it(‘First Test’, () => {
  cy.visit(‘https://shop.countdown.co.nz/‘)
})

Answer 1

Here's a way, not the best, could be improved...

The Countdown site has an aversion to being run in an iframe, but it can be tested in a child window, see custom command here Cypress using child window

Cypress.Commands.add('openWindow', (url, features) => {
  const w = Cypress.config('viewportWidth')
  const h = Cypress.config('viewportHeight')
  if (!features) {
    features = `width=${w}, height=${h}`
  }
  console.log('openWindow %s "%s"', url, features)

  return new Promise(resolve => {
    if (window.top.aut) {
      console.log('window exists already')
      window.top.aut.close()
    }
    // https://developer.mozilla.org/en-US/docs/Web/API/Window/open
    window.top.aut = window.top.open(url, 'aut', features)

    // letting page enough time to load and set "document.domain = localhost"
    // so we can access it
    setTimeout(() => {
      cy.state('document', window.top.aut.document)
      cy.state('window', window.top.aut)
      resolve()
    }, 10000)
  })
})

Can test with that like this

cy.openWindow('https://shop.countdown.co.nz/').then(() => {
  cy.contains('Recipes').click()
  cy.contains('Saved Recipes', {timeout:10000})  // if this is there, have navigated
})

I bumped the setTimeout() in custom command to 10 seconds, cause this site drags it's feet a bit.

Configuration:

// cypress.json
{
  "baseUrl": "https://shop.countdown.co.nz/",
  "chromeWebSecurity": false,
  "defaultCommandTimeout": 20000       // see below for better way
}

---

Command timeout error

Using Gleb's child window command, there's a timeout error that I can't track the source of.

To avoid it I set "defaultCommandTimeout": 20000 in config, but since it's only needed for the openWindow call it's better to remove the global setting and use this instead

cy.then({timeout:20000}, () => {
  cy.openWindow('https://shop.countdown.co.nz/', {}).then(() => {
    cy.contains('Recipes').click()
    cy.contains('Saved Recipes', {timeout:10000})  // if this is there, have navigated
  })
})

To check if the long command timeout only applies once, break one of the inner test commands and check that that it times out in the standard 4000 ms.

cy.then({timeout:20000}, () => {
  cy.openWindow('https://shop.countdown.co.nz/', {}).then(() => {
    cy.contains('Will not find this').click()  // Timed out retrying after 4000ms

Answer 2

The quotes are wrong. Try the below code:

it('First Test', ()=>{ cy.visit('https://shop.countdown.co.nz/') })

Answer 3

On trying to visit the URL I am getting the error:

cy.visit() failed trying to load:

https://shop.countdown.co.nz/

We attempted to make an http request to this URL but the request failed without a response.

We received this error at the network level:

Error: ESOCKETTIMEDOUT

Common situations why this would fail:

• you don't have internet access
• you forgot to run / boot your web server
• your web server isn't accessible
• you have weird network configuration settings on your computer

Error Screenshot:

Lets look into the common situations where this might happen:

• you don't have internet access: I have a internet access, so this can be ruled out.
• you forgot to run / boot your web server - Your site is accessible from a normal browser, this can be ruled out as well.
• your web server isn't accessible - This is a possibility where may be there are firewall settings at the server end because of which cypress is not getting any response when accessing the site.
• you have weird network configuration settings on your computer - This can be ruled out as well.

Answer 4

I had a similar issue, so what I observed in my case was that the URL was not getting added to the iframe src property and hence cy.visit() was getting timed out each time.

So, I added the URL manually to the src property of the iframe. Here's my custom command for reference:

Cypress.Commands.add('goto', url => {
  return new Promise(res => {
    setTimeout(() => {
      const frame = window.top.document.getElementsByClassName('aut-iframe')[0];
      frame.src = url;
      var evt = window.top.document.createEvent('Event');
      evt.initEvent('load', false, false);
      window.dispatchEvent(evt);
      res();
    }, 300);
  });
});

Now use cy.goto('https://yoururl.com') and you are good to go.