Playwright test with NX - node.js

Question

I have an NX workspace with a single application called my-app. I would like to run Playwright tests for my-app application by using NX console. Currently NX doesn't support Playwright plugin, so I've created a custom NX executor according to this tutorial. I've created necessary files for executor. After, I registered custom e2e command in application's project.json file. The playwright configuration file stays in the my-app folder.
When I run nx run my-app:e2e, the executor is been executed, however for some reason, playwright doesn't start. Instead, I see an error.
When I run manually in the console the command triggered by nx run my-app:e2e which is npx playwright test --config=apps/my-app/playwright.config.ts the playwright starts and does necessary testing.
project.json
...
...
...
"e2e": {
"executor": "./tools/executors/playwright:playwright",
"options": {
"path": "apps/my-app/playwright.config.ts"
}
}
executor.json
{
"executors": {
"playwright": {
"implementation": "./impl",
"schema": "./schema.json",
"description": "Runs Playwright Test "
}
}
}
impl.ts
export default async function echoExecutor(
options: PlaywrightExecutorOptions,
context: ExecutorContext
) {
console.info(`Executing "Playwright"...`);
console.info(`Options: ${JSON.stringify(options, null, 2)}`);
const { stdout, stderr } = await promisify(exec)(
`npx playwright test --config=${options.path}`,
);
console.log(stdout);
console.error(stderr);
const success = !stderr;
return { success };
}
schema.json
{
"$schema": "http://json-schema.org/schema",
"type": "object",
"cli": "nx",
"properties": {
"path": {
"type": "string",
"description": "Path to the project"
}
}
}
package.json
{
"executors": "./executor.json"
}
I'm not sure but maybe the problem is in promisify? I'm trying to call npx with it. Maybe there is a different way to call npx in this context?
const { stdout, stderr } = await promisify(exec)(
`npx playwright test --config=${options.path}`,
);

Answer 1

I will recommend https://github.com/marksandspencer/nx-plugins/tree/main/packages/nx-playwright
You will need to install the plugin using
yarn add --dev #mands/nx-playwright
yarn playwright install --with-deps
Remove existing e2e app nx generate remove <APP-NAME>-e2e before generating a new one
Generate new e2e app
yarn nx generate #mands/nx-playwright:project <APP-NAME>-e2e --project <APP-NAME>
PS: I am also author of the plugin

Answer 2

I would suggest to use https://github.com/marksandspencer/nx-plugins/tree/main/packages/nx-playwright
It should work out of the box

Answer 3

Try to use pnpm nx ...
Firstly, in package.json define:
"scripts": {
"test": "playwright test --output build --workers 2",
"test:debug": "playwright test --output build --debug",
"test:headed": "playwright test --output build --headed",
"test:codegen": "playwright codegen https://xxx.xxx.com/ -o records.test.ts",
"test:codegen-json": "playwright codegen https://xxx.xxx.com/ --save-storage=storage/auth_1.json",
"test:api": "playwright test src/e2e-api/ --retries 0 --output build "
}
Then, in common line:
pnpm nx test e2e-tests --skip-nx-cache
or
pnpm nx test:debug e2e-tests --skip-nx-cache
or
pnpm nx test:headed e2e-tests --skip-nx-cache
e2e-tests is a e2e destination folder where the package.json is located
--skip-nx-cache - to skip nx cache output
This command line you can use in any place, for example in gitlab-ci.yaml