Title: Migrating WordPress E2E tests to Playwright Author: Justin Ahinon Published: March 23, 2022 --- [ ](https://profiles.wordpress.org/justinahinon/) [Justin Ahinon](https://profiles.wordpress.org/justinahinon/) 11:52 am _on_ March 23, 2022 Tags: [e2e tests ( 3 )](https://make.wordpress.org/core/tag/e2e-tests/), [gutenberg ( 554 )](https://make.wordpress.org/core/tag/gutenberg/), [playwright ( 2 )](https://make.wordpress.org/core/tag/playwright/), [puppeteer ( 2 )](https://make.wordpress.org/core/tag/puppeteer/)    # Migrating󠀁[ WordPress E2E tests to Playwright](https://make.wordpress.org/core/?p=94139)󠁿 ## Context The idea of using Playwright as an alternative to Puppeteer was initially mentioned in early 2020 during a JavaScriptJavaScript JavaScript or JS is an object-oriented computer programming language commonly used to create interactive effects within web browsers. WordPress makes extensive use of JS for a better user experience. While PHP is executed on the server, JS executes within a user’s browser. [https://www.javascript.com](https://www.javascript.com/) chat ([meeting recap](https://make.wordpress.org/core/2020/02/04/javascript-chat-summary-january-28-2020/)). At that time, the project was still in its early stages, and it was decided to postpone the decision until Playwright was more mature. A few months ago, [@bartkalisz](https://profiles.wordpress.org/bartkalisz/) proposed a [proof of concept](https://github.com/WordPress/gutenberg/pull/34089) to migrate the GutenbergGutenberg 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/](https://wordpress.org/gutenberg/) E2E test suite from [Puppeteer](https://pptr.dev/) to [Playwright](https://playwright.dev/). This proposal was discussed several times in the above PR, during an [editor chat](https://make.wordpress.org/core/2021/09/02/editor-chat-summary-1-september-2021/), and during test team meetings. WordPress test team members, Gutenberg team members, and Playwright engineers met to discuss in detail how this migrationMigration Moving the code, database and media files for a website site from one server to another. Most typically done when changing hosting companies. could be done and what the possible blockers might be. You can find the minutes of that meeting [here](https://make.wordpress.org/test/2022/01/21/meeting-notes-discussion-about-playwright-migration/). The infrastructure for writing Playwright tests in Gutenberg has been implemented by [@kevin940726](https://profiles.wordpress.org/kevin940726/) [here](https://github.com/WordPress/gutenberg/pull/38570). The purpose of this post is to present a migration plan to Playwright; as well as the implications this might have. ## Areas in WordPress that will be affected by the migration * [@wordpress/e2e-test-utils](https://github.com/WordPress/gutenberg/tree/trunk/packages/e2e-test-utils): It is a utility package with basic tests that are reused by other E2E test packages and suites in Gutenberg, in WordPress CoreCore Core is the set of software required to run WordPress. The Core Development Team builds WordPress. and by third parties. This package is now deprecated and a new package `[@wordpress/e2e-test-utils-playwright](https://github.com/WordPress/gutenberg/tree/trunk/packages/e2e-test-utils-playwright)` was introduced internally for the migration process. * [`@wordpress/e2e-tests`](https://github.com/WordPress/gutenberg/tree/trunk/packages/e2e-tests): This is the E2E test suite from Gutenberg. It contains tests for different parts of WordPress and Gutenberg. The package has also been deprecated, and new E2E tests exist now in the [`test/e2e` folder](https://github.com/WordPress/gutenberg/tree/trunk/test/e2e). * [WordPress Core E2E tests](https://github.com/WordPress/wordpress-develop/tree/trunk/tests/e2e): This is the E2E test suite for WordPress Core. To date, it contains only a very small number of tests. It uses the `@wordpress/e2e-tests-utils` package, and will need to be migrated to use Playwright. ## Migration plan Here is the roadmap we will follow to perform the migration 1. **Add Playwright test infrastructure to Gutenberg** ([done](https://github.com/WordPress/gutenberg/pull/38570)) 2. **Gradually migrate Gutenberg E2E tests to Playwright**: 3. * Migrate tests from `packages/e2e-tests` to `test/e2e` one file at a time. See overview issue [here](https://github.com/WordPress/gutenberg/issues/38851). * Migrate test utils from `packages/e2e-test-utils` to `packages/e2e-test-utils- playwright` as required. 4. **Add Playwright test infrastructure to Core and migrate Core E2E tests to Playwright**: once the [`e2e-test-utils`](https://github.com/WordPress/gutenberg/tree/trunk/packages/e2e-test-utils) used in Core are migrated, we can migrate the current suite of tests in Core to Playwright.  5. **Remove old packages**: remove `@wordpress/e2e-tests`, rename `@wordpress/e2e- test-utils-playwright` to `@wordpress/e2e-test-utils`. ## Writing new tests during the migration For now, developers may continue to write new E2E tests using Puppeteer. Once a significant amount of E2E tests have been migrated to Playwright, we can discuss enforcing that new E2E tests are written using Playwright. Waiting will ensure that enough test utils exist and that there are no problems with the new Playwright infrastructure. See [this issue](https://github.com/WordPress/gutenberg/issues/38851) for migration progress. ## How to help Helping migrate tests to Playwright is one way you can help right now. Playwright’s syntax is similar to Puppeteer’s, so it won’t be totally unfamiliar. Here is some useful link to get you started: * [Playwright documentation](https://playwright.dev/docs/intro) * [Gutenberg E2E test documentation](https://github.com/WordPress/gutenberg/blob/trunk/test/e2e/README.md) * [Migration guide](https://github.com/WordPress/gutenberg/blob/trunk/test/e2e/MIGRATION.md) --- _Props to [@kevin940726](https://profiles.wordpress.org/kevin940726/) [@noisysocks](https://profiles.wordpress.org/noisysocks/) for helping put this post together, and [@aristath](https://profiles.wordpress.org/aristath/) and [@sergeybiryukov](https://profiles.wordpress.org/sergeybiryukov/) for reviews._ [#e2e-tests](https://make.wordpress.org/core/tag/e2e-tests/), [#gutenberg](https://make.wordpress.org/core/tag/gutenberg/), [#playwright](https://make.wordpress.org/core/tag/playwright/), [#puppeteer](https://make.wordpress.org/core/tag/puppeteer/) ### Share this: * [ Threads ](https://make.wordpress.org/core/2022/03/23/migrating-wordpress-e2e-tests-to-playwright/?share=threads) * [ Mastodon ](https://make.wordpress.org/core/2022/03/23/migrating-wordpress-e2e-tests-to-playwright/?share=mastodon) * [ Bluesky ](https://make.wordpress.org/core/2022/03/23/migrating-wordpress-e2e-tests-to-playwright/?share=bluesky) * [ X ](https://make.wordpress.org/core/2022/03/23/migrating-wordpress-e2e-tests-to-playwright/?share=x) * [ Facebook ](https://make.wordpress.org/core/2022/03/23/migrating-wordpress-e2e-tests-to-playwright/?share=facebook) * [ LinkedIn ](https://make.wordpress.org/core/2022/03/23/migrating-wordpress-e2e-tests-to-playwright/?share=linkedin) 1. ![](https://secure.gravatar.com/avatar/52525485c604c4ed417a11636a0884d89395675d139245024cb71ac3ebe88dcc? s=32&d=mm&r=g) 2. [Justin Ahinon](https://profiles.wordpress.org/justinahinon/) 11:56 am _on_ March 23, 2022 3. +make.wordpress.org/test/ 4. ![](https://secure.gravatar.com/avatar/db79d5416d942e5fd9415b136feefd2da7929cc39853b4c30bafff4ceb8ef219? s=32&d=mm&r=g) 5. [Daniele Scasciafratte](https://profiles.wordpress.org/mte90/) 12:05 pm _on_ March 23, 2022 6. If you are looking where is explained why this migrationMigration Moving the code, database and media files for a website site from one server to another. Most typically done when changing hosting companies. to another technology is needed (is explained in the proof of concept): [https://github.com/WordPress/gutenberg/pull/34089](https://github.com/WordPress/gutenberg/pull/34089) Comments are closed. # Post navigation [← Dev Chat Agenda – March 23, 2022](https://make.wordpress.org/core/2022/03/22/dev-chat-march-23-2022/) [Dev Chat Summary: March 23, 2022 →](https://make.wordpress.org/core/2022/03/23/dev-chat-summary-march-23-2022/)