Automatically Split E2E Tasks by File (Atomizer)

In almost every codebase, e2e tests are the largest portion of the CI pipeline. Typically, e2e tests are grouped by application so that whenever an application's code changes, all the e2e tests for that application are run. These large groupings of e2e tests make caching and distribution less effective. Also, because e2e tests deal with a lot of integration code, they are at a much higher risk to be flaky.

You could manually address these problems by splitting your e2e tests into smaller tasks, but this requires developer time to maintain and adds additional configuration overhead to your codebase. Or, you could allow Nx to automatically split your Cypress or Playwright e2e tests by file.

Set up

To enable automatically split e2e tasks, you need to turn on inferred tasks for the @nx/cypress, @nx/playwright, or @nx/jest plugins. Run this command to set up inferred tasks:

nx add @nx/cypress

This command will register the appropriate plugin in the plugins array of nx.json.

Manual Configuration

If you are already using the @nx/cypress, @nx/playwright, or @nx/jest plugin, you need to manually add the appropriate configuration to the plugins array of nx.json. Follow the instructions for the plugin you are using:

Usage

You can view the available tasks for your project in the project detail view:

nx show project myproject-e2e --web

Project Details View

admin-e2e

Cypress
ESLint

Root: apps/admin-e2e

Type:application

Targets

E2E (CI) 3 targets
  • e2e-ci

    Cypress

    nx:noop

    Cacheable
  • e2e-ci--src/e2e/app.cy.ts

    Cypress

    cypress run --env webServerCommand="nx run admin:serve-static" --spec src/e2e/app.cy.ts

    Cacheable
  • e2e-ci--src/e2e/login.cy.ts

    Cypress

    cypress run --env webServerCommand="nx run admin:serve-static" --spec src/e2e/login.cy.ts

    Cacheable
Others 2 targets
  • e2e

    Cypress

    cypress run

    Cacheable
  • lint

    ESLint

    @nx/eslint:lint

    Cacheable

You'll see that there are tasks named e2e, e2e-ci and a task for each e2e test file.

Developers can run all e2e tests locally with the e2e target:

nx e2e my-project-e2e

You can update your CI pipeline to run e2e-ci, which will automatically run all the inferred tasks for the individual e2e test files. Run it like this:

nx e2e-ci my-project-e2e

Benefits

With more granular e2e tasks, all the other features of Nx become more powerful. Let's imagine a scenario where there are 10 spec files in a single e2e project and each spec file takes 3 minutes to run.

Improved Caching

Nx's cache can be used for all the individual e2e tasks that succeeded and only the failed tasks need to be re-run. Without e2e task splitting, a single spec file failing would force you to re-run all the e2e tests for the project, which would take 30 minutes. With e2e task splitting, a single spec file that fails can be re-run in 3 minutes and the other successful spec file results can be retrieved from the cache.

Better Distribution

Distributed task execution allows your e2e tests to be run on multiple machines simultaneously, which reduces the total time of the CI pipeline. Without e2e task splitting, the CI pipeline has to take at least 30 minutes to complete because the one e2e task needs that long to finish. With e2e task splitting, a fully distributed pipeline with 10 agents could finish in 3 minutes.

More Precise Flaky Task Identification

Nx Agents automatically re-run failed flaky e2e tests on a separate agent without a developer needing to manually re-run the CI pipeline. Leveraging e2e task splitting, Nx identifies the specific flaky test file - this way you can quickly fix the offending test file. Without e2e splitting, Nx identifies that at least one of the e2e tests are flaky - requiring you to find the flaky test on your own.