@nx/playwright 0.0.0-pr-22179-271588f

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

@@ -0,0 +1,16 @@
+import { GeneratorCallback, Tree } from '@nx/devkit';
+import { Linter } from '@nx/eslint';
+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;
+    addPlugin?: boolean;
+}
+export declare function addLinterToPlaywrightProject(tree: Tree, options: PlaywrightLinterOptions): Promise<GeneratorCallback>;

package/src/utils/add-linter.js

@@ -0,0 +1,52 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.addLinterToPlaywrightProject = void 0;
+const devkit_1 = require("@nx/devkit");
+const eslint_1 = require("@nx/eslint");
+const global_eslint_config_1 = require("@nx/eslint/src/generators/init/global-eslint-config");
+const versions_1 = require("./versions");
+const eslint_file_1 = require("@nx/eslint/src/generators/utils/eslint-file");
+async function addLinterToPlaywrightProject(tree, options) {
+    if (options.linter === eslint_1.Linter.None) {
+        return () => { };
+    }
+    const tasks = [];
+    const projectConfig = (0, devkit_1.readProjectConfiguration)(tree, options.project);
+    const eslintFile = (0, eslint_file_1.findEslintFile)(tree, projectConfig.root);
+    if (!eslintFile) {
+        tasks.push(await (0, eslint_1.lintProjectGenerator)(tree, {
+            project: options.project,
+            linter: options.linter,
+            skipFormat: true,
+            tsConfigPaths: [(0, devkit_1.joinPathFragments)(projectConfig.root, 'tsconfig.json')],
+            setParserOptionsProject: options.setParserOptionsProject,
+            skipPackageJson: options.skipPackageJson,
+            rootProject: options.rootProject,
+            addPlugin: options.addPlugin,
+        }));
+    }
+    if (!options.linter || options.linter !== eslint_1.Linter.EsLint) {
+        return (0, devkit_1.runTasksInSerial)(...tasks);
+    }
+    tasks.push(!options.skipPackageJson
+        ? (0, devkit_1.addDependenciesToPackageJson)(tree, {}, { 'eslint-plugin-playwright': versions_1.eslintPluginPlaywrightVersion })
+        : () => { });
+    if ((0, eslint_file_1.isEslintConfigSupported)(tree)) {
+        (0, eslint_file_1.addExtendsToLintConfig)(tree, projectConfig.root, 'plugin:playwright/recommended');
+        if (options.rootProject) {
+            (0, eslint_file_1.addPluginsToLintConfig)(tree, projectConfig.root, '@nx');
+            (0, eslint_file_1.addOverrideToLintConfig)(tree, projectConfig.root, global_eslint_config_1.javaScriptOverride);
+        }
+        (0, eslint_file_1.addOverrideToLintConfig)(tree, projectConfig.root, {
+            files: [`${options.directory}/**/*.{ts,js,tsx,jsx}`],
+            parserOptions: !options.setParserOptionsProject
+                ? undefined
+                : {
+                    project: `${projectConfig.root}/tsconfig.*?.json`,
+                },
+            rules: {},
+        });
+    }
+    return (0, devkit_1.runTasksInSerial)(...tasks);
+}
+exports.addLinterToPlaywrightProject = addLinterToPlaywrightProject;

package/src/utils/preset.d.ts

@@ -0,0 +1,30 @@
+export interface NxPlaywrightOptions {
+    /**
+     * The directory where the e2e tests are located.
+     * @default './src'
+     **/
+    testDir?: string;
+}
+/**
+ * nx E2E Preset for Playwright
+ * @description
+ * this preset contains the base configuration
+ * for your e2e tests that nx recommends.
+ * By default html reporter is configured
+ * along with the following browsers:
+ * - chromium
+ * - firefox
+ * - webkit
+ * These are generated by default.
+ *
+ * you can easily extend this within your playwright config via spreading the preset
+ * @example
+ * export default defineConfig({
+ *   ...nxE2EPreset(__filename, options)
+ *   // add your own config here
+ * })
+ *
+ * @param pathToConfig will be used to construct the output paths for reporters and test results
+ * @param options optional configuration options
+ */
+export declare function nxE2EPreset(pathToConfig: string, options?: NxPlaywrightOptions): import("@playwright/test").PlaywrightTestConfig<{}, {}>;

package/src/utils/preset.js

@@ -0,0 +1,60 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.nxE2EPreset = void 0;
+const devkit_1 = require("@nx/devkit");
+const node_fs_1 = require("node:fs");
+const node_path_1 = require("node:path");
+const test_1 = require("@playwright/test");
+/**
+ * nx E2E Preset for Playwright
+ * @description
+ * this preset contains the base configuration
+ * for your e2e tests that nx recommends.
+ * By default html reporter is configured
+ * along with the following browsers:
+ * - chromium
+ * - firefox
+ * - webkit
+ * These are generated by default.
+ *
+ * you can easily extend this within your playwright config via spreading the preset
+ * @example
+ * export default defineConfig({
+ *   ...nxE2EPreset(__filename, options)
+ *   // add your own config here
+ * })
+ *
+ * @param pathToConfig will be used to construct the output paths for reporters and test results
+ * @param options optional configuration options
+ */
+function nxE2EPreset(pathToConfig, options) {
+    const normalizedPath = (0, node_fs_1.lstatSync)(pathToConfig).isDirectory()
+        ? pathToConfig
+        : (0, node_path_1.dirname)(pathToConfig);
+    const projectPath = (0, node_path_1.relative)(devkit_1.workspaceRoot, normalizedPath);
+    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');
+    return (0, test_1.defineConfig)({
+        testDir: options?.testDir ?? './src',
+        outputDir: testResultOuputDir,
+        /* Run tests in files in parallel */
+        fullyParallel: true,
+        /* Fail the build on CI if you accidentally left test.only in the source code. */
+        forbidOnly: !!process.env.CI,
+        /* Retry on CI only */
+        retries: process.env.CI ? 2 : 0,
+        /* Opt out of parallel tests on CI. */
+        workers: process.env.CI ? 1 : undefined,
+        /* Reporter to use. See https://playwright.dev/docs/test-reporters */
+        reporter: [
+            [
+                'html',
+                {
+                    outputFolder: reporterOutputDir,
+                },
+            ],
+        ],
+    });
+}
+exports.nxE2EPreset = nxE2EPreset;

package/src/utils/versions.d.ts

@@ -0,0 +1,3 @@
+export declare const nxVersion: any;
+export declare const playwrightVersion = "^1.36.0";
+export declare const eslintPluginPlaywrightVersion = "^0.15.3";

package/src/utils/versions.js

@@ -0,0 +1,6 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.eslintPluginPlaywrightVersion = exports.playwrightVersion = exports.nxVersion = void 0;
+exports.nxVersion = require('../../package.json').version;
+exports.playwrightVersion = '^1.36.0';
+exports.eslintPluginPlaywrightVersion = '^0.15.3';