@atomicsmash/test-utils 1.0.0

package/dist/index.d.ts

@@ -0,0 +1,32 @@
+import type { Page, BrowserContext, PlaywrightTestConfig } from "@playwright/test";
+import type { SerialFrameSelector } from "axe-core";
+export type PageList = {
+    url: string;
+    name: string;
+    slug?: string;
+    restrictedAccess?: boolean;
+}[];
+export type AuthenticatePageFunction = ({ page }: {
+    page: Page;
+}, use: (r: Page) => Promise<void>) => Promise<void>;
+export declare const playwrightProjectsConfig: PlaywrightTestConfig["projects"];
+export declare const getLighthouseTest: (logInUser: AuthenticatePageFunction) => import("@playwright/test").TestType<import("@playwright/test").PlaywrightTestArgs & import("@playwright/test").PlaywrightTestOptions & {
+    authenticatedPage: Page;
+    context: BrowserContext;
+}, import("@playwright/test").PlaywrightWorkerArgs & import("@playwright/test").PlaywrightWorkerOptions & {
+    port: number;
+}>;
+type LighthouseTestFunction = Parameters<ReturnType<typeof getLighthouseTest>>[1];
+export declare const doLighthouseTest: (pageToTest: PageList[number], type: "desktop" | "mobile") => LighthouseTestFunction;
+export declare function checkAccessibility(page: Page, { includes, excludes, }?: {
+    includes?: SerialFrameSelector[];
+    excludes?: SerialFrameSelector[];
+}): Promise<void>;
+export declare const checkPrivilegedPages: (pagesToTest: PageList) => ({ page }: {
+    page: Page;
+}) => Promise<void>;
+export declare const checkForLoremIpsum: (pagesToTest: PageList) => ({ authenticatedPage }: {
+    authenticatedPage: Page;
+}) => Promise<void>;
+export {};
+//# sourceMappingURL=index.d.ts.map

package/dist/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EACX,IAAI,EACJ,cAAc,EACd,oBAAoB,EACpB,MAAM,kBAAkB,CAAC;AAC1B,OAAO,KAAK,EAAE,mBAAmB,EAAE,MAAM,UAAU,CAAC;AAapD,MAAM,MAAM,QAAQ,GAAG;IACtB,GAAG,EAAE,MAAM,CAAC;IACZ,IAAI,EAAE,MAAM,CAAC;IACb,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,gBAAgB,CAAC,EAAE,OAAO,CAAC;CAC3B,EAAE,CAAC;AAEJ,MAAM,MAAM,wBAAwB,GAAG,CACtC,EAAE,IAAI,EAAE,EAAE;IAAE,IAAI,EAAE,IAAI,CAAA;CAAE,EACxB,GAAG,EAAE,CAAC,CAAC,EAAE,IAAI,KAAK,OAAO,CAAC,IAAI,CAAC,KAC3B,OAAO,CAAC,IAAI,CAAC,CAAC;AAEnB,eAAO,MAAM,wBAAwB,EAAE,oBAAoB,CAAC,UAAU,CA2BrE,CAAC;AAEF,eAAO,MAAM,iBAAiB,cAAe,wBAAwB;uBAE9C,IAAI;aAAW,cAAc;;UAC1C,MAAM;EA2Bf,CAAC;AAEF,KAAK,sBAAsB,GAAG,UAAU,CACvC,UAAU,CAAC,OAAO,iBAAiB,CAAC,CACpC,CAAC,CAAC,CAAC,CAAC;AAEL,eAAO,MAAM,gBAAgB,EAAE,CAC9B,UAAU,EAAE,QAAQ,CAAC,MAAM,CAAC,EAC5B,IAAI,EAAE,SAAS,GAAG,QAAQ,KACtB,sBA6BH,CAAC;AAEH,wBAAsB,kBAAkB,CACvC,IAAI,EAAE,IAAI,EACV,EACC,QAAQ,EACR,QAAQ,GACR,GAAE;IACF,QAAQ,CAAC,EAAE,mBAAmB,EAAE,CAAC;IACjC,QAAQ,CAAC,EAAE,mBAAmB,EAAE,CAAC;CAC5B,iBA6BN;AAED,eAAO,MAAM,oBAAoB;UAEP,IAAI;mBAS5B,CAAC;AACH,eAAO,MAAM,kBAAkB;uBAEqB,IAAI;mBAStD,CAAC"}

