Updated Puppeteer to Playwright Migration Guide (markdown)
parent
e641670e22
commit
5b605f049e
|
@ -33,7 +33,13 @@ $ pnpm dlx create-playwright
|
|||
|
||||
This creates a few files and folders automatically for you. `package.json` and `package-lock.json` are self-explanatory, and depending on your setup you may want to keep these or just make sure that you add `@playwright/test` as a dependency to your existing `package.json`.
|
||||
|
||||
[playwright.config.js](https://github.com/woocommerce/woocommerce/blob/trunk/plugins/woocommerce/tests/e2e-pw/playwright.config.js) (or `playwright.config.ts` if you picked TypeScript) is the key configuration file for your test suite. We'll go over a few of the options:
|
||||
[playwright.config.js](https://github.com/woocommerce/woocommerce/blob/trunk/plugins/woocommerce/tests/e2e-pw/playwright.config.js) (or `playwright.config.ts` if you picked TypeScript) is the key configuration file for your test suite. You can actually create any number of configurations and select which configuration to use at runtime:
|
||||
|
||||
```bash
|
||||
$ pnpx playwright test --config=tests/e2e-pw/playwright.config.js
|
||||
```
|
||||
|
||||
Here are a few of the key options specified in the configuration:
|
||||
|
||||
- [globalSetup](https://github.com/woocommerce/woocommerce/blob/4c236bdc37a8a8be81efe988f48a240041a86379/plugins/woocommerce/tests/e2e-pw/playwright.config.js#L17) is (as the name suggests) a file that runs before the test suite executes. There's more details about the contents of this file below.
|
||||
- [globalTeardown](https://github.com/woocommerce/woocommerce/blob/4c236bdc37a8a8be81efe988f48a240041a86379/plugins/woocommerce/tests/e2e-pw/playwright.config.js#L18) similar to above, but this executes after all tests run.
|
||||
|
@ -42,5 +48,18 @@ This creates a few files and folders automatically for you. `package.json` and `
|
|||
- [stateDir](https://github.com/woocommerce/woocommerce/blob/4c236bdc37a8a8be81efe988f48a240041a86379/plugins/woocommerce/tests/e2e-pw/playwright.config.js#L49) used to save the authentication "states" for use during your tests. [One of the unique features of Playwright](https://playwright.dev/docs/auth) is that you can sign in as a registered user (in `global-setup`) and save that signed in state for re-use in all your tests.
|
||||
- [projects](https://github.com/woocommerce/woocommerce/blob/4c236bdc37a8a8be81efe988f48a240041a86379/plugins/woocommerce/tests/e2e-pw/playwright.config.js#L54) is where you can configure which browser(s)/configuration(s) you want to test against. Playwright supports Chrome, Safari and Firefox right out of the gates.
|
||||
|
||||
[global-setup.js](https://github.com/woocommerce/woocommerce/blob/trunk/plugins/woocommerce/tests/e2e-pw/global-setup.js) (or .ts) is where you can run a number of things before executing your tests. If you need to populate the database, or "reset" a test site, this is a pretty good place to do it. `global-setup` is also a great place to sign in with any/all accounts you'll use during your test runs and save the authenticated state (so that you aren't wasting time signing in before individual tests).
|
||||
[global-setup.js](https://github.com/woocommerce/woocommerce/blob/trunk/plugins/woocommerce/tests/e2e-pw/global-setup.js) (or .ts) is where you can run a number of things before executing your tests. If you need to populate the database, or "reset" a test site, this is a pretty good place to do it. `global-setup` is also a great place to sign in with any/all accounts you'll use during your test runs and save the authenticated state (so that you aren't wasting time signing in before individual tests). In the core tests, we also [add a REST API token](https://github.com/woocommerce/woocommerce/blob/1ab678c13fed5df393805f0000a8fd0db991772a/plugins/woocommerce/tests/e2e-pw/global-setup.js#L91) so that we can make use of the API for any setup/cleanup tasks throughout execution.
|
||||
|
||||
[global-teardown.js](https://github.com/woocommerce/woocommerce/blob/trunk/plugins/woocommerce/tests/e2e-pw/global-teardown.js) (or .ts) is where you can run a number of things after all of your tests have executed. It's always a good idea to try to leave the test site in the same shape as when you started, so we [remove the API key](https://github.com/woocommerce/woocommerce/blob/1ab678c13fed5df393805f0000a8fd0db991772a/plugins/woocommerce/tests/e2e-pw/global-teardown.js#L18) that we created during setup.
|
||||
|
||||
### Writing tests
|
||||
|
||||
Playwright has a similar structure/organization to Puppeteer, with a few differences in syntax. [The README](https://github.com/woocommerce/woocommerce/tree/trunk/plugins/woocommerce/tests/e2e-pw#guide-for-writing-e2e-tests) gives an overview of test organization/structure. Additionally, the [Playwright documentation](https://playwright.dev/docs/api/class-playwright) has an exhaustive reference of all the actions and assertions available in Playwright.
|
||||
|
||||
### Re-usability
|
||||
|
||||
The current implementation of Playwright is evolving as further tests are implemented and existing tests are refactored. Part of the refactoring effort is to increase the re-usability of code.
|
||||
|
||||
[test-data/data.js](https://github.com/woocommerce/woocommerce/blob/trunk/plugins/woocommerce/tests/e2e-pw/test-data/data.js) is the start of centralizing test data. Structures exist within for customer and store information that can be used across tests.
|
||||
|
||||
[utils/](https://github.com/woocommerce/woocommerce/tree/trunk/plugins/woocommerce/tests/e2e-pw/utils) is a collection of helpers for re-use throughout the tests
|
Loading…
Reference in New Issue