Early last year, a plan was outlined to phase out all Puppeteer usage across WordPress core Core is the set of software required to run WordPress. The Core Development Team builds WordPress. and Gutenberg The Gutenberg project is the new Editor Interface for WordPress. The editor improves the process and experience of creating new content, making writing rich content much simpler. It uses ‘blocks’ to add richness rather than shortcodes, custom HTML etc. https://wordpress.org/gutenberg/ step by step. Since then, a lot of progress has been made:
- The
@wordpress/e2e-test-utils-playwright package has become more mature and already provides many useful utilities that cover the needs for core and Gutenberg.
- The
@wordpress/scripts package, which is widely used in the ecosystem, now not only supports Puppeteer but also Playwright, making it straightforward for projects to migrate their existing setups.
- The majority of e2e tests in Gutenberg have already been migrated from Puppeteer to Playwright, as can be seen in this tracking issue. This includes all performance tests.
Now, another major milestone has been reached: all browser-based tests in WordPress core now use Playwright! This includes end-to-end (e2e) tests, performance tests, and visual regression A software bug that breaks or degrades something that previously worked. Regressions are often treated as critical bugs or blockers. Recent regressions may be given higher priorities. A "3.6 regression" would be a bug in 3.6 that worked as intended in 3.5. tests. See #59517 for full details.
How does this affect contributors?
As mentioned in the original proposal, Playwright makes it easier to write stable tests. Thanks to a built-in test runner with superior debugging tools, auto-waiting, and advanced selectors support, Playwright offers the tools necessary to write tests that are easy to understand and cause less headaches because of random timeouts or similar. It also supports many browsers out of the box, which will help strengthen the end-to-end test coverage in core.
Since Playwright is originally a forked version of Puppeteer, it offers a very similar API An API or Application Programming Interface is a software intermediary that allows programs to interact with each other and share data in limited, clearly defined ways., so contributors writing and debugging tests should be familiar with the way things work.
If you want to get familiar with Playwright, check out Gutenberg’s migration guide as well as the official Playwright documentation. The migration Moving the code, database and media files for a website site from one server to another. Most typically done when changing hosting companies. guide can be used to migrate Puppeteer-based tests from unmerged patches/PRs to the new setup.
End-to-end tests are still run using npm run test:e2e, with npm run test:e2e -- --ui running them in an interactive mode for easier debugging.
Playwright support was just added recently, so you might need to run npm install first to ensure the latest dependencies are installed.
Note: If you previously ran visual regression tests using npm run test:visual, the storage location for visual snapshots was changed from tests/visual-regression/specs/image_snapshots to tests/visual-regression/specs/snapshots. You can safely remove the files from the old folder if they show up in version control A version control system keeps track of the source code and revisions to the source code. WordPress uses Subversion (SVN) for version control, with Git mirrors for most repositories..
Props to @mamaduka for reviewing this post.
#e2e-tests, #gutenberg, #playwright, #puppeteer