package/dist/index.js

@@ -0,0 +1,140 @@
+import os from "node:os";
+import path from "node:path";
+import { AxeBuilder } from "@axe-core/playwright";
+import { test as base, chromium, devices } from "@playwright/test";
+import getPort from "get-port";
+import lighthouseDesktopConfig from "lighthouse/core/config/lr-desktop-config.js";
+import lighthouseMobileConfig from "lighthouse/core/config/lr-mobile-config.js";
+import { playAudit } from "playwright-lighthouse";
+const { expect } = base;
+export const playwrightProjectsConfig = [
+    {
+        name: "chromium",
+        use: { ...devices["Desktop Chrome"] },
+        grepInvert: /@mobile @lighthouse/,
+    },
+    {
+        name: "firefox",
+        use: { ...devices["Desktop Firefox"] },
+        grepInvert: /@lighthouse/,
+    },
+    {
+        name: "webkit",
+        use: { ...devices["Desktop Safari"] },
+        grepInvert: /@lighthouse/,
+    },
+    /* Test against mobile viewports. */
+    {
+        name: "Mobile Chrome",
+        use: { ...devices["Pixel 5"] },
+        grepInvert: /@desktop @lighthouse/,
+    },
+    {
+        name: "Mobile Safari",
+        use: { ...devices["iPhone 12"] },
+        grepInvert: /@lighthouse/,
+    },
+];
+export const getLighthouseTest = (logInUser) => {
+    const lighthouseTest = base.extend({
+        port: [
+            // eslint-disable-next-line no-empty-pattern
+            async ({}, use) => {
+                // Assign a unique port for each playwright worker to support parallel tests
+                const port = await getPort();
+                await use(port);
+            },
+            { scope: "worker" },
+        ],
+        context: [
+            async ({ port }, use) => {
+                const userDataDir = path.join(os.tmpdir(), "pw", String(Math.random()));
+                const context = await chromium.launchPersistentContext(userDataDir, {
+                    args: [`--remote-debugging-port=${port}`],
+                });
+                await use(context);
+                await context.close();
+            },
+            { scope: "test" },
+        ],
+        authenticatedPage: [logInUser, { scope: "test" }],
+    });
+    lighthouseTest.describe.configure({ mode: "parallel", retries: 3 });
+    return lighthouseTest;
+};
+export const doLighthouseTest = (pageToTest, type) => async function ({ port, authenticatedPage }) {
+    await authenticatedPage.goto(pageToTest.url);
+    await playAudit({
+        page: authenticatedPage,
+        thresholds: {
+            performance: 85,
+            accessibility: 85,
+            "best-practices": 85,
+            seo: 85,
+        },
+        port: port,
+        reports: {
+            formats: {
+                html: true,
+            },
+            directory: "lighthouse/latest-lighthouse-report",
+            name: `${pageToTest.slug ?? slugify(pageToTest.name)}-${type}`,
+        },
+        config: (type === "desktop"
+            ? lighthouseDesktopConfig
+            : lighthouseMobileConfig),
+        ignoreError: true,
+    });
+    await authenticatedPage.goto(`file://${process.cwd()}/lighthouse/latest-lighthouse-report/${pageToTest.slug ?? slugify(pageToTest.name)}-${type}.html`);
+};
+export async function checkAccessibility(page, { includes, excludes, } = {}) {
+    let builder;
+    builder = new AxeBuilder({ page });
+    if (includes) {
+        for (const include of includes) {
+            builder = builder.include(include);
+        }
+    }
+    if (excludes) {
+        for (const exclude of excludes) {
+            builder = builder.exclude(exclude);
+        }
+    }
+    builder = builder.exclude("#userback_button_container"); // Ignore userback testing tool
+    const accessibilityScanResults = await builder.analyze();
+    expect(accessibilityScanResults.violations.filter((violation) => {
+        if (violation.id === "aria-allowed-attr" &&
+            violation.nodes[0].html.startsWith("<button") &&
+            violation.nodes[0].html.includes(`role="switch"`)) {
+            return false;
+        }
+        return true;
+    })).toEqual([]);
+}
+export const checkPrivilegedPages = (pagesToTest) => async ({ page }) => {
+    for (const pageToTest of pagesToTest.filter((page) => page.restrictedAccess)) {
+        const response = await page.goto(pageToTest.url);
+        expect(response).not.toBeNull();
+        const nonNullResponse = response;
+        expect(nonNullResponse.status()).toBe(401);
+    }
+};
+export const checkForLoremIpsum = (pagesToTest) => async ({ authenticatedPage }) => {
+    for (const pageToTest of pagesToTest) {
+        await authenticatedPage.goto(pageToTest.url);
+        await expect(authenticatedPage.getByText("Lorem ipsum")).not.toBeAttached({
+            timeout: 100,
+        });
+    }
+};
+function slugify(stringToSlugify) {
+    // REGEX_1: Match any character that isn't alphanumeric, underscore, whitespace and underscore
+    // REGEX_2: Match any character that is underscore, whitespace and underscore
+    // REGEX_3: Match any hyphens at the start or the end of the string
+    return stringToSlugify
+        .toLowerCase()
+        .trim()
+        .replace(/[^\w\s-]/g, "")
+        .replace(/[\s_-]+/g, "-")
+        .replace(/^-+|(?<!-)-+$/g, "");
+}

