Scripts: Default Playwright config file doesn't work

[t-hamano]

In #53108, wp-scripts now supports Playwright. However, when using the @wordpress/scripts package alone, I encountered a problem where the config file was not loaded correctly or a custom setup was required.

• run npm init
• run npm install @wordpress/scripts
• Add test command to package.json:

{
  "name": "playwright-test",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "wp-scripts test-playwright"
  },
  "author": "",
  "license": "ISC",
  "dependencies": {
    "@wordpress/scripts": "^26.14.0"
  }
}

At this point I would expect Playwright's default configuration to be referenced and the tests to be run. This is because the handbook states:

This script automatically detects the best config to start Playwright, but sometimes you may need to specify custom options.

However, when I run npm run test, I get the following error:

Error: /home/userame/projects/playwright-test/node_modules/@wordpress/scripts/config/playwright.config.ts does not exist

Therefore, create a playwright.config.ts file and explicitly set the default configuration of the @wordpress/scripts package as appropriate:

const config = require( '@wordpress/scripts/config/playwright.config.js' );
export default config;

This time, the following error occurs:

SyntaxError: Cannot use import statement outside a module

In the end, I was able to get it to work correctly by specifying my own setup file in the globalSetup property as shown below.

const config = require( '@wordpress/scripts/config/playwright.config.js' );

export default {
	...config,
	globalSetup: '/path-to-my-global-setup-file.js',
};

I think it would be better to provide a proper global setup so that the wp-scripts test-playwright command works properly even when the @wordpress/scripts package is used in a project that does not have a config file.

[gziolo]

@swissspidy, have you run into a similar issue when integrating Playwright with WordPress core?

[swissspidy]

Ah looks like we forgot to fix the file extension in one place. Easy fix.

In the end, I was able to get it to work correctly by specifying my own setup file in the globalSetup property as shown below.

@t-hamano That's the exact same file contents as before. What did you use when you got SyntaxError: Cannot use import statement outside a module?

Edit: never mind, I found it

[swissspidy]

#55453 fixes this