Cypress: Initial visit() is very slow on Angular apps with an external resource

Created on 17 Apr 2018 · 15Comments · Source: cypress-io/cypress

Current behavior:

Started up a new Angular app (ng new cypress-test), installed Cypress, did ng serve, wrote a simple test just visiting the home page and looking for the sample text, and that test ran fine.
Then, added in a <link> to the Bootstrap CDN in the app's index.html and suddenly the Cypress test cranks for exactly 30 seconds (the status bar in Chrome says "Establishing secure connection..."), and then runs the test, but prints out a timeout error to the console:
screen shot 2018-04-17 at 9 35 31 am

Tried this with Font Awesome, and some Google Fonts, and all 3, and it still takes 30 seconds, so it's not an issue with slow responses from the external resource; there seems to be some issue with those links in the <head> section that Cypress doesn't like.

Desired behavior:

The tests load the application's pages in roughly the same time as loading them normally via localhost is.

Steps to reproduce:

Clone https://github.com/jdhines/cypress-test
npm install
ng serve
In another terminal window, open Cypress (I used npx cypress open)
In the browser, observe that 30 seconds elapse, after which time the test runs, and the console report a timeout error for the bootstrap resource.

Versions

Cypress 2.1.0
Chrome 62
Mac OS High Sierra

bug

Source

jdhines

Most helpful comment

So I've turned the FontAwesome and Bootstrap resources into local sources, and removed Tether altogether since I didn't need it, which just leaves the Google fonts I'm embedding, and I can't localize those. For tests, I wouldn't really care if the custom fonts didn't load, it's just that it tries to pull the fonts for 30 seconds, and obviously I can't build a suite of tests if each one with a visit() will take a minimum of 30 seconds to run.

Found #1237, and added this to my cypress.json:

{
    "blacklistHosts": ["*fonts.googleapis.com"]
}

and it bypasses it as it should, so the test runs quickly. Obviously, this is a workaround as opposed to a proxy solution, but it'll do for now.

jdhines on 25 Apr 2018

🎉5 👍4 ❤2

All 15 comments

I cloned your repo and ran it and did not experience the 30+sec slowdown and can see that the bootstrap cdn loaded very quickly. I'm using Chrome 65, but not sure what else could be the issue. Could you provide more information.

jennifer-shehane on 17 Apr 2018

Take a picture of the network request that is timing out including the timings inside the network panel.

brian-mann on 17 Apr 2018

My timings:
screen shot 2018-04-17 at 1 36 05 pm

jennifer-shehane on 17 Apr 2018

Here's what I'm seeing on every refresh; don't know if it helps:
screen shot 2018-04-17 at 4 21 51 pm

screen shot 2018-04-17 at 4 24 41 pm

I am behind a corporate proxy, but don't know why that would matter. Again, loading and using my app outside of Cypress works fine (i.e. just going to localhost:4200 in a regular Chrome window), including pulling in the Bootstrap.

jdhines on 17 Apr 2018

👍2

There are several issues opening concerning corporate proxy. It is possible that is the issue - that you configured something in Chrome a while ago that needs configuring in the Cypress browser. See all corporate proxy issues: https://github.com/cypress-io/cypress/issues/1469

jennifer-shehane on 18 Apr 2018

👍1

I took a look through those, and while we do have a proxy, in my Network Settings (on the mac) I'm bypassing the proxy for localhost calls. My Cypress test does run:

describe('First Cypress Test', () => {
  it('doesnt do much', () => {
    cy.visit('http://localhost:4200/#/login');
    expect(true).to.equal(true);
  });
});

but the problem is that it times out on external resources in my app (which is I guess where it would need to be using the proxy, as it should since the resource isn't hosted at localhost).

If I do export http_proxy=<my_corporate_proxy> before running cypress, then the test fails immediately with a 503 error, which is the same thing I get outside of cypress if I don't exclude localhost in my system proxy settings. So, setting that env variable did change the behavior but I also need Cypress to NOT use the proxy when querying a localhost resource.

jdhines on 24 Apr 2018

@jdhines appreciate your explanation of this. It all makes sense, and fixing all the proxy issues is something that is up on our radar. I'm not sure how feasible it will be for Cypress to read off the system proxy configuration automatically - but at the very least we'll be able to support various proxy configuration settings and this is a use case we'll code for.

By chance do you have any other development specific applications you could point us to that you've either:

1) not had to touch additional proxy settings at all
2) did need to provide proxy information configuration

It would be helpful for us to look at and model after other applications solving the same problems as us.

Also - could you provide a screenshot of your system settings including the localhost bypass? Make sure to blackout anything that's sensitive in them. All of that would be super helpful.

brian-mann on 24 Apr 2018

1312 is very similar to mine. I think basically what I need to do is alert Cypress to use the proxy, but bypass it for localhost.

As far as working apps go, I've been developing with Angular, and if I create a fresh Angular app (repro link in the first post), then throw a link to say Bootstrap's CDN into the Angular app's generated index.html file, and serve the app locally, everything works, meaning the app comes up at localhost, and the external Bootstraps CSS resource is pulled in.
With Cypress, the cy.visit('http://localhost:4200') works, but the test cranks for the max of 30 seconds trying to pull in the Bootstrap resource.

jdhines on 24 Apr 2018

@jdhines actually we already support the NO_PROXY env var.

Do export NO_PROXY=http://localhost or try export NO_PROXY=localhost

brian-mann on 24 Apr 2018

I gave that a try. Setting it with the protocol NO_PROXY=http://localhost gave a 503 error, using just localhost was the right setting.

That said, setting both http_proxy and NO_PROXY results in the same test run as having neither set. In other words, this:

//1
export http_proxy=http://my.proxy.com:8000
export NO_PROXY=localhost

has the same effect as this:

//2
unset http_proxy
unset NO_PROXY

which is
screen shot 2018-04-25 at 9 25 29 am

The only difference is with //1 above, the Cypress terminal outputs 404 errors for those external resources in the head, and the test stops at about 30 seconds, but with //2 (no proxy settings other than system), the Cypress terminal output reports 500 errors for those external resources, and the test runs for about 1 minute. I'm not sure what (if anything) can be deduced from that.

Here's my system proxy settings:
screen shot 2018-04-25 at 9 31 36 am

jdhines on 25 Apr 2018

Found #1237, and added this to my cypress.json:

{
    "blacklistHosts": ["*fonts.googleapis.com"]
}

and it bypasses it as it should, so the test runs quickly. Obviously, this is a workaround as opposed to a proxy solution, but it'll do for now.

jdhines on 25 Apr 2018

🎉5 👍4 ❤2

In my case, it was the firewall, so I set Cypress to be allowed on private & public and it worked

edwinharly on 30 Jun 2018

I'm also black listing google fonts for now, but would hope that cypress can support this.

murugaratham on 5 Jul 2018

The code for this is done in cypress-io/cypress#3531, but has yet to be released.
We'll update this issue and reference the changelog when it's released.