8154191eb1
* 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>
92 lines
2.8 KiB
Markdown
92 lines
2.8 KiB
Markdown
|
|
|
|
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](/cypress/cypress-component-testing)
|
|
|
|
If the `@nrwl/cypress` package is not installed, install the version that matches your `nx` package version.
|
|
|
|
```bash
|
|
yarn add --dev @nrwl/cypress
|
|
```
|
|
|
|
```bash
|
|
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.
|
|
|
|
```bash
|
|
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
|
|
|
|
```bash
|
|
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`.
|
|
|
|
```bash
|
|
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
|
|
|
|
```bash
|
|
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.
|
|
|
|
```bash
|
|
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.
|
|
|
|
```bash
|
|
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](https://docs.cypress.io/guides/references/configuration.html#Options).
|