Updated Puppeteer to Playwright Migration Guide (markdown)

Jonathan Lane 2023-01-06 13:13:37 -08:00
parent e641670e22
commit 5b605f049e
1 changed files with 21 additions and 2 deletions

@ -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