@nx/playwright 17.0.2 → 17.0.4

package/LICENSE

@@ -1,6 +1,6 @@
 (The MIT License)
 
-Copyright (c) 2017-2023 Narwhal Technologies Inc.
+Copyright (c) 2017-2024 Narwhal Technologies Inc.
 
 Permission is hereby granted, free of charge, to any person obtaining
 a copy of this software and associated documentation files (the

package/README.md

@@ -1,4 +1,9 @@
-<p style="text-align: center;"><img src="https://raw.githubusercontent.com/nrwl/nx/master/images/nx.png" width="600" alt="Nx - Smart, Fast and Extensible Build System"></p>
+<p style="text-align: center;">
+  <picture>
+    <source media="(prefers-color-scheme: dark)" srcset="https://raw.githubusercontent.com/nrwl/nx/master/images/nx-dark.svg">
+    <img alt="Nx - Smart Monorepos · Fast CI" src="https://raw.githubusercontent.com/nrwl/nx/master/images/nx-light.svg" width="100%">
+  </picture>
+</p>
 
 <div style="text-align: center;">
 
@@ -15,9 +20,9 @@
 
 <hr>
 
-# Nx: Smart, Fast and Extensible Build System
+# Nx: Smart Monorepos · Fast CI
 
-Nx is a next generation build system with first class monorepo support and powerful integrations.
+Nx is a build system with built-in tooling and advanced CI capabilities. It helps you maintain and scale monorepos, both locally and on CI.
 
 ## Getting Started
 
@@ -57,5 +62,5 @@ npx nx@latest init
 - [Blog Posts About Nx](https://blog.nrwl.io/nx/home)
 
 <p style="text-align: center;"><a href="https://nx.dev/#learning-materials" target="_blank" rel="noreferrer"><img src="https://raw.githubusercontent.com/nrwl/nx/master/images/nx-courses-and-videos.svg" 
-width="100%" alt="Nx - Smart, Fast and Extensible Build System"></a></p>
+width="100%" alt="Nx - Smart Monorepos · Fast CI"></a></p>
 

package/executors.json

@@ -1,7 +1,7 @@
 {
   "executors": {
     "playwright": {
-      "implementation": "./src/executors/playwright/playwright",
+      "implementation": "./src/executors/playwright/playwright.impl",
       "schema": "./src/executors/playwright/schema.json",
       "description": "Run Playwright tests."
     }

package/generators.json

@@ -3,12 +3,12 @@
   "version": "0.1",
   "generators": {
     "configuration": {
-      "factory": "./src/generators/configuration/configuration",
+      "factory": "./src/generators/configuration/configuration#configurationGeneratorInternal",
       "schema": "./src/generators/configuration/schema.json",
       "description": "Add Nx Playwright configuration to your project"
     },
     "init": {
-      "factory": "./src/generators/init/init",
+      "factory": "./src/generators/init/init#initGeneratorInternal",
       "schema": "./src/generators/init/schema.json",
       "description": "Initializes a Playwright project in the current workspace"
     }

package/index.d.ts

@@ -1,3 +1,3 @@
-export { playwrightExecutor, PlaywrightExecutorSchema, } from './src/executors/playwright/playwright';
+export { playwrightExecutor, PlaywrightExecutorSchema, } from './src/executors/playwright/playwright.impl';
 export { initGenerator } from './src/generators/init/init';
 export { configurationGenerator } from './src/generators/configuration/configuration';

package/index.js

@@ -1,8 +1,8 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.configurationGenerator = exports.initGenerator = exports.playwrightExecutor = void 0;
-var playwright_1 = require("./src/executors/playwright/playwright");
-Object.defineProperty(exports, "playwrightExecutor", { enumerable: true, get: function () { return playwright_1.playwrightExecutor; } });
+var playwright_impl_1 = require("./src/executors/playwright/playwright.impl");
+Object.defineProperty(exports, "playwrightExecutor", { enumerable: true, get: function () { return playwright_impl_1.playwrightExecutor; } });
 var init_1 = require("./src/generators/init/init");
 Object.defineProperty(exports, "initGenerator", { enumerable: true, get: function () { return init_1.initGenerator; } });
 var configuration_1 = require("./src/generators/configuration/configuration");

package/migrations.json

@@ -0,0 +1,16 @@
+{
+  "generators": {
+    "17-3-1-add-project-to-config": {
+      "cli": "nx",
+      "version": "17.3.1-beta.0",
+      "description": "Add project property to playwright config",
+      "implementation": "./src/migrations/update-17-3-1/add-project-to-config"
+    },
+    "18-1-0-remove-baseUrl-from-project-json": {
+      "cli": "nx",
+      "version": "18.1.0-beta.3",
+      "description": "Remove invalid baseUrl option from @nx/playwright:playwright targets in project.json.",
+      "implementation": "./src/migrations/update-18-1-0/remove-baseUrl-from-project-json"
+    }
+  }
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nx/playwright",
-  "version": "17.0.2",
+  "version": "17.0.4",
   "type": "commonjs",
   "homepage": "https://nx.dev",
   "private": false,
@@ -32,9 +32,12 @@
     "directory": "packages/playwright"
   },
   "dependencies": {
-    "@nx/devkit": "17.0.2",
-    "@nx/eslint": "17.0.2",
-    "tslib": "^2.3.0"
+    "@phenomnomnominal/tsquery": "~5.0.1",
+    "@nx/devkit": "17.0.4",
+    "@nx/eslint": "17.0.4",
+    "@nx/js": "17.0.4",
+    "tslib": "^2.3.0",
+    "minimatch": "9.0.3"
   },
   "peerDependencies": {
     "@playwright/test": "^1.36.0"
@@ -54,6 +57,10 @@
     "./generators/*/schema.json": "./src/generators/*/schema.json",
     "./executors.json": "./executors.json",
     "./executors/*/schema.json": "./src/executors/*/schema.json",
+    "./plugin": "./plugin.js",
     "./preset": "./src/utils/preset.js"
+  },
+  "nx-migrations": {
+    "migrations": "./migrations.json"
   }
 }

package/plugin.d.ts

@@ -0,0 +1 @@
+export { createNodes, PlaywrightPluginOptions, createDependencies, } from './src/plugins/plugin';

package/plugin.js

@@ -0,0 +1,6 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.createDependencies = exports.createNodes = void 0;
+var plugin_1 = require("./src/plugins/plugin");
+Object.defineProperty(exports, "createNodes", { enumerable: true, get: function () { return plugin_1.createNodes; } });
+Object.defineProperty(exports, "createDependencies", { enumerable: true, get: function () { return plugin_1.createDependencies; } });

package/src/executors/playwright/{playwright.d.ts → playwright.impl.d.ts}

@@ -8,6 +8,7 @@ export interface PlaywrightExecutorSchema {
     grep?: string;
     globalTimeout?: number;
     grepInvert?: string;
+    testFiles?: string[];
     headed?: boolean;
     ignoreSnapshots?: boolean;
     workers?: string;
@@ -27,7 +28,7 @@ export interface PlaywrightExecutorSchema {
     updateSnapshots?: boolean;
     ui?: boolean;
     uiHost?: string;
-    uiPort?: string;
+    uiPort?: number;
     skipInstall?: boolean;
 }
 export declare function playwrightExecutor(options: PlaywrightExecutorSchema, context: ExecutorContext): Promise<{

package/src/executors/playwright/{playwright.js → playwright.impl.js}

@@ -36,14 +36,18 @@ async function playwrightExecutor(options, context) {
 exports.playwrightExecutor = playwrightExecutor;
 function createArgs(opts, exclude = ['skipInstall']) {
     const args = [];
-    for (const key in opts) {
+    const { testFiles, ...rest } = opts;
+    if (testFiles) {
+        args.push(...testFiles);
+    }
+    for (const key in rest) {
         if (exclude.includes(key))
             continue;
         const value = opts[key];
         // NOTE: playwright doesn't accept pascalCase args, only kebab-case
         const arg = (0, devkit_1.names)(key).fileName;
         if (Array.isArray(value)) {
-            args.push(`--${arg}=${value.map((v) => v.trim()).join(',')}`);
+            args.push(...value.map((v) => `--${arg}=${v.trim()}`));
         }
         else if (typeof value === 'boolean') {
             // NOTE: playwright don't accept --arg=false, instead just don't pass the arg.

package/src/executors/playwright/schema.json

@@ -1,5 +1,5 @@
 {
-  "$schema": "http://json-schema.org/schema",
+  "$schema": "https://json-schema.org/schema",
   "version": 2,
   "title": "Playwright executor",
   "description": "Run Playwright tests.",
@@ -43,6 +43,14 @@
       "type": "string",
       "description": "Only run tests that do not match this regular expression"
     },
+    "testFiles": {
+      "alias": "t",
+      "type": "array",
+      "description": "Test files to run",
+      "items": {
+        "type": "string"
+      }
+    },
     "headed": {
       "type": "boolean",
       "description": "Run tests in headed browsers",
@@ -147,7 +155,7 @@
       "description": "Host to serve UI on; specifying this option opens UI in a browser tab"
     },
     "uiPort": {
-      "type": "string",
+      "type": "number",
       "description": "Port to serve UI on, 0 for any free port; specifying this option opens UI in a browser tab"
     },
     "skipInstall": {

package/src/generators/configuration/configuration.d.ts

@@ -1,4 +1,5 @@
 import { GeneratorCallback, Tree } from '@nx/devkit';
 import { ConfigurationGeneratorSchema } from './schema';
 export declare function configurationGenerator(tree: Tree, options: ConfigurationGeneratorSchema): Promise<GeneratorCallback>;
+export declare function configurationGeneratorInternal(tree: Tree, options: ConfigurationGeneratorSchema): Promise<GeneratorCallback>;
 export default configurationGenerator;

package/src/generators/configuration/configuration.js

@@ -1,26 +1,67 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.configurationGenerator = void 0;
+exports.configurationGeneratorInternal = exports.configurationGenerator = void 0;
 const devkit_1 = require("@nx/devkit");
+const js_1 = require("@nx/js");
+const versions_1 = require("@nx/js/src/utils/versions");
+const child_process_1 = require("child_process");
 const path = require("path");
-const init_1 = require("../init/init");
 const add_linter_1 = require("../../utils/add-linter");
-async function configurationGenerator(tree, options) {
+const versions_2 = require("../../utils/versions");
+const init_1 = require("../init/init");
+function configurationGenerator(tree, options) {
+    return configurationGeneratorInternal(tree, { addPlugin: false, ...options });
+}
+exports.configurationGenerator = configurationGenerator;
+async function configurationGeneratorInternal(tree, options) {
+    const nxJson = (0, devkit_1.readNxJson)(tree);
+    options.addPlugin ??=
+        process.env.NX_ADD_PLUGINS !== 'false' &&
+            nxJson.useInferencePlugins !== false;
     const tasks = [];
-    tasks.push(await (0, init_1.default)(tree, {
+    tasks.push(await (0, init_1.initGenerator)(tree, {
         skipFormat: true,
         skipPackageJson: options.skipPackageJson,
+        addPlugin: options.addPlugin,
     }));
     const projectConfig = (0, devkit_1.readProjectConfiguration)(tree, options.project);
+    const hasTsConfig = tree.exists((0, devkit_1.joinPathFragments)(projectConfig.root, 'tsconfig.json'));
+    const offsetFromProjectRoot = (0, devkit_1.offsetFromRoot)(projectConfig.root);
     (0, devkit_1.generateFiles)(tree, path.join(__dirname, 'files'), projectConfig.root, {
-        offsetFromRoot: (0, devkit_1.offsetFromRoot)(projectConfig.root),
+        offsetFromRoot: offsetFromProjectRoot,
         projectRoot: projectConfig.root,
         webServerCommand: options.webServerCommand ?? null,
         webServerAddress: options.webServerAddress ?? null,
         ...options,
     });
-    addE2eTarget(tree, options);
-    setupE2ETargetDefaults(tree);
+    if (!hasTsConfig) {
+        tree.write(`${projectConfig.root}/tsconfig.json`, JSON.stringify({
+            extends: (0, js_1.getRelativePathToRootTsConfig)(tree, projectConfig.root),
+            compilerOptions: {
+                allowJs: true,
+                outDir: `${offsetFromProjectRoot}dist/out-tsc`,
+                module: 'commonjs',
+                sourceMap: false,
+            },
+            include: [
+                '**/*.ts',
+                '**/*.js',
+                'playwright.config.ts',
+                'src/**/*.spec.ts',
+                'src/**/*.spec.js',
+                'src/**/*.test.ts',
+                'src/**/*.test.js',
+                'src/**/*.d.ts',
+            ],
+        }, null, 2));
+    }
+    const hasPlugin = (0, devkit_1.readNxJson)(tree).plugins?.some((p) => typeof p === 'string'
+        ? p === '@nx/playwright/plugin'
+        : p.plugin === '@nx/playwright/plugin');
+    if (!hasPlugin) {
+        addE2eTarget(tree, options);
+        setupE2ETargetDefaults(tree);
+    }
     tasks.push(await (0, add_linter_1.addLinterToPlaywrightProject)(tree, {
         project: options.project,
         linter: options.linter,
@@ -28,17 +69,55 @@ async function configurationGenerator(tree, options) {
         js: options.js,
         directory: options.directory,
         setParserOptionsProject: options.setParserOptionsProject,
-        rootProject: projectConfig.root === '.',
+        rootProject: options.rootProject ?? projectConfig.root === '.',
+        addPlugin: options.addPlugin,
     }));
     if (options.js) {
-        (0, devkit_1.toJS)(tree);
+        const { ModuleKind } = (0, devkit_1.ensurePackage)('typescript', versions_1.typescriptVersion);
+        (0, devkit_1.toJS)(tree, { extension: '.cjs', module: ModuleKind.CommonJS });
+    }
+    recommendVsCodeExtensions(tree);
+    if (!options.skipPackageJson) {
+        tasks.push((0, devkit_1.addDependenciesToPackageJson)(tree, {}, {
+            // required since used in playwright config
+            '@nx/devkit': versions_2.nxVersion,
+        }));
+    }
+    if (!options.skipInstall) {
+        tasks.push(getBrowsersInstallTask());
     }
     if (!options.skipFormat) {
         await (0, devkit_1.formatFiles)(tree);
     }
     return (0, devkit_1.runTasksInSerial)(...tasks);
 }
-exports.configurationGenerator = configurationGenerator;
+exports.configurationGeneratorInternal = configurationGeneratorInternal;
+function getBrowsersInstallTask() {
+    return () => {
+        devkit_1.output.log({
+            title: 'Ensuring Playwright is installed.',
+            bodyLines: ['use --skipInstall to skip installation.'],
+        });
+        const pmc = (0, devkit_1.getPackageManagerCommand)();
+        (0, child_process_1.execSync)(`${pmc.exec} playwright install`, { cwd: devkit_1.workspaceRoot });
+    };
+}
+function recommendVsCodeExtensions(tree) {
+    if (tree.exists('.vscode/extensions.json')) {
+        (0, devkit_1.updateJson)(tree, '.vscode/extensions.json', (json) => {
+            json.recommendations ??= [];
+            const recs = new Set(json.recommendations);
+            recs.add('ms-playwright.playwright');
+            json.recommendations = Array.from(recs);
+            return json;
+        });
+    }
+    else {
+        (0, devkit_1.writeJson)(tree, '.vscode/extensions.json', {
+            recommendations: ['ms-playwright.playwright'],
+        });
+    }
+}
 function setupE2ETargetDefaults(tree) {
     const nxJson = (0, devkit_1.readNxJson)(tree);
     if (!nxJson.namedInputs) {
@@ -48,6 +127,7 @@ function setupE2ETargetDefaults(tree) {
     nxJson.targetDefaults ??= {};
     const productionFileSet = !!nxJson.namedInputs?.production;
     nxJson.targetDefaults.e2e ??= {};
+    nxJson.targetDefaults.e2e.cache ??= true;
     nxJson.targetDefaults.e2e.inputs ??= [
         'default',
         productionFileSet ? '^production' : '^default',
@@ -65,7 +145,7 @@ Rename or remove the existing e2e target.`);
         executor: '@nx/playwright:playwright',
         outputs: [`{workspaceRoot}/dist/.playwright/${projectConfig.root}`],
         options: {
-            config: `${projectConfig.root}/playwright.config.${options.js ? 'js' : 'ts'}`,
+            config: `${projectConfig.root}/playwright.config.${options.js ? 'cjs' : 'ts'}`,
         },
     };
     (0, devkit_1.updateProjectConfiguration)(tree, options.project, projectConfig);

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

@@ -1,4 +1,4 @@
-import { defineConfig } from '@playwright/test';
+import { defineConfig, devices } 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';
@@ -29,10 +29,47 @@ export default defineConfig({
     url: '<%= webServerAddress %>',
     reuseExistingServer: !process.env.CI,
     cwd: workspaceRoot
-  },<% } else {%>// webServer: {
+  },<% } else {%>
+  // webServer: {
   //   command: 'npm run start',
   //   url: 'http://127.0.0.1:3000',
   //   reuseExistingServer: !process.env.CI,
   //   cwd: workspaceRoot,
   // },<% } %>
+  projects: [
+    {
+      name: "chromium",
+      use: { ...devices["Desktop Chrome"] },
+    },
+
+    {
+      name: "firefox",
+      use: { ...devices["Desktop Firefox"] },
+    },
+
+    {
+      name: "webkit",
+      use: { ...devices["Desktop Safari"] },
+    },
+    
+    // Uncomment for mobile browsers support
+    /* {
+      name: 'Mobile Chrome',
+      use: { ...devices['Pixel 5'] },
+    },
+    {
+      name: 'Mobile Safari',
+      use: { ...devices['iPhone 12'] },
+    }, */
+
+    // Uncomment for branded browsers
+    /* {
+      name: 'Microsoft Edge',
+      use: { ...devices['Desktop Edge'], channel: 'msedge' },
+    },
+    {
+      name: 'Google Chrome',
+      use: { ...devices['Desktop Chrome'], channel: 'chrome' },
+    } */
+  ],
 });

package/src/generators/configuration/schema.d.ts

@@ -9,6 +9,7 @@ export interface ConfigurationGeneratorSchema {
   js: boolean; // default is false
   skipFormat: boolean;
   skipPackageJson: boolean;
+  skipInstall?: boolean;
   linter: Linter;
   setParserOptionsProject: boolean; // default is false
   /**
@@ -21,4 +22,6 @@ export interface ConfigurationGeneratorSchema {
    * @example: "http://localhost:4200"
    **/
   webServerAddress?: string;
+  rootProject?: boolean;
+  addPlugin?: boolean;
 }

package/src/generators/configuration/schema.json

@@ -1,5 +1,5 @@
 {
-  "$schema": "http://json-schema.org/schema",
+  "$schema": "https://json-schema.org/schema",
   "$id": "NxPlaywrightConfiguration",
   "description": "Add a Playwright configuration.",
   "title": "Add a Playwright configuration",
@@ -55,6 +55,18 @@
       "default": false,
       "description": "Do not add dependencies to `package.json`.",
       "x-priority": "internal"
+    },
+    "rootProject": {
+      "description": "Create a application at the root of the workspace",
+      "type": "boolean",
+      "default": false,
+      "hidden": true,
+      "x-priority": "internal"
+    },
+    "skipInstall": {
+      "type": "boolean",
+      "description": "Skip running `playwright install`. This is to ensure that playwright browsers are installed.",
+      "default": false
     }
   },
   "required": ["project"]

package/src/generators/init/init.d.ts

@@ -1,4 +1,5 @@
 import { GeneratorCallback, Tree } from '@nx/devkit';
 import { InitGeneratorSchema } from './schema';
 export declare function initGenerator(tree: Tree, options: InitGeneratorSchema): Promise<GeneratorCallback>;
+export declare function initGeneratorInternal(tree: Tree, options: InitGeneratorSchema): Promise<GeneratorCallback>;
 export default initGenerator;

package/src/generators/init/init.js

@@ -1,47 +1,51 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.initGenerator = void 0;
+exports.initGeneratorInternal = exports.initGenerator = void 0;
 const devkit_1 = require("@nx/devkit");
+const update_package_scripts_1 = require("@nx/devkit/src/utils/update-package-scripts");
+const plugin_1 = require("../../plugins/plugin");
 const versions_1 = require("../../utils/versions");
-const child_process_1 = require("child_process");
-async function initGenerator(tree, options) {
+function initGenerator(tree, options) {
+    return initGeneratorInternal(tree, { addPlugin: false, ...options });
+}
+exports.initGenerator = initGenerator;
+async function initGeneratorInternal(tree, options) {
     const tasks = [];
+    const nxJson = (0, devkit_1.readNxJson)(tree);
+    const addPluginDefault = process.env.NX_ADD_PLUGINS !== 'false' &&
+        nxJson.useInferencePlugins !== false;
+    options.addPlugin ??= addPluginDefault;
     if (!options.skipPackageJson) {
         tasks.push((0, devkit_1.addDependenciesToPackageJson)(tree, {}, {
             '@nx/playwright': versions_1.nxVersion,
-            // required since used in playwright config
-            '@nx/devkit': versions_1.nxVersion,
             '@playwright/test': versions_1.playwrightVersion,
-        }));
+        }, undefined, options.keepExistingVersions));
     }
-    if (!options.skipFormat) {
-        await (0, devkit_1.formatFiles)(tree);
+    if (options.addPlugin) {
+        addPlugin(tree);
     }
-    if (tree.exists('.vscode/extensions.json')) {
-        (0, devkit_1.updateJson)(tree, '.vscode/extensions.json', (json) => {
-            json.recommendations ??= [];
-            const recs = new Set(json.recommendations);
-            recs.add('ms-playwright.playwright');
-            json.recommendations = Array.from(recs);
-            return json;
-        });
+    if (options.updatePackageScripts) {
+        await (0, update_package_scripts_1.updatePackageScripts)(tree, plugin_1.createNodes);
     }
-    else {
-        tree.write('.vscode/extensions.json', JSON.stringify({
-            recommendations: ['ms-playwright.playwright'],
-        }, null, 2));
+    if (!options.skipFormat) {
+        await (0, devkit_1.formatFiles)(tree);
     }
-    if (!options.skipInstall) {
-        tasks.push(() => {
-            devkit_1.output.log({
-                title: 'Ensuring Playwright is installed.',
-                bodyLines: ['use --skipInstall to skip installation.'],
-            });
-            const pmc = (0, devkit_1.getPackageManagerCommand)();
-            (0, child_process_1.execSync)(`${pmc.exec} playwright install`, { cwd: devkit_1.workspaceRoot });
+    return (0, devkit_1.runTasksInSerial)(...tasks);
+}
+exports.initGeneratorInternal = initGeneratorInternal;
+function addPlugin(tree) {
+    const nxJson = (0, devkit_1.readNxJson)(tree);
+    nxJson.plugins ??= [];
+    if (!nxJson.plugins.some((p) => typeof p === 'string'
+        ? p === '@nx/playwright/plugin'
+        : p.plugin === '@nx/playwright/plugin')) {
+        nxJson.plugins.push({
+            plugin: '@nx/playwright/plugin',
+            options: {
+                targetName: 'e2e',
+            },
         });
+        (0, devkit_1.updateNxJson)(tree, nxJson);
     }
-    return (0, devkit_1.runTasksInSerial)(...tasks);
 }
-exports.initGenerator = initGenerator;
 exports.default = initGenerator;

package/src/generators/init/schema.d.ts

@@ -1,5 +1,7 @@
 export interface InitGeneratorSchema {
-  skipFormat: boolean;
-  skipPackageJson: boolean;
-  skipInstall?: boolean;
+  skipFormat?: boolean;
+  skipPackageJson?: boolean;
+  keepExistingVersions?: boolean;
+  updatePackageScripts?: boolean;
+  addPlugin?: boolean;
 }

package/src/generators/init/schema.json

@@ -1,5 +1,5 @@
 {
-  "$schema": "http://json-schema.org/schema",
+  "$schema": "https://json-schema.org/schema",
   "$id": "NxPlaywrightInit",
   "title": "Playwright Init Generator",
   "description": "Initializes a Playwright project in the current workspace.",
@@ -17,9 +17,16 @@
       "description": "Do not add dependencies to `package.json`.",
       "x-priority": "internal"
     },
-    "skipInstall": {
+    "keepExistingVersions": {
       "type": "boolean",
-      "description": "Skip running `playwright install`. This is to ensure that playwright browsers are installed.",
+      "x-priority": "internal",
+      "description": "Keep existing dependencies versions",
+      "default": false
+    },
+    "updatePackageScripts": {
+      "type": "boolean",
+      "x-priority": "internal",
+      "description": "Update `package.json` scripts with inferred targets",
       "default": false
     }
   },

package/src/migrations/update-17-3-1/add-project-to-config.d.ts

@@ -0,0 +1,2 @@
+import { Tree } from '@nx/devkit';
+export default function update(tree: Tree): Promise<void>;

package/src/migrations/update-17-3-1/add-project-to-config.js

@@ -0,0 +1,95 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const devkit_1 = require("@nx/devkit");
+const ts = require("typescript");
+const tsquery_1 = require("@phenomnomnominal/tsquery");
+async function update(tree) {
+    const projects = (0, devkit_1.getProjects)(tree);
+    projects.forEach((project) => {
+        // Check if the project contains playwright config
+        const configPath = (0, devkit_1.joinPathFragments)(project.root, 'playwright.config.ts');
+        if (tree.exists(configPath)) {
+            addProjectIfExists(tree, (0, devkit_1.joinPathFragments)(configPath));
+        }
+    });
+}
+exports.default = update;
+function addProjectIfExists(tree, configFilePath) {
+    const configFileContent = tree.read(configFilePath, 'utf-8');
+    const sourceFile = tsquery_1.tsquery.ast(configFileContent);
+    const printer = ts.createPrinter();
+    const updatedStatements = updateOrCreateImportStatement(sourceFile, '@playwright/test', ['devices']);
+    const exportAssignment = tsquery_1.tsquery.query(sourceFile, 'ExportAssignment')[0];
+    if (!exportAssignment) {
+        // No export found in the file
+        return;
+    }
+    const exportAssignemntObject = exportAssignment.expression;
+    if (!(ts.isCallExpression(exportAssignemntObject) &&
+        exportAssignemntObject.getText(sourceFile).startsWith('defineConfig') &&
+        exportAssignemntObject.arguments.length > 0)) {
+        // Export is not a call expression with defineConfig ex. export default defineConfig({ ... })
+        return;
+    }
+    let firstArgument = exportAssignemntObject.arguments[0];
+    if (!ts.isObjectLiteralExpression(firstArgument)) {
+        // First argument is not an object literal ex. defineConfig('foo')
+        return;
+    }
+    const projectProperty = tsquery_1.tsquery.query(exportAssignemntObject, 'PropertyAssignment > Identifier[name="projects"]')[0];
+    if (projectProperty) {
+        // Projects property already exists in the config
+        return;
+    }
+    // Add projects property to the config
+    const projectsArray = ts.factory.createArrayLiteralExpression([
+        createProperty('chromium', 'Desktop Chrome'),
+        createProperty('firefox', 'Desktop Firefox'),
+        createProperty('webkit', 'Desktop Safari'),
+    ], true);
+    const newProjectsProperty = ts.factory.createPropertyAssignment('projects', projectsArray);
+    const newObj = ts.factory.createObjectLiteralExpression([
+        ...firstArgument.properties,
+        newProjectsProperty,
+    ]);
+    const newCallExpression = ts.factory.updateCallExpression(exportAssignemntObject, exportAssignemntObject.expression, exportAssignemntObject.typeArguments, [newObj]);
+    const newExportAssignment = ts.factory.updateExportAssignment(exportAssignment, exportAssignment.modifiers, newCallExpression);
+    const transformedStatements = updatedStatements.map((statement) => {
+        return statement === exportAssignment ? newExportAssignment : statement;
+    });
+    const transformedSourceFile = ts.factory.updateSourceFile(sourceFile, transformedStatements);
+    const updatedConfigFileContent = printer.printFile(transformedSourceFile);
+    tree.write(configFilePath, updatedConfigFileContent);
+}
+function createProperty(name, device) {
+    return ts.factory.createObjectLiteralExpression([
+        ts.factory.createPropertyAssignment('name', ts.factory.createStringLiteral(name)),
+        ts.factory.createPropertyAssignment('use', ts.factory.createObjectLiteralExpression([
+            ts.factory.createSpreadAssignment(ts.factory.createElementAccessExpression(ts.factory.createIdentifier('devices'), ts.factory.createStringLiteral(device))),
+        ])),
+    ]);
+}
+function updateOrCreateImportStatement(sourceFile, moduleName, importNames) {
+    let importDeclarationFound = false;
+    const newStatements = sourceFile.statements.map((statement) => {
+        if (ts.isImportDeclaration(statement) &&
+            statement.moduleSpecifier.getText(sourceFile) === `'${moduleName}'`) {
+            importDeclarationFound = true;
+            const existingSpecifiers = statement.importClause?.namedBindings &&
+                ts.isNamedImports(statement.importClause.namedBindings)
+                ? statement.importClause.namedBindings.elements.map((e) => e.name.text)
+                : [];
+            // Merge with new import names, avoiding duplicates
+            const mergedImportNames = Array.from(new Set([...existingSpecifiers, ...importNames]));
+            // Create new import specifiers
+            const importSpecifiers = mergedImportNames.map((name) => ts.factory.createImportSpecifier(false, undefined, ts.factory.createIdentifier(name)));
+            return ts.factory.updateImportDeclaration(statement, statement.modifiers, ts.factory.createImportClause(false, undefined, ts.factory.createNamedImports(importSpecifiers)), statement.moduleSpecifier, undefined);
+        }
+        return statement;
+    });
+    if (!importDeclarationFound) {
+        const importDeclaration = ts.factory.createImportDeclaration(undefined, ts.factory.createImportClause(false, undefined, ts.factory.createNamedImports(importNames.map((name) => ts.factory.createImportSpecifier(false, undefined, ts.factory.createIdentifier(name))))), ts.factory.createStringLiteral(moduleName));
+        newStatements.push(importDeclaration);
+    }
+    return newStatements;
+}

package/src/migrations/update-18-1-0/remove-baseUrl-from-project-json.d.ts

@@ -0,0 +1,2 @@
+import { type Tree } from '@nx/devkit';
+export default function (tree: Tree): Promise<void>;

package/src/migrations/update-18-1-0/remove-baseUrl-from-project-json.js

@@ -0,0 +1,42 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const devkit_1 = require("@nx/devkit");
+const executor_options_utils_1 = require("@nx/devkit/src/generators/executor-options-utils");
+async function default_1(tree) {
+    (0, executor_options_utils_1.forEachExecutorOptions)(tree, '@nx/playwright:playwright', (options, projectName, targetName, configurationName) => {
+        if (options?.['baseUrl']) {
+            const project = (0, devkit_1.readProjectConfiguration)(tree, projectName);
+            if (configurationName) {
+                delete project.targets[targetName].configurations[configurationName]['baseUrl'];
+            }
+            else {
+                delete project.targets[targetName].options['baseUrl'];
+            }
+            (0, devkit_1.updateProjectConfiguration)(tree, projectName, project);
+        }
+    });
+    const nxJson = (0, devkit_1.readNxJson)(tree);
+    for (const [targetNameOrExecutor, target] of Object.entries(nxJson.targetDefaults)) {
+        if (targetNameOrExecutor === '@nx/playwright:playwright' ||
+            (target.executor && target.executor === '@nx/playwright:playwright')) {
+            let updated = false;
+            if (target.options?.['baseUrl']) {
+                delete nxJson.targetDefaults[targetNameOrExecutor].options['baseUrl'];
+                updated = true;
+            }
+            if (target.configurations) {
+                for (const [configurationName, configuration] of Object.entries(target.configurations)) {
+                    if (configuration['baseUrl']) {
+                        delete nxJson.targetDefaults[targetNameOrExecutor].configurations[configurationName]['baseUrl'];
+                        updated = true;
+                    }
+                }
+            }
+            if (updated) {
+                (0, devkit_1.updateNxJson)(tree, nxJson);
+            }
+        }
+    }
+    await (0, devkit_1.formatFiles)(tree);
+}
+exports.default = default_1;

package/src/plugins/plugin.d.ts

@@ -0,0 +1,7 @@
+import { CreateDependencies, CreateNodes } from '@nx/devkit';
+export interface PlaywrightPluginOptions {
+    targetName?: string;
+    ciTargetName?: string;
+}
+export declare const createDependencies: CreateDependencies;
+export declare const createNodes: CreateNodes<PlaywrightPluginOptions>;

package/src/plugins/plugin.js

@@ -0,0 +1,205 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.createNodes = exports.createDependencies = void 0;
+const fs_1 = require("fs");
+const path_1 = require("path");
+const devkit_1 = require("@nx/devkit");
+const get_named_inputs_1 = require("@nx/devkit/src/utils/get-named-inputs");
+const calculate_hash_for_create_nodes_1 = require("@nx/devkit/src/utils/calculate-hash-for-create-nodes");
+const workspace_context_1 = require("nx/src/utils/workspace-context");
+const minimatch_1 = require("minimatch");
+const cache_directory_1 = require("nx/src/utils/cache-directory");
+const js_1 = require("@nx/js");
+const config_utils_1 = require("@nx/devkit/src/utils/config-utils");
+const cachePath = (0, path_1.join)(cache_directory_1.projectGraphCacheDirectory, 'playwright.hash');
+const targetsCache = (0, fs_1.existsSync)(cachePath) ? readTargetsCache() : {};
+const calculatedTargets = {};
+function readTargetsCache() {
+    return (0, devkit_1.readJsonFile)(cachePath);
+}
+function writeTargetsToCache(targets) {
+    (0, devkit_1.writeJsonFile)(cachePath, targets);
+}
+const createDependencies = () => {
+    writeTargetsToCache(calculatedTargets);
+    return [];
+};
+exports.createDependencies = createDependencies;
+exports.createNodes = [
+    '**/playwright.config.{js,ts,cjs,cts,mjs,mts}',
+    async (configFilePath, options, context) => {
+        const projectRoot = (0, path_1.dirname)(configFilePath);
+        // Do not create a project if package.json and project.json isn't there.
+        const siblingFiles = (0, fs_1.readdirSync)((0, path_1.join)(context.workspaceRoot, projectRoot));
+        if (!siblingFiles.includes('package.json') &&
+            !siblingFiles.includes('project.json')) {
+            return {};
+        }
+        const normalizedOptions = normalizeOptions(options);
+        const hash = (0, calculate_hash_for_create_nodes_1.calculateHashForCreateNodes)(projectRoot, options, context, [
+            (0, js_1.getLockFileName)((0, devkit_1.detectPackageManager)(context.workspaceRoot)),
+        ]);
+        const targets = targetsCache[hash] ??
+            (await buildPlaywrightTargets(configFilePath, projectRoot, normalizedOptions, context));
+        calculatedTargets[hash] = targets;
+        return {
+            projects: {
+                [projectRoot]: {
+                    root: projectRoot,
+                    targets,
+                },
+            },
+        };
+    },
+];
+async function buildPlaywrightTargets(configFilePath, projectRoot, options, context) {
+    // Playwright forbids importing the `@playwright/test` module twice. This would affect running the tests,
+    // but we're just reading the config so let's delete the variable they are using to detect this.
+    // See: https://github.com/microsoft/playwright/pull/11218/files
+    delete process['__pw_initiator__'];
+    const playwrightConfig = await (0, config_utils_1.loadConfigFile)((0, path_1.join)(context.workspaceRoot, configFilePath));
+    const namedInputs = (0, get_named_inputs_1.getNamedInputs)(projectRoot, context);
+    const targets = {};
+    const baseTargetConfig = {
+        command: 'playwright test',
+        options: {
+            cwd: '{projectRoot}',
+        },
+    };
+    targets[options.targetName] = {
+        ...baseTargetConfig,
+        cache: true,
+        inputs: 'production' in namedInputs
+            ? ['default', '^production']
+            : ['default', '^default'],
+        outputs: getOutputs(projectRoot, playwrightConfig),
+    };
+    if (options.ciTargetName) {
+        const ciBaseTargetConfig = {
+            ...baseTargetConfig,
+            cache: true,
+            inputs: 'production' in namedInputs
+                ? ['default', '^production']
+                : ['default', '^default'],
+            outputs: getOutputs(projectRoot, playwrightConfig),
+        };
+        const testDir = playwrightConfig.testDir
+            ? (0, devkit_1.joinPathFragments)(projectRoot, playwrightConfig.testDir)
+            : projectRoot;
+        // Playwright defaults to the following pattern.
+        playwrightConfig.testMatch ??= '**/*.@(spec|test).?(c|m)[jt]s?(x)';
+        const dependsOn = [];
+        forEachTestFile((testFile) => {
+            const relativeToProjectRoot = (0, devkit_1.normalizePath)((0, path_1.relative)(projectRoot, testFile));
+            const targetName = `${options.ciTargetName}--${relativeToProjectRoot}`;
+            targets[targetName] = {
+                ...ciBaseTargetConfig,
+                command: `${baseTargetConfig.command} ${relativeToProjectRoot}`,
+            };
+            dependsOn.push({
+                target: targetName,
+                projects: 'self',
+                params: 'forward',
+            });
+        }, {
+            context,
+            path: testDir,
+            config: playwrightConfig,
+        });
+        targets[options.ciTargetName] ??= {};
+        targets[options.ciTargetName] = {
+            executor: 'nx:noop',
+            cache: ciBaseTargetConfig.cache,
+            inputs: ciBaseTargetConfig.inputs,
+            outputs: ciBaseTargetConfig.outputs,
+            dependsOn,
+        };
+    }
+    return targets;
+}
+async function forEachTestFile(cb, opts) {
+    const files = (0, workspace_context_1.getFilesInDirectoryUsingContext)(opts.context.workspaceRoot, opts.path);
+    const matcher = createMatcher(opts.config.testMatch);
+    const ignoredMatcher = opts.config.testIgnore
+        ? createMatcher(opts.config.testIgnore)
+        : () => false;
+    for (const file of files) {
+        if (matcher(file) && !ignoredMatcher(file)) {
+            cb(file);
+        }
+    }
+}
+function createMatcher(pattern) {
+    if (Array.isArray(pattern)) {
+        const matchers = pattern.map((p) => createMatcher(p));
+        return (path) => matchers.some((m) => m(path));
+    }
+    else if (pattern instanceof RegExp) {
+        return (path) => pattern.test(path);
+    }
+    else {
+        return (path) => {
+            try {
+                return (0, minimatch_1.minimatch)(path, pattern);
+            }
+            catch (e) {
+                throw new Error(`Error matching ${path} with ${pattern}: ${e.message}`);
+            }
+        };
+    }
+}
+function getOutputs(projectRoot, playwrightConfig) {
+    function getOutput(path) {
+        if (path.startsWith('..')) {
+            return (0, path_1.join)('{workspaceRoot}', (0, path_1.join)(projectRoot, path));
+        }
+        else {
+            return (0, path_1.join)('{projectRoot}', path);
+        }
+    }
+    const outputs = [];
+    const { reporter, outputDir } = playwrightConfig;
+    if (reporter) {
+        const DEFAULT_REPORTER_OUTPUT = getOutput('playwright-report');
+        if (reporter === 'html' || reporter === 'json') {
+            // Reporter is a string, so it uses the default output directory.
+            outputs.push(DEFAULT_REPORTER_OUTPUT);
+        }
+        else if (Array.isArray(reporter)) {
+            for (const r of reporter) {
+                const [, opts] = r;
+                // There are a few different ways to specify an output file or directory
+                // depending on the reporter. This is a best effort to find the output.
+                if (!opts) {
+                    outputs.push(DEFAULT_REPORTER_OUTPUT);
+                }
+                else if (opts.outputFile) {
+                    outputs.push(getOutput(opts.outputFile));
+                }
+                else if (opts.outputDir) {
+                    outputs.push(getOutput(opts.outputDir));
+                }
+                else if (opts.outputFolder) {
+                    outputs.push(getOutput(opts.outputFolder));
+                }
+                else {
+                    outputs.push(DEFAULT_REPORTER_OUTPUT);
+                }
+            }
+        }
+    }
+    if (outputDir) {
+        outputs.push(getOutput(outputDir));
+    }
+    else {
+        outputs.push(getOutput('./test-results'));
+    }
+    return outputs;
+}
+function normalizeOptions(options) {
+    return {
+        ...options,
+        targetName: options.targetName ?? 'e2e',
+        ciTargetName: options.ciTargetName ?? 'e2e-ci',
+    };
+}

package/src/utils/add-linter.d.ts

@@ -11,5 +11,6 @@ export interface PlaywrightLinterOptions {
      * Directory from the project root, where the playwright files will be located.
      **/
     directory: string;
+    addPlugin?: boolean;
 }
 export declare function addLinterToPlaywrightProject(tree: Tree, options: PlaywrightLinterOptions): Promise<GeneratorCallback>;

package/src/utils/add-linter.js

@@ -19,12 +19,10 @@ async function addLinterToPlaywrightProject(tree, options) {
             linter: options.linter,
             skipFormat: true,
             tsConfigPaths: [(0, devkit_1.joinPathFragments)(projectConfig.root, 'tsconfig.json')],
-            eslintFilePatterns: [
-                `${projectConfig.root}/**/*.${options.js ? 'js' : '{js,ts}'}`,
-            ],
             setParserOptionsProject: options.setParserOptionsProject,
             skipPackageJson: options.skipPackageJson,
             rootProject: options.rootProject,
+            addPlugin: options.addPlugin,
         }));
     }
     if (!options.linter || options.linter !== eslint_1.Linter.EsLint) {

package/src/utils/preset.d.ts

@@ -4,16 +4,6 @@ export interface NxPlaywrightOptions {
      * @default './src'
      **/
     testDir?: string;
-    /**
-     * Include Mobile Chome and Mobile Safari browsers in test projects
-     * @default false
-     **/
-    includeMobileBrowsers?: boolean;
-    /**
-     * Include Microsoft Edge and Google Chrome browsers in test projects
-     * @default false
-     **/
-    includeBrandedBrowsers?: boolean;
 }
 /**
  * nx E2E Preset for Playwright
@@ -25,6 +15,7 @@ export interface NxPlaywrightOptions {
  * - chromium
  * - firefox
  * - webkit
+ * These are generated by default.
  *
  * you can easily extend this within your playwright config via spreading the preset
  * @example

package/src/utils/preset.js

@@ -15,6 +15,7 @@ const test_1 = require("@playwright/test");
  * - chromium
  * - firefox
  * - webkit
+ * These are generated by default.
  *
  * you can easily extend this within your playwright config via spreading the preset
  * @example
@@ -34,44 +35,6 @@ function nxE2EPreset(pathToConfig, options) {
     const offset = (0, node_path_1.relative)(normalizedPath, devkit_1.workspaceRoot);
     const testResultOuputDir = (0, node_path_1.join)(offset, 'dist', '.playwright', projectPath, 'test-output');
     const reporterOutputDir = (0, node_path_1.join)(offset, 'dist', '.playwright', projectPath, 'playwright-report');
-    const projects = [
-        {
-            name: 'chromium',
-            use: { ...test_1.devices['Desktop Chrome'] },
-        },
-        {
-            name: 'firefox',
-            use: { ...test_1.devices['Desktop Firefox'] },
-        },
-        {
-            name: 'webkit',
-            use: { ...test_1.devices['Desktop Safari'] },
-        },
-    ];
-    if (options?.includeMobileBrowsers) {
-        projects.push(...[
-            {
-                name: 'Mobile Chrome',
-                use: { ...test_1.devices['Pixel 5'] },
-            },
-            {
-                name: 'Mobile Safari',
-                use: { ...test_1.devices['iPhone 12'] },
-            },
-        ]);
-    }
-    if (options?.includeBrandedBrowsers) {
-        projects.push(...[
-            {
-                name: 'Microsoft Edge',
-                use: { ...test_1.devices['Desktop Edge'], channel: 'msedge' },
-            },
-            {
-                name: 'Google Chrome',
-                use: { ...test_1.devices['Desktop Chrome'], channel: 'chrome' },
-            },
-        ]);
-    }
     return (0, test_1.defineConfig)({
         testDir: options?.testDir ?? './src',
         outputDir: testResultOuputDir,
@@ -92,7 +55,6 @@ function nxE2EPreset(pathToConfig, options) {
                 },
             ],
         ],
-        projects,
     });
 }
 exports.nxE2EPreset = nxE2EPreset;