nx/cypress-plugin.md at 8154191eb1042b15ef2e477f6901b119009b07a9

feat(testing): Cypress 10 and component testing support (#9201 )

* feat(testing): add generator to aid in the migration to cypress 10

cypress 10 introduces a new configuration format and new layout that requires update settings and
files for e2e projects

* feat(testing): cypress component tests for react/next

initial work for cypress component tests for react and next

* feat(testing): add support for v10 e2e cypress projects

create the correct files for cypress projects >v10 and reorganize tests based on version to allow
easier parsing of tests

* feat(testing): add utils for modifying cypress v10 config

provide ts transformers to take in an existing cypress config and update/add properties within the
given configuration

* fix(testing): fix tests affected by the cypress v10 changes

update tests to assert the correct files/folders/file contents due to the cypress changes in v10

* cleanup(testing): move cypress component testing plugins into the respective packages

move the plugins into out of cypress plugins into the specific vertical plugin to prevent issues
with circular refs

* cleanup(testing): bump cypress version

bump to latest cypress v10 release

* docs(testing): update docs for cypress 10

update cypress docs to include info about component testing and migration to cypress v10

* fix(repo): revert cypress version bump

keep v9 of cypress installed for nx repo until v10 release

* fix(testing): update cypress gen tsconfig and infer targets with converter

* fix(testing): make sure tests use the cypress v10 (for the intermediate)

* fix(testing): update target name after feedback

* fix(testing): support multiple target w/custom configs for cypress v10 migration

* fix(testing): refactor cy component tests into seperate verticals

* feat(testing): create storybook cypress preset

* fix(testing): clean up cy v10 migration

* fix(testing): don't branch for cypress executor testingType

* fix(testing): move cy comp test generator to next

* fix(testing): bump cypress deps

* fix(testing): clean up cy component testing generators

* fix(testing): update cy component testing docs

* fix(testign): dep check. runtime plugin pulls from @nrwl/react

* fix(testing): move e2e into verticals

* fix(testing): address PR feedback

* fix(testing): clean up unit tests

* feat(angular): support migrating angular cli workspaces using cypress v10

* chore(testing): update e2e tests

* fix(testing): address pr feedback

* chore(testing): remove cypress component testing for next.js

* fix(testing): address pr feedback

Co-authored-by: Leosvel Pérez Espinosa <leosvel.perez.espinosa@gmail.com>

2022-07-08 14:34:00 -05:00

2.8 KiB

Raw Blame History

Cypress is a test runner built for the modern web. It has a lot of great features:

Time travel
Real-time reloads
Automatic waiting
Spies, stubs, and clocks
Network traffic control
Screenshots and videos

Setting Up Cypress

Info about Cypress Component Testing can be found here

If the @nrwl/cypress package is not installed, install the version that matches your nx package version.

yarn add --dev @nrwl/cypress

npm install --save-dev @nrwl/cypress

E2E Testing

By default, when creating a new frontend application, Nx will use Cypress to create the e2e tests project.

nx g @nrwl/web:app frontend

Creating a Cypress E2E project for an existing project

To generate an E2E project based on an existing project, run the following generator

nx g @nrwl/cypress:cypress-project your-app-name-e2e --project=your-app-name

Optionally, you can use the --baseUrl option if you don't want cypress plugin to serve your-app-name.

nx g @nrwl/cypress:cypress-project your-app-name-e2e --baseUrl=http://localhost:4200

Replace your-app-name with the app's name as defined in your workspace.json file.

Testing Applications

Run nx e2e frontend-e2e to execute e2e tests with Cypress.

You can run your e2e test against a production build with the --prod flag

nx e2e frontend-e2e --prod

By default, Cypress will run in headless mode. You will have the result of all the tests and errors (if any) in your terminal. Screenshots and videos will be accessible in dist/apps/frontend/screenshots and dist/apps/frontend/videos.

Watching for Changes (Headed Mode)

With, nx e2e frontend-e2e --watch Cypress will start in headed mode where you can see your application being tested.

Running Cypress with --watch is a great way to enhance dev workflow - you can build up test files with the application running and Cypress will re-run those tests as you enhance and add to the suite.

nx e2e frontend-e2e --prod

Specifying a Custom Url to Test

The baseUrl property provides you the ability to test an application hosted on a specific domain.

nx e2e frontend-e2e --baseUrl=https://frontend.com

If no baseUrl and no devServerTarget are provided, Cypress will expect to have the baseUrl property in the cypress config file, or will error.

Using cypress.config.ts

If you need to fine tune your Cypress setup, you can do so by modifying cypress.config.ts in the project root. For instance, you can easily add your projectId to save all the screenshots and videos into your Cypress dashboard. The complete configuration is documented on the official website.

2.8 KiB Raw Blame History