Improve test automation docs (#1838)

* improve docs with link to client setup and change cypress.env.json instead of editing cypress.json file

* fix link to client setup

* improve ordering

* rearrange

* fix quotes

* remove unlinkable link

* fake push
This commit is contained in:
Piyush Mishra 2020-11-23 13:58:26 +05:30 committed by GitHub
parent 294348e1f9
commit 5efcb47486
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 48 additions and 59 deletions

View File

@ -30,6 +30,7 @@ yarn-error.log*
.storybook-out/
cypress/videos
cypress/screenshots
/cypress.env.json
results/
/docker/*.pem

View File

@ -1,66 +1,54 @@
# How can I contribute to the Cypress Test Suite?
1. Follow the initial document to set up [Appsmith locally](https://docs.appsmith.com). The docs are backed by the [appsmith-docs](https://github.com/appsmithorg/appsmith-docs) repository.
2. Once we have the setup in place, all dependencies will be available locally for test execution.
3. Change your directory to `appsmith/app/client`.
4. Cypress tests are located within, cypress folder.
5. All the test spec must be within the integration folder only i.e `appsmith/app/client/cypress/integration`
6. You can create folders within the cypress folder but make sure you place the spec within the integrations folder.
7. Cypress tests can be executed in 2 modes: run mode and open mode.
If you are willing to execute tests in headless mode through command line follow [run mode](https://docs.cypress.io/guides/guides/command-line.html#How-to-run-commands) else you can use cypress client to run in [open mode](https://docs.cypress.io/guides/guides/launching-browsers.html#Browsers)
8. Command to open cypress client `./node_modules/.bin/cypress open`
9. Cypress client looks something like this and you will have all the e2e specs within [Smoke_TestSuite](https://docs.cypress.io/guides/getting-started/writing-your-first-test.html#Step-1-Visit-a-page)
10. Folder name suggests the specific area the test belongs to.
11. Before we get started with writing our new tests, please make sure you set up your cypress.json file properly.
Below are the config options used by our framework, enter the URL you are running your tests, also within the env
Config add your registered username and password.
```bash
{
"baseUrl": “Enter URL under test”,
"defaultCommandTimeout": 20000,
"requestTimeout": 21000,
"pageLoadTimeout": 20000,
"video": false,
"reporter": "mochawesome",
"reporterOptions": {
"reportDir": "results",
"overwrite": false,
"html": true,
"json": false
},
"env": {
"USERNAME": “Enter username”,
"PASSWORD": “Enter password”,
},
"viewportHeight": 900,
"viewportWidth": 1400
}
```
12. Once the cypress.json file is ready, we can actually run tests from the cypress client.
13. Cypress supports Chrome/Firefox/electron browsers. Select a suitable browser and check the status of your tests.
1. Follow the setup document to set up [Appsmith locally](contributions/ClientSetup.md) and go through [the docs](https://docs.appsmith.com). The docs are backed by the [appsmith-docs](https://github.com/appsmithorg/appsmith-docs) repository.
1. Once we have the setup in place, all dependencies will be available locally for test execution.
1. Cypress tests are located in the `app/client/cypress` directory.
1. All the test spec _must_ be in the integration directory only i.e `app/client/cypress/integration`
1. You can create directories under `app/client/cypress` but make sure you place the spec within the `app/client/cypress/integration` directory.
1. Directory name under `app/client/cypress/integration` suggests the specific area the test belongs to. Example: All our [Smoke tests](<https://en.wikipedia.org/wiki/Smoke_testing_(software)>) are in `app/client/cypress/integration/Smoke_TestSuite`
1. For default settings, check the `app/client/cypress.json` file.
1. You can create a local file `app/client/cypress.env.json` to populate `USERNAME` and `PASSWORD` env variables or use one of the methods [from their docs](https://docs.cypress.io/guides/guides/environment-variables.html#Setting).
```json
{
"USERNAME": "Enter username",
"PASSWORD": "Enter password"
}
```
1. Once the `app/client/cypress.env.json` file is ready, we can actually run tests from the cypress client.
1. Change your directory to `app/client`.
1. Cypress tests can be executed in 2 modes: run mode and open mode.
If you are willing to execute tests in headless mode through command line follow [run mode](https://docs.cypress.io/guides/guides/command-line.html#How-to-run-commands) else you can use cypress client to run in [open mode](https://docs.cypress.io/guides/guides/launching-browsers.html#Browsers)
1. Command to open cypress client `$(npm bin)/cypress open` Cypress supports Chrome/Firefox/electron browsers. Select a suitable browser and check the status of your tests.
1. For run mode, you can use CLI args. Example: To run the entire `Smoke_TestSuite`, use `$(npm bin)/cypress run --headless --browser chrome --spec "cypress/integration/Smoke_TestSuite/*/*"`
1. If you need help with writing the tests, their syntax or flow, cypress [getting started docs](https://docs.cypress.io/guides/getting-started/writing-your-first-test.html) is a great starting point.
## How do I add environment variables required for Cypress tests?
**Note:** This can only be done by the project maintainers. Please contact one of them if you require this step to be accomplished.
1. Go to [https://github.com/appsmithorg/appsmith/settings/secrets/actions](https://github.com/appsmithorg/appsmith/settings/secrets/actions).
2. Click on "New Repository Secret"
3. Add the secret key & value here. These values will be masked in the CI output logs incase they are printed out.
4. Save the value.
5. In the file `.github/workflows/client.yml`, find the steps named: "Setting up the cypress tests" & "Run the cypress test". These steps are responsible for setting up & executing the Cypress tests.
6. Add the env variable there in the form:
```
YOUR_SECRET_KEY: ${{ secrets.APPSMITH_YOUR_SECRET_KEY }}
```
7. Commit & push the file `.github/workflows/client.yml` to the default branch (`release`). Please remember that the changes to the build file will not take effect unless they are committed against the default branch.
1. Click on "New Repository Secret"
1. Add the secret key & value here. These values will be masked in the CI output logs incase they are printed out.
1. Save the value.
1. In the file `.github/workflows/client.yml`, find the steps named: "Setting up the cypress tests" & "Run the cypress test". These steps are responsible for setting up & executing the Cypress tests.
1. Add the env variable there in the form:
```
YOUR_SECRET_KEY: ${{ secrets.APPSMITH_YOUR_SECRET_KEY }}
```
1. Commit & push the file `.github/workflows/client.yml` to the default branch (`release`). Please remember that the changes to the build file will not take effect unless they are committed against the default branch.