Playwright test with NX

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