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
- [Pre-requisites](#pre-requisites)
- [Introduction](#introduction)
- [About the Environment](#about-the-environment)
- [Test Variables](#test-variables)
- [Guide for writing e2e tests](#guide-for-writing-e2e-tests)
- [Tools for writing tests](#tools-for-writing-tests)
- [Creating test structure](#creating-test-structure)
- [Writing the test](#writing-the-test)
- [Debugging tests](#debugging-tests)
- [Pre-requisites](#pre-requisites)
- [Introduction](#introduction)
- [About the Environment](#about-the-environment)
- [Test Variables](#test-variables)
- [Guide for writing e2e tests](#guide-for-writing-e2e-tests)
- [Tools for writing tests](#tools-for-writing-tests)
- [Creating test structure](#creating-test-structure)
- [Writing the test](#writing-the-test)
- [Debugging tests](#debugging-tests)
## Pre-requisites
- Node.js ([Installation instructions](https://nodejs.org/en/download/))
- NVM ([Installation instructions](https://github.com/nvm-sh/nvm))
- PNPM ([Installation instructions](https://pnpm.io/installation))
- Docker and Docker Compose ([Installation instructions](https://docs.docker.com/engine/install/))
- Node.js ([Installation instructions](https://nodejs.org/en/download/))
- NVM ([Installation instructions](https://github.com/nvm-sh/nvm))
- PNPM ([Installation instructions](https://pnpm.io/installation))
- 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.
@ -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:**
- `nvm use`
- `pnpm install`
- `pnpm run build --filter=woocommerce`
- `pnpm env:test --filter=woocommerce`
- `nvm use`
- `pnpm install`
- `pnpm run build --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:
- `pnpm env:destroy --filter=woocommerce`
- `pnpm env:test --filter=woocommerce`
- `pnpm env:destroy`
- `pnpm env:test`
Other ways of running tests:
- `pnpm env:test --filter=woocommerce` (headless)
- `cd plugin/woocommerce && USE_WP_ENV=1 pnpm playwright test --config=tests/e2e-pw/playwright.config.js --headed` (headed)
- `cd plugins/woocommerce && USE_WP_ENV=1 pnpm playwright test --config=tests/e2e-pw/playwright.config.js --debug` (debug)
- `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` (usual, headless run)
- `pnpm test:e2e-pw --headed` (headed -- browser window shown)
- `pnpm test:e2e-pw --debug` (runs tests in debug mode)
- `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`
@ -54,15 +56,14 @@ To see all options, run `cd plugins/woocommerce && pnpm playwright test --help`
The default values are:
- Latest stable WordPress version
- PHP 7.4
- MariaDB
- URL: `http://localhost:8086/`
- Admin credentials: `admin/password`
- Latest stable WordPress version
- PHP 7.4
- MariaDB
- URL: `http://localhost:8086/`
- Admin credentials: `admin/password`
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.
### 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:
```json
{
"url": "http://localhost:8086/",
"users": {
"admin": {
"username": "admin",
"password": "password"
},
"customer": {
"username": "customer",
"password": "password"
}
}
{
"url": "http://localhost:8086/",
"users": {
"admin": {
"username": "admin",
"password": "password"
},
"customer": {
"username": "customer",
"password": "password"
}
}
}
```
@ -93,14 +94,14 @@ Edit [.wp-env.json](https://github.com/woocommerce/woocommerce/blob/trunk/plugin
**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
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:destroy --filter=woocommerce` when you make changes to `.wp-env.json`
- `pnpm env:down --filter=woocommerce` to stop the environment
- `pnpm env:destroy --filter=woocommerce` when you make changes to `.wp-env.json`
## 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:
- Merchant can create virtual product
- Merchant can log in
- Merchant can create virtual product
- Merchant can verify that virtual product was created
- Merchant can create virtual product
- Merchant can log in
- Merchant can create virtual product
- Merchant can verify that virtual product was created
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:
- [`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.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.
Based on our example, the test skeleton would look as follows:
```js
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 () => {} );
} );
```