From 480cb63120e58df62d542f5a85c553485ed6b8ea Mon Sep 17 00:00:00 2001 From: Isaac Mann Date: Tue, 18 Jan 2022 11:31:16 -0500 Subject: [PATCH] docs(core): update cypress overview (#8568) Co-authored-by: Isaac Mann --- docs/shared/cypress-plugin.md | 44 +++++++------------ .../documentation/shared/cypress-plugin.md | 44 +++++++------------ 2 files changed, 30 insertions(+), 58 deletions(-) diff --git a/docs/shared/cypress-plugin.md b/docs/shared/cypress-plugin.md index d078703d8428e..2532830446226 100644 --- a/docs/shared/cypress-plugin.md +++ b/docs/shared/cypress-plugin.md @@ -11,7 +11,7 @@ Cypress is an e2e test runner built for modern web. It has a lot of great featur - Network traffic control - Screenshots and videos -## How to Use Cypress +## Setting Up Cypress ### Generating Applications @@ -21,34 +21,6 @@ By default, when creating a new frontend application, Nx will use Cypress to cre nx g @nrwl/web:app frontend ``` -```treeview -/ -├── apps/ -│ ├── frontend/ -│ └── frontend-e2e/ -│ ├── src/ -│ │ ├── fixtures/ -│ │ │ └── example.json -│ │ ├── integration/ -│ │ │ └── app.spec.ts -│ │ ├── plugins/ -│ │ │ └── index.ts -│ │ └── support/ -│ │ ├── app.po.ts -│ │ ├── commands.ts -│ │ └── index.ts -│ ├── cypress.json -│ ├── tsconfig.e2e.json -│ └── tsconfig.json -├── libs/ -├── tools/ -├── nx.json -├── package.json -├── README.md -├── workspace.json -└── tsconfig.base.json -``` - ### Creating a Cypress E2E project for an existing project You can create a new Cypress E2E project for an existing project. @@ -73,6 +45,8 @@ nx g @nrwl/cypress:cypress-project your-app-name-e2e --project=your-app-name Replace `your-app-name` with the app's name as defined in your `workspace.json` file. +## Using Cypress + ### Testing Applications Simply run `nx e2e frontend-e2e` to execute e2e tests with Cypress. @@ -114,3 +88,15 @@ nx e2e frontend-e2e --baseUrl=https://frontend.com ### Using cypress.json If you need to fine tune your Cypress setup, you can do so by modifying `cypress.json` in the e2e project. 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). + +## More Documentation + +React Nx Tutorial + +- [Step 2: Add E2E Tests](/react-tutorial/02-add-e2e-test) +- [Step 3: Display Todso](/react-tutorial/03-display-todos) + +Angular Nx Tutorial + +- [Step 2: Add E2E Tests](/angular-tutorial/02-add-e2e-test) +- [Step 3: Display Todso](/angular-tutorial/03-display-todos) diff --git a/nx-dev/nx-dev/public/documentation/shared/cypress-plugin.md b/nx-dev/nx-dev/public/documentation/shared/cypress-plugin.md index d078703d8428e..2532830446226 100644 --- a/nx-dev/nx-dev/public/documentation/shared/cypress-plugin.md +++ b/nx-dev/nx-dev/public/documentation/shared/cypress-plugin.md @@ -11,7 +11,7 @@ Cypress is an e2e test runner built for modern web. It has a lot of great featur - Network traffic control - Screenshots and videos -## How to Use Cypress +## Setting Up Cypress ### Generating Applications @@ -21,34 +21,6 @@ By default, when creating a new frontend application, Nx will use Cypress to cre nx g @nrwl/web:app frontend ``` -```treeview -/ -├── apps/ -│ ├── frontend/ -│ └── frontend-e2e/ -│ ├── src/ -│ │ ├── fixtures/ -│ │ │ └── example.json -│ │ ├── integration/ -│ │ │ └── app.spec.ts -│ │ ├── plugins/ -│ │ │ └── index.ts -│ │ └── support/ -│ │ ├── app.po.ts -│ │ ├── commands.ts -│ │ └── index.ts -│ ├── cypress.json -│ ├── tsconfig.e2e.json -│ └── tsconfig.json -├── libs/ -├── tools/ -├── nx.json -├── package.json -├── README.md -├── workspace.json -└── tsconfig.base.json -``` - ### Creating a Cypress E2E project for an existing project You can create a new Cypress E2E project for an existing project. @@ -73,6 +45,8 @@ nx g @nrwl/cypress:cypress-project your-app-name-e2e --project=your-app-name Replace `your-app-name` with the app's name as defined in your `workspace.json` file. +## Using Cypress + ### Testing Applications Simply run `nx e2e frontend-e2e` to execute e2e tests with Cypress. @@ -114,3 +88,15 @@ nx e2e frontend-e2e --baseUrl=https://frontend.com ### Using cypress.json If you need to fine tune your Cypress setup, you can do so by modifying `cypress.json` in the e2e project. 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). + +## More Documentation + +React Nx Tutorial + +- [Step 2: Add E2E Tests](/react-tutorial/02-add-e2e-test) +- [Step 3: Display Todso](/react-tutorial/03-display-todos) + +Angular Nx Tutorial + +- [Step 2: Add E2E Tests](/angular-tutorial/02-add-e2e-test) +- [Step 3: Display Todso](/angular-tutorial/03-display-todos)