package/package.json

@@ -0,0 +1,55 @@
+{
+	"name": "@atomicsmash/test-utils",
+	"version": "1.0.0",
+	"type": "module",
+	"description": "A collection of helper functions for automated testing with Playwright.",
+	"keywords": [
+		"playwright",
+		"testing",
+		"automated test",
+		"test"
+	],
+	"homepage": "https://www.atomicsmash.co.uk/",
+	"license": "GPL-3.0-or-later",
+	"author": {
+		"name": "Atomic Smash",
+		"email": "npm@atomicsmash.co.uk",
+		"url": "https://www.atomicsmash.co.uk/"
+	},
+	"repository": {
+		"type": "git",
+		"url": "https://github.com/AtomicSmash/packages",
+		"directory": "packages/test-utils"
+	},
+	"files": [
+		"./dist/**/*"
+	],
+	"main": "./dist/index.js",
+	"types": "./dist/index.d.ts",
+	"publishConfig": {
+		"access": "public"
+	},
+	"scripts": {
+		"dev": "tsc --build --watch tsconfig.build.json",
+		"build": "npm-run-all clean compile",
+		"clean": "del-cli ./dist/ *.tsbuildinfo",
+		"compile": "tsc --build tsconfig.build.json",
+		"test": "TZ=\"Europe/Istanbul\" vitest run",
+		"test:ui": "TZ=\"Europe/Istanbul\" vitest --ui",
+		"test:coverage": "TZ=\"Europe/Istanbul\" vitest run --coverage",
+		"lint": "run-p lint:*",
+		"lint:eslint": "eslint --cache --cache-location ./node_modules/.cache/eslint . --ext .js,.ts,.jsx,.tsx",
+		"lint:types": "tsc"
+	},
+	"peerDependencies": {
+		"@playwright/test": "^1.35.1"
+	},
+	"dependencies": {
+		"@axe-core/playwright": "^4.7.3",
+		"get-port": "^7.0.0",
+		"playwright-lighthouse": "^3.1.0"
+	},
+	"devDependencies": {
+		"lighthouse": "^11.0.0"
+	}
+}