84f2de633d
* Initial approach to fix incorrect product data displayed in Product Collection in context of Single Product block * Remove the BlockCOntextProvider * Add Block context for title and summary * Add changelog * Improve typing * Add E2E test with Product Collection inside Single Product block * Improve insertBLock function description * Make productPrices selector in Product Collectionmore specific * Extract components props into a types |
||
|---|---|---|
| .. | ||
| bin | ||
| mocks/custom-plugins | ||
| playwright-utils | ||
| test-data/data | ||
| tests | ||
| types | ||
| utils | ||
| wc-blocks-eslint-rules | ||
| .eslintrc.js | ||
| README.md | ||
| block-theme-with-templates.setup.ts | ||
| block-theme.setup.ts | ||
| classic-theme.setup.ts | ||
| global-setup.ts | ||
| global-teardown.ts | ||
| playwright.block-theme-with-templates.config.ts | ||
| playwright.classic-theme.config.ts | ||
| playwright.config.ts | ||
| playwright.side-effects.config.ts | ||
| tsconfig.json | ||
README.md
WooCommerce Blocks Playwright End to End Tests
This is the documentation for the new E2E testing setup based on Playwright and wp-env. Over time, these playwright E2E tests should replace the current Puppeteer E2E tests.
Table of contents
Pre-requisites
- Node.js (Installation instructions)
- NVM (Installation instructions)
- Docker and Docker Compose (Installation instructions)
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.
If you are using Windows, we recommend using Windows Subsystem for Linux (WSL) for running E2E tests. Follow the WSL Setup Instructions first before proceeding with the steps below.
Introduction
End-to-end tests are powered by Playwright. The test site is spun up using wp-env (recommended), but we will continue to support e2e-environment in the meantime.
Running tests for the first time
In the root directory, run:
nvm use
pnpm install
Now change directory to plugins/woocommerce-blocks/:
cd plugins/woocommerce-blocks/
pnpm run env:start
pnpm run test:e2e
To run the test again, re-create the environment to start with a fresh state
pnpm run env:restart
pnpm run test:e2e
Tests with side effects
We call tests that affect other tests (ones that modify the site settings, using custom plugins) are tests with side effects and we split those tests to a separate test suite:
pnpm run test:e2e:side-effects
Note: All command parameters of test:e2e can be used for
test:e2e:side-effects.
Tests with a classic theme and a block theme with custom templates
By default, e2e tests run in a non-customized block theme. However, we also have some e2e tests which run specifically in a classic theme and in a block theme with custom templates. They can be run like this:
pnpm run test:e2e:classic-theme
pnpm run test:e2e:block-theme-with-templates
_Note: All command parameters of test:e2e can be used for these commands too.
Other ways of running tests
Headless mode:
pnpm run test:e2e
Interactive UI mode:
pnpm run test:e2e --ui
Headed mode:
pnpm run test:e2e --headed
Debug mode:
pnpm run test:e2e --debug
Running a single test:
pnpm run test:e2e ./tests/e2e/tests/example.spec.ts
To see all options, run the following command:
npx playwright test --help