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

jdhines · 2018-04-17T13:48:16Z

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:

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

The text was updated successfully, but these errors were encountered:

jennifer-shehane · 2018-04-17T17:34:25Z

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.

brian-mann · 2018-04-17T17:35:40Z

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

jennifer-shehane · 2018-04-17T17:36:33Z

My timings:

jdhines · 2018-04-17T20:23:51Z

Here's what I'm seeing on every refresh; don't know if it helps:

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 · 2018-04-18T18:45:09Z

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 · 2018-04-24T19:46:30Z

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 · 2018-04-24T19:51:18Z

@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:

not had to touch additional proxy settings at all
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 · 2018-04-24T19:57:30Z

#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 · 2018-04-24T20:09:18Z

@jdhines actually we already support the NO_PROXY env var.

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

jdhines · 2018-04-25T13:33:48Z

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

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:

jdhines · 2018-04-25T16:36:34Z

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 · 2018-06-30T03:38:35Z

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

murugaratham · 2018-07-05T09:30:17Z

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

cypress-bot · 2019-04-01T03:39:32Z

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 · 2019-05-17T18:53:16Z

Released in 3.3.0.

jdhines mentioned this issue Apr 17, 2018

Running cypress on angular2 quickstart #195

Closed

jennifer-shehane added the stage: investigating Someone from Cypress is looking into this label Apr 17, 2018

jennifer-shehane added stage: needs information Not enough info to reproduce the issue and removed stage: investigating Someone from Cypress is looking into this labels Apr 17, 2018

jennifer-shehane removed the stage: needs information Not enough info to reproduce the issue label Apr 18, 2018

jennifer-shehane added stage: proposal 💡 No work has been done of this issue type: bug labels Jan 25, 2019

flotwig mentioned this issue Feb 20, 2019

Improved proxy support #3531

Merged

38 tasks

jennifer-shehane mentioned this issue Feb 20, 2019

Support proxies and improve proxy performance #1469

Closed

10 tasks

cypress-bot bot added stage: work in progress and removed stage: proposal 💡 No work has been done of this issue labels Mar 1, 2019

This was referenced Mar 8, 2019

Many Cypress tests are hanging at the first Visit command during full runs (Electron only) #3662

Closed

Page occasionally does not load from cy.visit() #2938

Closed

brian-mann assigned flotwig Apr 1, 2019

brian-mann closed this as completed in #3531 Apr 1, 2019

cypress-bot bot added stage: pending release and removed stage: work in progress labels Apr 1, 2019

cypress-bot bot removed the stage: pending release label May 17, 2019

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

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

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

jdhines commented Apr 17, 2018 •

edited

Loading

jennifer-shehane commented Apr 17, 2018

brian-mann commented Apr 17, 2018 •

edited

Loading

jennifer-shehane commented Apr 17, 2018

jdhines commented Apr 17, 2018 •

edited

Loading

jennifer-shehane commented Apr 18, 2018

jdhines commented Apr 24, 2018 •

edited by jennifer-shehane

Loading

brian-mann commented Apr 24, 2018 •

edited

Loading

jdhines commented Apr 24, 2018

brian-mann commented Apr 24, 2018

jdhines commented Apr 25, 2018 •

edited

Loading

jdhines commented Apr 25, 2018 •

edited

Loading

edwinharly commented Jun 30, 2018

murugaratham commented Jul 5, 2018

cypress-bot bot commented Apr 1, 2019

cypress-bot bot commented May 17, 2019

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

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

Comments

jdhines commented Apr 17, 2018 • edited Loading

Current behavior:

Desired behavior:

Steps to reproduce:

Versions

jennifer-shehane commented Apr 17, 2018

brian-mann commented Apr 17, 2018 • edited Loading

jennifer-shehane commented Apr 17, 2018

jdhines commented Apr 17, 2018 • edited Loading

jennifer-shehane commented Apr 18, 2018

jdhines commented Apr 24, 2018 • edited by jennifer-shehane Loading

brian-mann commented Apr 24, 2018 • edited Loading

jdhines commented Apr 24, 2018

brian-mann commented Apr 24, 2018

jdhines commented Apr 25, 2018 • edited Loading

jdhines commented Apr 25, 2018 • edited Loading

edwinharly commented Jun 30, 2018

murugaratham commented Jul 5, 2018

cypress-bot bot commented Apr 1, 2019

cypress-bot bot commented May 17, 2019

jdhines commented Apr 17, 2018 •

edited

Loading

brian-mann commented Apr 17, 2018 •

edited

Loading

jdhines commented Apr 17, 2018 •

edited

Loading

jdhines commented Apr 24, 2018 •

edited by jennifer-shehane

Loading

brian-mann commented Apr 24, 2018 •

edited

Loading

jdhines commented Apr 25, 2018 •

edited

Loading

jdhines commented Apr 25, 2018 •

edited

Loading