playwright.config.ts

import { defineConfig, devices } from "@playwright/test";
import * as path from "path";
import z from "zod";

/**
 * Read environment variables from file.
 * https://github.com/motdotla/dotenv
 */
// require('dotenv').config();

/**
 * See https://playwright.dev/docs/test-configuration.
 */

/*
 * Validating environment variables with zod
 * https://jfranciscosousa.com/blog/validating-environment-variables-with-zod/
 */
const _envSchema = z.object({
    CI: z.boolean().optional().default(false),
});
const _env = _envSchema.parse(process.env);
const _webServerPort = 4999;
const _webServerUrl = `http://127.0.0.1:${_webServerPort}`;
const _testsDir = "./";
const _testsOutputBaseDir = `${_testsDir}/test-results`;
const _monoCartReporterOutputFile = `${_testsOutputBaseDir}/index.html`;

export default defineConfig({
    testDir: _testsDir,
    // Folder for test artifacts such as screenshots, videos, traces, etc.
    outputDir: `${_testsOutputBaseDir}`,
    /* Run tests in files in parallel */
    fullyParallel: true,
    /* Fail the build on CI if you accidentally left test.only in the source code. */
    forbidOnly: _env.CI,
    /* Retry on CI only */
    retries: _env.CI ? 2 : 0,
    /* Opt out of parallel tests on CI. */
    // eslint-disable-next-line no-undefined
    workers: _env.CI ? 1 : undefined,
    // snapshotPathTemplate: "{testDir}/{testFilePath}-snapshots/{arg}-{projectName}{ext}",
    /* Reporter to use. See https://playwright.dev/docs/test-reporters */
    reporter: [
        ["list"],
        [
            "monocart-reporter",
            {
                name: "Academic Sign In",
                outputFile: _monoCartReporterOutputFile,
                coverage: {
                    // toIstanbul: true,
                    // lcov: true,
                    sourceFilter: (sourceName: any) => sourceName.search(/src\//u) !== -1,
                },
                tags: {
                    smoke: {
                        style: {
                            background: "#6F9913",
                        },
                        description: "This is Smoke Test",
                    },
                    critical: {
                        background: "#c00",
                    },
                },
                columns: (defaultColumns: any) => {
                    // prettier-ignore
                    const descriptionColumn = defaultColumns.find((column:any) => column.id === 'description');
                    if (!descriptionColumn) {
                        // only insert if doesn't exist already
                        // insert custom column(s) before a default column
                        // prettier-ignore
                        const index = defaultColumns.findIndex((column:any) => column.id === "duration");
                        defaultColumns.splice(index, 0, {
                            // define the column in reporter
                            id: "description",
                            name: "Description",
                            align: "left",
                            searchable: true,
                            detailed: true,
                            markdown: true,
                            styleMap: {
                                "font-weight": "normal",
                            },
                        });
                    }
                },
                visitor: (data: any, metadata: any, collect: any) => {
                    // auto collect data from the comments
                    const parserOptions = {
                        // Indicate the mode the code should be parsed in.
                        // Can be one of "script", "module", or "unambiguous". Defaults to "script".
                        sourceType: "module",
                        // enable typescript syntax. more https://babeljs.io/docs/babel-parser
                        plugins: ["typescript"],
                    };
                    const comments = collect.comments(parserOptions);
                    if (comments) {
                        // Append all collected comments data to report data
                        Object.assign(data, comments);
                    }
                },
            },
        ],
    ],
    /* Shared settings for all the projects below. See https://playwright.dev/docs/api/class-testoptions. */
    use: {
        /* Base URL to use in actions like `await page.goto('/')`. */
        baseURL: _webServerUrl,
        /* Collect trace when retrying the failed test. See https://playwright.dev/docs/trace-viewer */
        trace: "on-first-retry",
    },
    expect: {
        timeout: 10 * 1000, // 10 secs
    },
    /* Configure projects for major browsers */
    projects: [
        {
            name: "chromium",
            use: {
                ...devices["Desktop Chrome"],
                viewport: { width: 1920, height: 1080 },
                launchOptions: {
                    args: [
                        // "--remote-debugging-port=9222",
                        // "--start-maximized",
                        // "--disable-gpu",
                        // "--font-render-hinting=none",
                        // "--disable-skia-runtime-opts",
                        // "--disable-system-font-check",
                        // "--disable-font-subpixel-positioning",
                        // "--disable-lcd-text",
                        // "--disable-remote-fonts",
                    ],
                },
            },
        },

        // {
        //     name: "firefox",
        //     use: { ...devices["Desktop Firefox"], viewport: { width: 1920, height: 1080 } },
        // },

        // {
        //     name: "webkit",
        //     use: { ...devices["Desktop Safari"], viewport: { width: 1920, height: 1080 } },
        // },

        // /* Test against mobile viewports. */
        // {
        //     name: "Mobile Chrome",
        //     use: { ...devices["Pixel 5"] },
        // },
        // {
        //     name: "Mobile Safari",
        //     use: { ...devices["iPhone 12"] },
        // },

        // /* Test against branded browsers. */
        // {
        //     name: "Microsoft Edge",
        //     use: { ...devices["Desktop Edge"], channel: "msedge" },
        // },
        // {
        //     name: "Google Chrome",
        //     use: { ...devices["Desktop Chrome"], channel: "chrome" },
        // },
    ],

    /* Run your local dev server before starting the tests */
    webServer: {
        command: `npx ng serve --port ${_webServerPort}`,
        url: _webServerUrl,
        reuseExistingServer: !_env.CI,
        stdout: "pipe",
        timeout: 10 * 60 * 1000, // 10 min
    },
});