Playwright setup

[sudip-md]

Closes #497

What?

I have tried to set up Playwright for E2E testing with the help of the official Playwright document.

Playwright official document - https://playwright.dev/docs/intro#installing-playwright

#497

Testing Instructions

• I have set up Playwright
• Added one test cases for 2FA Authenticator App

Screenshots or screencast

Changelog Entry

Added - New feature.
Changed - Existing functionality.
Deprecated - Soon-to-be removed feature.
Removed - Feature.
Fixed - Bug fix.
Security - Vulnerability.

[kasparsd]

This is great @sudip-md! Thanks for working on this. Left some initial feedback inline.

It might be worth looking into all the e2e playwright helpers that WordPress provides as part of the Gutenberg project.

Eventually, it would be good to run these also as part of the CI pipeline.

[kasparsd]

There is a @wordpress/e2e-test-utils-playwright that includes all kinds of helpers for login and admin navigation. Might be useful to save on boilerplate code we need to write.

[kasparsd]

I wonder if we should locate these in a subdirectory of tests to isolate them from phpunit? Ideally, the phpunit tests would also move into a subdirectory which we can do as a follow-up task.

[kasparsd]

There is a great blog post by @t-hamano with plenty of examples on how to use the @wordpress/... helper libraries for this.

[t-hamano]

Thanks for the ping! I'm not familiar with this project, but here are the tasks you will likely need to perform to implement Playwright in this project.

• You don't need to define everything in a config file, @wordpress/scripts has some defaults internally that you can extend. Example:

  const config = require( '@wordpress/scripts/config/playwright.config.js' );
  export default {
  	...config,
  	testDir: './test/e2e',
  };

• It would be a good idea to add npm scripts to make it easy for project members to run the tests, which will also be used in the CI pipeline in the future. Example:

  {
  	"scripts": {
  		"test:e2e": "wp-scripts test-playwright",
  		"test:e2e:debug": "wp-scripts test-playwright --debug"
  	}
  }

• There are some handy reusable utilities out there, for example, logging in and visiting a specific dashboard should be as simple as await admin.visitAdminPage( 'options.php' );
• The Guteberg project has some best practices for E2E testing, for example it's a good idea to use accessible selectors.