node.jsplaywrightnx-workspace

Playwright test with NX


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.

enter image description here

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}`,
  );

Solution

  • 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