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

[tc4rdpp]

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".

[github-actions]

This issue has been automatically marked as stale because it hasn't had any recent activity. It will be closed in 14 days if no further activity occurs.
If we missed this issue please reply to keep it active.
Thanks for being a part of the Nx community! 🙏

[youngha-sung]

@juristr Any update on this yet?

[mandarini]

Hi there @youngha-sung ! Thanks for asking! This feature is not in our roadmap, at the moment, unfortunately :(. We are, however, accepting contributions from the community. If you think that this could be a useful feature, let me know if you would like to give this a shot, and I can help explain the Nx contributing process! :)

[github-actions]

This issue has been automatically marked as stale because it hasn't had any recent activity. It will be closed in 14 days if no further activity occurs.
If we missed this issue please reply to keep it active.
Thanks for being a part of the Nx community! 🙏

[mandarini]

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

[mandarini]

Once this is merged, then we will be able to solve this issue. It will work for Storybook v7 and later versions.

[mandarini]

Storybook 7 exposes the port, so this will now be added in Nx. Users using Storybook 7 will be able to take advantage of this feature.

Storybook 7 is still in beta, but will get be released as stable in March.

[mandarini]

Once this is merged, you can use this feature if you upgrade to Storybook 7.

[github-actions]

This issue has been closed for more than 30 days. If this issue is still occuring, please open a new issue with more recent context.