Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

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

See original GitHub issue

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

Issue Analytics

State:
Created 5 years ago
Comments:15 (6 by maintainers)

Top GitHub Comments

19reactions

jdhinescommented, 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.

3reactions

jdhinescommented, 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.