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

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

About this issue

  • Original URL
  • State: closed
  • Created 6 years ago
  • Comments: 15 (8 by maintainers)

Most upvoted comments

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.

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.

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