Add Playwright infrastructure for E2E tests #2733
Conversation
WalkthroughWalkthroughA new end-to-end testing workflow using Playwright has been introduced for a WordPress application, along with updates to existing configuration files. The workflow includes changes to the Changes
Thank you for using CodeRabbit. We offer it for free to the OSS community and would appreciate your support in helping us grow. If you find it useful, would you consider giving us a shout-out on your favorite social media? TipsChatThere are 3 ways to chat with CodeRabbit:
Note: Be mindful of the bot's finite context window. It's strongly recommended to break down tasks such as reading entire modules into smaller chunks. For a focused discussion, use review comments to chat about specific files and their changes, instead of using the PR comments. CodeRabbit Commands (invoked as PR comments)
Additionally, you can add Documentation and Community
|
|
The GitHub workflow worked immediately, but the migrated test was failing due to an oversight. Also, Jest was trying to run the Playwright test, which didn't work well 😄 All these are now fixed, so opening the PR for review. |
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 0
Review details
Configuration used: .coderabbit.yaml
Review profile: CHILL
Files ignored due to path filters (1)
package-lock.jsonis excluded by!**/package-lock.json
Files selected for processing (5)
- .github/workflows/e2e-tests-playwright.yml (1 hunks)
- jest-e2e.config.js (1 hunks)
- package.json (3 hunks)
- test/e2e/playwright.config.ts (1 hunks)
- test/e2e/specs/plugin-action-link.spec.ts (1 hunks)
Additional context used
Path-based instructions (3)
jest-e2e.config.js (1)
Pattern
**/*.{js,ts,tsx,jsx}: "Perform a detailed review of the provided code with following key aspects in mind:
- Review the code to ensure it is well-structured and adheres to best practices.
- Verify compliance with WordPress coding standards.
- Ensure the code is well-documented.
- Check for security vulnerabilities and confirm the code is secure.
- Optimize the code for performance, removing any unnecessary elements.
- Validate JSDoc comments for accuracy, currency, and adherence to WordPress coding standards.
- Ensure each line comment concludes with a period.
- Confirm every JSDoc comment includes a @SInCE tag indicating the next version of the plugin to include the code.
- Guarantee compatibility with the latest version of WordPress, avoiding deprecated functions or features."
test/e2e/playwright.config.ts (1)
Pattern
**/*.{js,ts,tsx,jsx}: "Perform a detailed review of the provided code with following key aspects in mind:
- Review the code to ensure it is well-structured and adheres to best practices.
- Verify compliance with WordPress coding standards.
- Ensure the code is well-documented.
- Check for security vulnerabilities and confirm the code is secure.
- Optimize the code for performance, removing any unnecessary elements.
- Validate JSDoc comments for accuracy, currency, and adherence to WordPress coding standards.
- Ensure each line comment concludes with a period.
- Confirm every JSDoc comment includes a @SInCE tag indicating the next version of the plugin to include the code.
- Guarantee compatibility with the latest version of WordPress, avoiding deprecated functions or features."
test/e2e/specs/plugin-action-link.spec.ts (1)
Pattern
**/*.{js,ts,tsx,jsx}: "Perform a detailed review of the provided code with following key aspects in mind:
- Review the code to ensure it is well-structured and adheres to best practices.
- Verify compliance with WordPress coding standards.
- Ensure the code is well-documented.
- Check for security vulnerabilities and confirm the code is secure.
- Optimize the code for performance, removing any unnecessary elements.
- Validate JSDoc comments for accuracy, currency, and adherence to WordPress coding standards.
- Ensure each line comment concludes with a period.
- Confirm every JSDoc comment includes a @SInCE tag indicating the next version of the plugin to include the code.
- Guarantee compatibility with the latest version of WordPress, avoiding deprecated functions or features."
Additional comments not posted (8)
jest-e2e.config.js (1)
6-7: LGTM!The addition of the
testMatchproperty and the increase intestTimeoutare appropriate and align with the PR objectives.The code changes are approved.
test/e2e/playwright.config.ts (1)
1-16: LGTM!The Playwright configuration is correctly set up and extends the base configuration from WordPress scripts.
The code changes are approved.
test/e2e/specs/plugin-action-link.spec.ts (1)
1-15: LGTM!The Playwright test for the plugin action link is well-structured and follows best practices.
The code changes are approved.
.github/workflows/e2e-tests-playwright.yml (3)
1-8: LGTM!The workflow name and trigger events are correctly defined.
The code changes are approved.
10-16: LGTM!The concurrency settings are correctly defined to avoid redundant runs.
The code changes are approved.
17-62: LGTM!The job definition and environment setup are comprehensive and correctly defined.
The code changes are approved.
package.json (2)
Line range hint
46-67: LGTM!The new dependencies
@playwright/testand@wordpress/e2e-test-utils-playwrightare correctly added for Playwright E2E testing.The code changes are approved.
106-108: LGTM!The new scripts
test:e2e:playwrightandtest:e2e:playwright:debugare correctly added for running and debugging Playwright E2E tests.The code changes are approved.
There was a problem hiding this comment.
Actionable comments posted: 0
Review details
Configuration used: .coderabbit.yaml
Review profile: CHILL
Files selected for processing (1)
- .github/workflows/e2e-tests.yml (3 hunks)
Additional comments not posted (6)
.github/workflows/e2e-tests.yml (6)
1-1: Workflow name update.The workflow name has been simplified for clarity. This change is appropriate.
19-20: Update to Ubuntu 24.04.The workflow now runs on
ubuntu-24.04instead ofubuntu-20.04. Ensure that all dependencies and tools are compatible with this version.Verify compatibility of all dependencies and tools with
ubuntu-24.04.
32-33: Update to Node.js 18.The Node.js version has been updated from 16 to 18. Ensure that all Node.js dependencies are compatible with this version.
Verify compatibility of all Node.js dependencies with version 18.
39-41: Install Playwright dependencies.A new step to install Playwright dependencies has been added. This is necessary for running Playwright tests.
47-49: Rename step for running E2E tests.The step name has been changed to "Running E2E tests" for clarity. This change is appropriate.
52-56: Add step for running Playwright E2E tests.A new step to run Playwright E2E tests has been added. Ensure that the Playwright tests are correctly configured and run as expected.
Verify that the Playwright tests are correctly configured and run as expected.
|
In the latest update, I've merged the two E2E workflow files into one, which should save some time. I've also updated the tooling (e.g. we now use React 18 instead of 16, and Ubuntu 24 instead of 20). After the changes, the tests continue to pass fine. |
Description
Per #1927, we're migrating our E2E tests to Playwright. This PR introduces the basis for this work, by adding the essentials to operate with Playwright. It adds:
To run our tests with Playwright, we're introducing these 2 new commands:
npm run test:e2e:playwright: Runs Playwright E2E tests.npm run test:e2e:playwright:debug: Runs Playwright E2E tests in debug mode.The original E2E test commands have been left untouched, so we can run the existing tests along the new Playwright ones. The commands will be updated and finalized once all the ests have been migrated.
Motivation and context
Begin the work on #1927.
How has this been tested?
Summary by CodeRabbit
New Features
Improvements