feat(testing): add lint target for playwright (#18233)

e2e/playwright/src/playwright.test.ts

@@ -15,31 +15,37 @@ describe('Playwright E2E Test runner', () => {
   afterAll(() => cleanupProject());
 
   it(
-    'should test example app',
+    'should test and lint example app',
     () => {
       runCLI(`g @nx/js:lib demo-e2e --unitTestRunner none --bundler none`);
       runCLI(`g @nx/playwright:configuration --project demo-e2e`);
       ensurePlaywrightBrowsersInstallation();
 
-      const results = runCLI(`e2e demo-e2e`);
-      expect(results).toContain('6 passed');
-      expect(results).toContain('Successfully ran target e2e for project');
+      const e2eResults = runCLI(`e2e demo-e2e`);
+      expect(e2eResults).toContain('6 passed');
+      expect(e2eResults).toContain('Successfully ran target e2e for project');
+
+      const lintResults = runCLI(`lint demo-e2e`);
+      expect(lintResults).toContain('All files pass linting');
     },
     TEN_MINS_MS
   );
 
   it(
-    'should test example app with js',
+    'should test and lint example app with js',
     () => {
       runCLI(
         `g @nx/js:lib demo-js-e2e --unitTestRunner none --bundler none --js`
       );
       runCLI(`g @nx/playwright:configuration --project demo-js-e2e --js`);
       ensurePlaywrightBrowsersInstallation();
 
-      const results = runCLI(`e2e demo-js-e2e`);
-      expect(results).toContain('6 passed');
-      expect(results).toContain('Successfully ran target e2e for project');
+      const e2eResults = runCLI(`e2e demo-js-e2e`);
+      expect(e2eResults).toContain('6 passed');
+      expect(e2eResults).toContain('Successfully ran target e2e for project');
+
+      const lintResults = runCLI(`lint demo-e2e`);
+      expect(lintResults).toContain('All files pass linting');
     },
     TEN_MINS_MS
   );

e2e/utils/get-env-info.ts

@@ -118,7 +118,9 @@ export function ensurePlaywrightBrowsersInstallation() {
     cwd: tmpProjPath(),
   });
   e2eConsoleLogger(
-    `Playwright browsers ${execSync('npx playwright --version')} installed.`
+    `Playwright browsers ${execSync('npx playwright --version')
+      .toString()
+      .trim()} installed.`
   );
 }
 

packages/playwright/package.json

@@ -30,6 +30,7 @@
   },
   "dependencies": {
     "@nx/devkit": "file:../devkit",
+    "@nx/linter": "file:../linter",
     "tslib": "^2.3.0"
   },
   "peerDependencies": {

packages/playwright/src/generators/configuration/configuration.ts

@@ -2,9 +2,11 @@ import {
   convertNxGenerator,
   formatFiles,
   generateFiles,
+  GeneratorCallback,
   offsetFromRoot,
   readNxJson,
   readProjectConfiguration,
+  runTasksInSerial,
   toJS,
   Tree,
   updateNxJson,
@@ -13,11 +15,19 @@ import {
 import * as path from 'path';
 import { ConfigurationGeneratorSchema } from './schema';
 import initGenerator from '../init/init';
+import { addLinterToPlaywrightProject } from '../../utils/add-linter';
 
 export async function configurationGenerator(
   tree: Tree,
   options: ConfigurationGeneratorSchema
 ) {
+  const tasks: GeneratorCallback[] = [];
+  tasks.push(
+    await initGenerator(tree, {
+      skipFormat: true,
+      skipPackageJson: options.skipPackageJson,
+    })
+  );
   const projectConfig = readProjectConfiguration(tree, options.project);
   generateFiles(tree, path.join(__dirname, 'files'), projectConfig.root, {
     offsetFromRoot: offsetFromRoot(projectConfig.root),
@@ -29,6 +39,17 @@ export async function configurationGenerator(
 
   addE2eTarget(tree, options);
   setupE2ETargetDefaults(tree);
+  tasks.push(
+    await addLinterToPlaywrightProject(tree, {
+      project: options.project,
+      linter: options.linter,
+      skipPackageJson: options.skipPackageJson,
+      js: options.js,
+      directory: options.directory,
+      setParserOptionsProject: options.setParserOptionsProject,
+      rootProject: projectConfig.root === '.',
+    })
+  );
 
   if (options.js) {
     toJS(tree);
@@ -37,10 +58,7 @@ export async function configurationGenerator(
     await formatFiles(tree);
   }
 
-  return initGenerator(tree, {
-    skipFormat: true,
-    skipPackageJson: options.skipPackageJson,
-  });
+  return runTasksInSerial(...tasks);
 }
 
 function setupE2ETargetDefaults(tree: Tree) {

packages/playwright/src/generators/configuration/files/playwright.config.ts.template

@@ -1,5 +1,6 @@
 import { defineConfig } from '@playwright/test';
 import { nxE2EPreset } from '@nx/playwright/preset';
+<% if(!webServerCommand || !webServerAddress) { %>// eslint-disable-next-line @typescript-eslint/no-unused-vars <% } %>
 import { workspaceRoot } from '@nx/devkit';
 
 /**

packages/playwright/src/generators/configuration/schema.d.ts

@@ -1,9 +1,13 @@
+import type { Linter } from '@nx/linter';
+
 export interface ConfigurationGeneratorSchema {
   project: string;
   directory: string;
   js: boolean; // default is false
   skipFormat: boolean;
   skipPackageJson: boolean;
+  linter: Linter;
+  setParserOptionsProject: boolean; // default is false
   /**
    * command to give playwright to run the web server
    * @example: "npx nx serve my-fe-app"

packages/playwright/src/generators/configuration/schema.json

@@ -33,6 +33,17 @@
       "type": "string",
       "description": "The address of the web server."
     },
+    "linter": {
+      "description": "The tool to use for running lint checks.",
+      "type": "string",
+      "enum": ["eslint", "none"],
+      "default": "eslint"
+    },
+    "setParserOptionsProject": {
+      "type": "boolean",
+      "description": "Whether or not to configure the ESLint `parserOptions.project` option. We do not do this by default for lint performance reasons.",
+      "default": false
+    },
     "skipFormat": {
       "description": "Skip formatting files.",
       "type": "boolean",

packages/playwright/src/utils/add-linter.ts

@@ -0,0 +1,103 @@
+import {
+  addDependenciesToPackageJson,
+  GeneratorCallback,
+  joinPathFragments,
+  readProjectConfiguration,
+  runTasksInSerial,
+  Tree,
+  updateJson,
+} from '@nx/devkit';
+import { Linter, lintProjectGenerator } from '@nx/linter';
+import { globalJavaScriptOverrides } from '@nx/linter/src/generators/init/global-eslint-config';
+import { eslintPluginPlaywrightVersion } from './versions';
+
+export interface PlaywrightLinterOptions {
+  project: string;
+  linter: Linter;
+  setParserOptionsProject: boolean;
+  skipPackageJson: boolean;
+  rootProject: boolean;
+  js?: boolean;
+  /**
+   * Directory from the project root, where the playwright files will be located.
+   **/
+  directory: string;
+}
+
+export async function addLinterToPlaywrightProject(
+  tree: Tree,
+  options: PlaywrightLinterOptions
+): Promise<GeneratorCallback> {
+  if (options.linter === Linter.None) {
+    return () => {};
+  }
+
+  const tasks: GeneratorCallback[] = [];
+  const projectConfig = readProjectConfiguration(tree, options.project);
+
+  if (!tree.exists(joinPathFragments(projectConfig.root, '.eslintrc.json'))) {
+    tasks.push(
+      await lintProjectGenerator(tree, {
+        project: options.project,
+        linter: options.linter,
+        skipFormat: true,
+        tsConfigPaths: [joinPathFragments(projectConfig.root, 'tsconfig.json')],
+        eslintFilePatterns: [
+          `${projectConfig.root}/**/*.${options.js ? 'js' : '{js,ts}'}`,
+        ],
+        setParserOptionsProject: options.setParserOptionsProject,
+        skipPackageJson: options.skipPackageJson,
+        rootProject: options.rootProject,
+      })
+    );
+  }
+
+  if (!options.linter || options.linter !== Linter.EsLint) {
+    return runTasksInSerial(...tasks);
+  }
+
+  tasks.push(
+    !options.skipPackageJson
+      ? addDependenciesToPackageJson(
+          tree,
+          {},
+          { 'eslint-plugin-playwright': eslintPluginPlaywrightVersion }
+        )
+      : () => {}
+  );
+
+  updateJson(
+    tree,
+    joinPathFragments(projectConfig.root, '.eslintrc.json'),
+    (json) => {
+      if (options.rootProject) {
+        json.plugins = ['@nx'];
+        json.extends = ['plugin:playwright/recommended'];
+      } else {
+        json.extends = ['plugin:playwright/recommended', ...json.extends];
+      }
+      json.overrides ??= [];
+      const globals = options.rootProject ? [globalJavaScriptOverrides] : [];
+      const override = {
+        files: ['*.ts', '*.tsx', '*.js', '*.jsx'],
+        parserOptions: !options.setParserOptionsProject
+          ? undefined
+          : {
+              project: `${projectConfig.root}/tsconfig.*?.json`,
+            },
+        rules: {},
+      };
+      const palywrightFiles = [
+        {
+          ...override,
+          files: [`${options.directory}/**/*.{ts,js,tsx,jsx}`],
+        },
+      ];
+      json.overrides.push(...globals);
+      json.overrides.push(...palywrightFiles);
+      return json;
+    }
+  );
+
+  return runTasksInSerial(...tasks);
+}

packages/playwright/src/utils/preset.ts

@@ -41,7 +41,7 @@ export interface NxPlaywrightOptions {
  * })
  *
  * @param pathToConfig will be used to construct the output paths for reporters and test results
- * @param options optional confiuration options
+ * @param options optional configuration options
  */
 export function nxE2EPreset(
   pathToConfig: string,

packages/playwright/src/utils/versions.ts

@@ -1,2 +1,3 @@
 export const nxVersion = require('../../package.json').version;
 export const playwrightVersion = '^1.36.0';
+export const eslintPluginPlaywrightVersion = '^0.15.3';