Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Initial visit() is very slow on Angular apps with an external resource #1608

Closed
jdhines opened this issue Apr 17, 2018 · 15 comments

Comments

6 participants
@jdhines
Copy link

commented Apr 17, 2018

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:

  1. Clone https://github.com/jdhines/cypress-test
  2. npm install
  3. ng serve
  4. In another terminal window, open Cypress (I used npx cypress open)
  5. 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

@jennifer-shehane

This comment has been minimized.

Copy link
Member

commented Apr 17, 2018

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.

http://g.recordit.co/uiyr3UM3jn.gif

@brian-mann

This comment has been minimized.

Copy link
Member

commented Apr 17, 2018

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

@jennifer-shehane

This comment has been minimized.

Copy link
Member

commented Apr 17, 2018

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

@jdhines

This comment has been minimized.

Copy link
Author

commented Apr 17, 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.

@jennifer-shehane

This comment has been minimized.

Copy link
Member

commented Apr 18, 2018

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: #1469

@jdhines

This comment has been minimized.

Copy link
Author

commented Apr 24, 2018

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.

@brian-mann

This comment has been minimized.

Copy link
Member

commented Apr 24, 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.

@jdhines

This comment has been minimized.

Copy link
Author

commented Apr 24, 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.

@brian-mann

This comment has been minimized.

Copy link
Member

commented Apr 24, 2018

@jdhines actually we already support the NO_PROXY env var.

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

@jdhines

This comment has been minimized.

Copy link
Author

commented Apr 25, 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

This comment has been minimized.

Copy link
Author

commented Apr 25, 2018

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.

@edwinharly

This comment has been minimized.

Copy link

commented Jun 30, 2018

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

@murugaratham

This comment has been minimized.

Copy link

commented Jul 5, 2018

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

@cypress-bot

This comment has been minimized.

Copy link

commented Apr 1, 2019

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.

@cypress-bot

This comment has been minimized.

Copy link

commented May 17, 2019

Released in 3.3.0.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.