CI: Cypress E2E on Storybook library parallel runs - could not verify that this server is running

Current Behavior

I have a Bamboo CI build that triggers on a repository. The build, among other things, runs a Cypress e2e app to test a ui library that is set up for Storybook. When there are multiple builds running at the same time, Storybook runs (as expected) on a different port other than the 4400 port specified in angular.json. NX configures the Cypress e2e app with the baseUrl: http://localhost:4400, which will then be used when running cy.visit().

Since Storybook is using one port and Cypress is listening on a different one the build fails.

Expected Behavior

If Storybook runs on a different url/port, it should be possible for Cypress to pick the url/port Storybook is running and use it as the baseUrl.

Steps to Reproduce

1. Configure Storybook on a library with Cypress e2e
2. In the cypress.json file for the e2e app that tests the storybook lib, change the baseUrl port to any other port other than 4400 (this is just to simulate storybook running on a different port than the one Cypress is expecting)
3. run the e2e tests (npm run e2e)
4. Cypress will fail

Failure Logs

11:21:17 info
11:21:17 => Loading presets
11:21:18 info
11:21:18 => Loading presets
11:21:19 info
11:21:19 => Loading custom manager config.
11:21:20 info 11:21:20 => Loading config/preview file in “libs/ui-components/.storybook”. 11:21:20 info 11:21:21 => Found custom tsconfig.json 11:21:21 info 11:21:21 => Loading custom Webpack config (full-control mode). 11:21:21 info 11:21:21 => Using angular project ‘frontend’ for configuring Storybook. 11:21:21 info 11:21:21 => Loading angular-cli config. 11:21:21 info 11:21:21 => Get angular-cli webpack config. 11:21:21 Starting type checking service… 11:21:21 Using 1 worker with 2048MB memory limit 11:22:39 webpack built c66dd533baf3eed2b5e9 in 79529ms 11:22:40 ??? 11:22:40 ? ? 11:22:40 ? Storybook 5.3.9 started ? 11:22:40 ? 58 s for manager and 1.37 min for preview ? 11:22:40 ? ? 11:22:40 ? Local: http://localhost:4401/ ? 11:22:40 ? On your network: http://10.1.8.8:4401/ ? 11:22:40 ? ? 11:22:40 ??? 11:22:41 11:22:57 Cypress could not verify that this server is running: 11:22:57 11:22:57 > http://localhost:4400 11:22:57 11:22:57 We are verifying this server because it has been configured as your baseUrl. 11:22:57 11:22:57 Cypress automatically waits until your server is accessible before running tests. 11:22:57 11:22:57 We will try connecting to it 3 more times… 11:23:01 We will try connecting to it 2 more times… 11:23:05 We will try connecting to it 1 more time… 11:23:05 11:23:10 Cypress failed to verify that your server is running. 11:23:10 11:23:10 Please start this server and then run Cypress again.

Environment

npx nx report

NX Report complete - copy this into the issue template

nx : Not Found @nrwl/angular : 10.3.1 @nrwl/cli : 10.3.1 @nrwl/cypress : 10.3.1 @nrwl/eslint-plugin-nx : Not Found @nrwl/express : Not Found @nrwl/jest : 10.3.1 @nrwl/linter : 10.3.1 @nrwl/nest : Not Found @nrwl/next : Not Found @nrwl/node : Not Found @nrwl/react : Not Found @nrwl/schematics : Not Found @nrwl/tao : 10.3.1 @nrwl/web : Not Found @nrwl/workspace : 10.

[juristr]

@tc4rdpp hey, thx for reporting this. Indeed this doesn’t work atm. The best workaround is to manually configure the baseUrls for Storybook and the according Cypress e2e test to avoid clashes.

If Storybook runs on a different url/port, it should be possible for Cypress to pick the url/port Storybook is running and use it as the baseUrl.

Absolutely. I actually have a local version hacked together that makes it work. However that requires changes to the Storybook builder which is out of our control. I’ll submit a PR to them to make the adjustment. In the meantime, I’m going to change this from “bug” to “feature”.

[mandarini]

Let’s keep this open. It’s still an issue/feature-request