Storybook: different port for each module

[dsebastien]

Prerequisites

Please answer the following questions for yourself before submitting an issue.
YOU MAY DELETE THE PREREQUISITES SECTION.

• I am running the latest version
• I checked the documentation (nx.dev) and found no answer
• I checked to make sure that this issue has not already been filed
• I'm reporting the issue to the correct repository (not related to React, Angular or any dependency)

Expected Behavior

It would be nice to be able to run Cypress e2e tests in parallel against different libraries configured with Storybook.

Current Behavior

What is the current behavior?

Errors about ports already being used when executing npm run affected:e2e -- --headless --base=remotes/origin/master --head=HEAD --parallel

My current workaround is to manually change the port for each project through angular.json and cypress.json so that there are no port conflicts

Apparently, the issue also happens without running in parallel.

Steps to Reproduce

Please provide detailed steps for reproducing the issue.

1. Create a workspace with multiple libraries
2. Configure Storybook for each lib
3. Execute the above command

[aivascu]

This fails for me even when not running in parallel.
I have a project with multiple libs all of which are configured by default to run on port 4400.
When I run

> npm run e2e

The next storybook instance picks the next available port e.g 4401 but it still waits for the iframe to popup on 4400 which is busy with another storybook instance.
I tried explicitly specifying the port on the e2e project config inside angular.json, but on launch it errors saying I can't specify the port there.

[dsebastien]

Indeed, you're right; I assumed it was caused by the --parallel option

[dsebastien]

@FrozenPandaz it feels like a bug to me; am I wrong?

[samvloeberghs]

We are experiencing a similar issue, probably the same.

Reproduction can be found here:

https://github.com/elisa-dc/test-storybook

Steps to reproduce:

git clone git@github.com:elisa-dc/test-storybook.git
cd test-storybook
npm i
npx nx e2e --headless

credits to @elisa-dc

[aivascu]

@dsebastien @samvloeberghs I was able to find a workaround to run all the e2e tests sequentially using the run-many task:

> nx run-many --target=e2e --all

It looks like this turns off storybook between test runs, which allows the tests to pass. Unfortunately this does not work with the --parallel attribute.
@samvloeberghs I was able to run all e2e tests on your reproduction repo using this command.

[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! 🙏

[averath]

I have the same problem since 11.2.0 version of @nrwl/cypress

[juristr]

@averath have a look at #3953. I have an idea how storybook Cypress runs could be parallelized, but that requires some changes on the storybook lib as well.

Subscribe to that issue there to get updates on the progress

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