README update

This commit is contained in:
Jon Lane 2022-10-24 15:51:13 -07:00
parent 7daf26ce39
commit e916ac3fca
1 changed files with 54 additions and 59 deletions

View File

@ -4,22 +4,22 @@ This is the documentation for the new e2e testing setup based on Playwright and
## Table of contents ## Table of contents
- [Pre-requisites](#pre-requisites) - [Pre-requisites](#pre-requisites)
- [Introduction](#introduction) - [Introduction](#introduction)
- [About the Environment](#about-the-environment) - [About the Environment](#about-the-environment)
- [Test Variables](#test-variables) - [Test Variables](#test-variables)
- [Guide for writing e2e tests](#guide-for-writing-e2e-tests) - [Guide for writing e2e tests](#guide-for-writing-e2e-tests)
- [Tools for writing tests](#tools-for-writing-tests) - [Tools for writing tests](#tools-for-writing-tests)
- [Creating test structure](#creating-test-structure) - [Creating test structure](#creating-test-structure)
- [Writing the test](#writing-the-test) - [Writing the test](#writing-the-test)
- [Debugging tests](#debugging-tests) - [Debugging tests](#debugging-tests)
## Pre-requisites ## Pre-requisites
- Node.js ([Installation instructions](https://nodejs.org/en/download/)) - Node.js ([Installation instructions](https://nodejs.org/en/download/))
- NVM ([Installation instructions](https://github.com/nvm-sh/nvm)) - NVM ([Installation instructions](https://github.com/nvm-sh/nvm))
- PNPM ([Installation instructions](https://pnpm.io/installation)) - PNPM ([Installation instructions](https://pnpm.io/installation))
- Docker and Docker Compose ([Installation instructions](https://docs.docker.com/engine/install/)) - Docker and Docker Compose ([Installation instructions](https://docs.docker.com/engine/install/))
Note, that if you are on Mac and you install docker through other methods such as homebrew, for example, your steps to set it up might be different. The commands listed in steps below may also vary. Note, that if you are on Mac and you install docker through other methods such as homebrew, for example, your steps to set it up might be different. The commands listed in steps below may also vary.
@ -31,22 +31,24 @@ End-to-end tests are powered by Playwright. The test site is spinned up using `w
**Running tests for the first time:** **Running tests for the first time:**
- `nvm use` - `nvm use`
- `pnpm install` - `pnpm install`
- `pnpm run build --filter=woocommerce` - `pnpm run build --filter=woocommerce`
- `pnpm env:test --filter=woocommerce` - `cd plugins/woocommerce`
- `pnpm env:test`
- `pnpm test:e2e-pw`
To run the test again, re-create the environment to start with a fresh state: To run the test again, re-create the environment to start with a fresh state:
- `pnpm env:destroy --filter=woocommerce` - `pnpm env:destroy`
- `pnpm env:test --filter=woocommerce` - `pnpm env:test`
Other ways of running tests: Other ways of running tests:
- `pnpm env:test --filter=woocommerce` (headless) - `pnpm test:e2e-pw` (usual, headless run)
- `cd plugin/woocommerce && USE_WP_ENV=1 pnpm playwright test --config=tests/e2e-pw/playwright.config.js --headed` (headed) - `pnpm test:e2e-pw --headed` (headed -- browser window shown)
- `cd plugins/woocommerce && USE_WP_ENV=1 pnpm playwright test --config=tests/e2e-pw/playwright.config.js --debug` (debug) - `pnpm test:e2e-pw --debug` (runs tests in debug mode)
- `cd plugins/woocommerce && USE_WP_ENV=1 pnpm playwright test --config=tests/e2e-pw/playwright.config.js ./tests/e2e-pw/tests/activate-and-setup/basic-setup.spec.js` (running a single test) - `pnpm test:e2e-pw ./tests/e2e-pw/tests/activate-and-setup/basic-setup.spec.js` (runs a single test)
To see all options, run `cd plugins/woocommerce && pnpm playwright test --help` To see all options, run `cd plugins/woocommerce && pnpm playwright test --help`
@ -54,15 +56,14 @@ To see all options, run `cd plugins/woocommerce && pnpm playwright test --help`
The default values are: The default values are:
- Latest stable WordPress version - Latest stable WordPress version
- PHP 7.4 - PHP 7.4
- MariaDB - MariaDB
- URL: `http://localhost:8086/` - URL: `http://localhost:8086/`
- Admin credentials: `admin/password` - Admin credentials: `admin/password`
If you want to customize these, check the [Test Variables](#test-variables) section. If you want to customize these, check the [Test Variables](#test-variables) section.
For more information how to configure the test environment for `wp-env`, please checkout the [documentation](https://github.com/WordPress/gutenberg/tree/trunk/packages/env) documentation. For more information how to configure the test environment for `wp-env`, please checkout the [documentation](https://github.com/WordPress/gutenberg/tree/trunk/packages/env) documentation.
### Test Variables ### Test Variables
@ -70,18 +71,18 @@ For more information how to configure the test environment for `wp-env`, please
The test environment uses the following test variables: The test environment uses the following test variables:
```json ```json
{ {
"url": "http://localhost:8086/", "url": "http://localhost:8086/",
"users": { "users": {
"admin": { "admin": {
"username": "admin", "username": "admin",
"password": "password" "password": "password"
}, },
"customer": { "customer": {
"username": "customer", "username": "customer",
"password": "password" "password": "password"
} }
} }
} }
``` ```
@ -93,14 +94,14 @@ Edit [.wp-env.json](https://github.com/woocommerce/woocommerce/blob/trunk/plugin
**Modiify port for e2e-environment** **Modiify port for e2e-environment**
Edit [tests/e2e/config/default.json](https://github.com/woocommerce/woocommerce/blob/trunk/plugins/woocommerce/tests/e2e/config/default.json).**** Edit [tests/e2e/config/default.json](https://github.com/woocommerce/woocommerce/blob/trunk/plugins/woocommerce/tests/e2e/config/default.json).\*\*\*\*
### Starting/stopping the environment ### Starting/stopping the environment
After you run a test, it's best to restart the environment to start from a fresh state. We are currently working to reset the state more efficiently to avoid the restart being needed, but this is a work-in-progress. After you run a test, it's best to restart the environment to start from a fresh state. We are currently working to reset the state more efficiently to avoid the restart being needed, but this is a work-in-progress.
- `pnpm env:down --filter=woocommerce` to stop the environment - `pnpm env:down --filter=woocommerce` to stop the environment
- `pnpm env:destroy --filter=woocommerce` when you make changes to `.wp-env.json` - `pnpm env:destroy --filter=woocommerce` when you make changes to `.wp-env.json`
## Guide for writing e2e tests ## Guide for writing e2e tests
@ -108,10 +109,10 @@ After you run a test, it's best to restart the environment to start from a fresh
It is a good practice to start working on the test by identifying what needs to be tested on the higher and lower levels. For example, if you are writing a test to verify that merchant can create a virtual product, the overview of the test will be as follows: It is a good practice to start working on the test by identifying what needs to be tested on the higher and lower levels. For example, if you are writing a test to verify that merchant can create a virtual product, the overview of the test will be as follows:
- Merchant can create virtual product - Merchant can create virtual product
- Merchant can log in - Merchant can log in
- Merchant can create virtual product - Merchant can create virtual product
- Merchant can verify that virtual product was created - Merchant can verify that virtual product was created
Once you identify the structure of the test, you can move on to writing it. Once you identify the structure of the test, you can move on to writing it.
@ -119,24 +120,18 @@ Once you identify the structure of the test, you can move on to writing it.
The structure of the test serves as a skeleton for the test itself. You can turn it into a test by using `describe()` and `it()` methods of Playwright: The structure of the test serves as a skeleton for the test itself. You can turn it into a test by using `describe()` and `it()` methods of Playwright:
- [`test.describe()`](https://playwright.dev/docs/api/class-test#test-describe) - creates a block that groups together several related tests; - [`test.describe()`](https://playwright.dev/docs/api/class-test#test-describe) - creates a block that groups together several related tests;
- [`test()`](https://playwright.dev/docs/api/class-test#test-call) - actual method that runs the test. - [`test()`](https://playwright.dev/docs/api/class-test#test-call) - actual method that runs the test.
Based on our example, the test skeleton would look as follows: Based on our example, the test skeleton would look as follows:
```js ```js
test.describe( 'Merchant can create virtual product', () => { test.describe( 'Merchant can create virtual product', () => {
test( 'merchant can log in', async () => { test( 'merchant can log in', async () => {} );
} ); test( 'merchant can create virtual product', async () => {} );
test( 'merchant can create virtual product', async () => { test( 'merchant can verify that virtual product was created', async () => {} );
} );
test( 'merchant can verify that virtual product was created', async () => {
} );
} ); } );
``` ```