Skip to content

Commit eddc99c

Browse files
Update E2E docs (#2529)
* Update docs * Improvements in the docs text * Add Stripe keys to list of requirements
1 parent 8b20024 commit eddc99c

File tree

1 file changed

+51
-49
lines changed

1 file changed

+51
-49
lines changed

tests/e2e/README.md

Lines changed: 51 additions & 49 deletions
Original file line numberDiff line numberDiff line change
@@ -8,9 +8,10 @@ We use [Playwright](https://playwright.dev/) as our test runner.
88
- [Table of contents](#table-of-contents)
99
- [Running E2E Tests](#running-e2e-tests)
1010
- [Pre-requisites](#pre-requisites)
11+
- [Environment Setup](#environment-setup)
1112
- [Running tests](#running-tests)
1213
- [Debugging tests](#debugging-tests)
13-
- [Running only a few test suites](#running-only-a-few-test-suites)
14+
- [Running only selected test suites](#running-only-selected-test-suites)
1415
- [Guide for writing e2e tests](#guide-for-writing-e2e-tests)
1516
- [Creating the test structure](#creating-the-test-structure)
1617
- [Writing the test](#writing-the-test)
@@ -21,39 +22,57 @@ We use [Playwright](https://playwright.dev/) as our test runner.
2122

2223
- Node.js ([Installation instructions](https://nodejs.org/en/download/))
2324
- NVM ([Installation instructions](https://github.com/nvm-sh/nvm))
24-
- A test site with SSH access, WP CLI installed in the server, admin credentials (`wp-admin`), and WooCommerce installed. Jurassic Ninja sites are recommended.
25-
- Test mode keys for a Stripe account.
25+
- A test site to run the tests on. **Jurassic Ninja sites are recommended**.
26+
- Admin credentials (`wp-admin`) to the test site.
27+
28+
**For the automated setup (optional)**
29+
30+
- SSH access to the test site.
31+
- WP CLI available on the test site server.
32+
- Test keys for a Stripe account.
33+
34+
### Environment Setup
2635

2736
- Copy the file `/tests/e2e/config/local.env.example` to `/tests/e2e/config/local.env`.
2837
- Edit the variables on the `local.env` file.
2938

3039
### Running tests
3140

32-
**Set up**
41+
**Test Setup**
42+
43+
To set up the test environment, run the command:
3344

3445
`npm run test:e2e-setup -- --base_url=SOME_URL_HERE`
3546

36-
This command will perform the WooCommerce setup and the Stripe setup in a new Jurassic ninja site. The SSH and admin credentials are mandatory (view the parameters `--with_woo_setup` and `--with_stripe_setup` below for more info).
47+
This command will perform the following actions:
3748

38-
`npm run test:e2e -- --base_url=SOME_URL_HERE`
49+
- Connect to the test server using SSH and the credentials in the `/tests/e2e/config/local.env` file.
50+
- Install the latest version of WooCommerce from the official WordPress repository.
51+
- Install the latest version of the WooCommerce Gateway Stripe plugin from the official WordPress repository.
52+
**Note:** you can specify a different version to test by using the `--version` flag. In this case, the plugin will be downloaded from GitHub instead.
53+
- Install and activate the StoreFront theme.
54+
- Configure WooCommerce on the test site (e.g. store address, currency, shipping methods).
55+
- Import test products into WooCommerce.
56+
- Create pages for the Cart blocks and Checkout blocks from WooCommerce Blocks.
57+
- Set up the Stripe gateway using the keys from the `/tests/e2e/config/local.env` file and create a webhook endpoint on Stripe.
3958

40-
The default command to run the tests. It'll run the tests in the URL indicated by the `--base_url` parameter.
59+
**Note:** To run this command, SSH and admin credentials are required.
4160

42-
**Optional parameters**
61+
The SSH and admin credentials are mandatory (view the parameters `--with_woo_setup` and `--with_stripe_setup` below for more info).
4362

44-
`--version`
63+
**Test execution**
4564

46-
The plugin release version to be tested. By setting this parameter, the release will be downloaded from GitHub and uploaded to the website indicated on `--base_url` before testing starts.
65+
`npm run test:e2e -- --base_url=SOME_URL_HERE`
4766

48-
If no version is passed, the tests will use the version already installed on `--base_url`.
67+
The default command to run the tests. It'll run the tests in the URL indicated by the `--base_url` parameter.
4968

50-
`--with_woo_setup`
69+
**Optional Parameters**
5170

52-
Add this option in the first use of a test site. It'll get the SSH credentials from `tests/e2e/config/local.env` to setup the WooCommerce plugin with test products, a store addres, a store currency, and shipping methods. It'll also install and activate the StoreFront theme.
71+
`--version`: Allows you to specify a specific plugin version to test. This will download the specified version from GitHub and upload it to the test site before running the tests. If no version is specified, the tests will use the version currently installed on the test site.
5372

54-
`--with_stripe_setup`
73+
`--with_woo_setup`: Use this option when setting up a test site for the first time. It will use the SSH credentials from `tests/e2e/config/local.env` to set up the WooCommerce plugin with test products, store address, currency, and shipping methods, as well as installing and activating the StoreFront theme.
5574

56-
Add this option in the first use of a test site. It'll get the Stripe keys from `tests/e2e/config/local.env` to setup the plugin, create a webhook endpoint on Stripe, and setup the webhook secret in the Stripe plugin.
75+
`--with_stripe_setup`: Use this option when setting up a test site for the first time. It will use the Stripe keys from `tests/e2e/config/local.env` to set up the plugin, create a webhook endpoint on Stripe, and set up the webhook secret in the Stripe plugin.
5776

5877
**⚠️ All the other parameters are passed to the Playwright CLI**
5978

@@ -65,52 +84,35 @@ Add this option in the first use of a test site. It'll get the Stripe keys from
6584

6685
[Documentation](https://playwright.dev/docs/debug)
6786

68-
### Running only a few test suites
87+
### Running only selected test suites
6988

70-
To run only a few test suites, you can pass the test suite name or number as a parameter.
89+
**Running Tests by Annotation**
7190

72-
**Example:** This command would run the test suites `001` and `004`.
91+
Certain tests are annotated to indicate their specific focus, such as subscriptions, blocks, or smoke tests. These annotations are indicated in the test name with the `@` symbol in front of them, for example `Test XYZ @subscriptions`.
7392

74-
`npm run test:e2e -- 001 004`
93+
To only run tests with a specific annotation, use the `--grep @annotation` parameter when running the tests. For example:
7594

76-
## Guide for writing e2e tests
95+
`npm run test:e2e -- --base_url=SOME_URL_HERE --grep @subscriptions`
7796

78-
Tests should be added to the `/tests/e2e/tests` folder. Tests should be organized in folders by the tested area, e.g. `/tests/e2e/tests/onboarding`, `/tests/e2e/tests/checkout`, `/tests/e2e/tests/payment-methods`.
97+
**Running Tests by File Name**
7998

80-
To help filter the tests, they should be assigned a 3-digit ID in the file name. Example: `000-upload-plugin.spec.js`.
99+
You can also run tests by specifying the file name containing the test you want to run. Keep in mind that there may be duplicate file names, especially between tests run in the regular checkout and in the blocks checkout.
81100

82-
### Creating the test structure
101+
`npm run test:e2e -- --base_url=SOME_URL_HERE normal-card`
83102

84-
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:
103+
In the above example, the command would run the tests with a file name containing `normal-card`.
85104

86-
- Merchant can create virtual product
87-
- Merchant can log in
88-
- Merchant can create virtual product
89-
- Merchant can verify that virtual product was created
90-
91-
Once you identify the structure of the test, you can move on to writing it.
92-
93-
### Writing the test
94-
95-
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:
96-
97-
- [`test.describe()`](https://playwright.dev/docs/api/class-test#test-describe) - creates a block that groups together several related tests;
98-
- [`test()`](https://playwright.dev/docs/api/class-test#test-call) - actual method that runs the test.
99-
100-
Based on our example, the test skeleton would look as follows:
105+
## Guide for writing e2e tests
106+
### Creating the test structure
101107

102-
```js
103-
test.describe( 'Merchant can create virtual product', () => {
104-
test( 'merchant can log in', async () => {
108+
Create a new directory under `/tests/e2e/tests/` with the name of the feature or component being tested.
105109

106-
} );
110+
For example, if we're testing the checkout process, the directory would be `/tests/e2e/tests/checkout/`.
107111

108-
test( 'merchant can create virtual product', async () => {
112+
### Writing the test
109113

110-
} );
114+
Make sure to follow the established naming conventions for the test files and directories, and to keep the tests organized and easy to understand.
111115

112-
test( 'merchant can verify that virtual product was created', async () => {
116+
The test should be self-explanatory and should be easily understood by anyone who reads it.
113117

114-
} );
115-
} );
116-
```
118+
Make sure to follow best practices for writing e2e tests, such as using descriptive and meaningful test names, and keeping the tests as independent as possible to avoid flaky tests.

0 commit comments

Comments
 (0)