pomwright 1.3.0 → 1.5.0

package/intTestV2/page-object-models/testApp/pages/testfilters/testfilters.locatorSchema.ts

@@ -0,0 +1,114 @@
+import type { LocatorRegistry } from "pomwright";
+
+export type Paths =
+	| "one"
+	| "one.two"
+	| "body"
+	| "body.section"
+	| "body.section.heading"
+	| "body.section.button"
+	| "body.section@playground"
+	| "body.section@playground.heading"
+	| "body.section@playground.button"
+	| "body.section@playground.button@red"
+	| "body.section@playground.button@reset"
+	/**
+	 * Fictional LocatorSchema do not exist in the DOM of the /testfilters page:
+	 */
+	| "fictional.filter@undefined"
+	| "fictional.filter@optionsUndefined"
+	| "fictional.locatorWithfilter@allOptions"
+	| "fictional.locatorAndOptionsWithfilter@allOptions"
+	| "fictional.filter@has"
+	| "fictional.filter@hasNot"
+	| "fictional.filter@hasText"
+	| "fictional.filter@hasNotText"
+	| "fictional.filter@hasNotText.filter@hasText"
+	| "fictional.filter@hasNotText.filter@hasText.filter@hasNotText"
+	| "fictional.filter@hasNotText.filter@hasText.filter@hasNotText.filter@hasText";
+
+export function defineLocators(registry: LocatorRegistry<Paths>) {
+	registry.add("one").locator("div.one");
+
+	registry.add("one.two").locator("div.two").filter({ hasText: "two" }).nth(0);
+
+	registry.add("body").locator("body");
+
+	registry.add("body.section").locator("section");
+
+	registry.add("body.section.heading").getByRole("heading", { level: 2 });
+
+	registry.add("body.section.button").getByRole("button");
+
+	registry.add("body.section@playground").locator("section", { hasText: /Playground/i });
+
+	registry
+		.add("body.section@playground.heading")
+		.getByRole("heading", { name: "Primary Colors Playground", level: 2, exact: true });
+
+	registry.add("body.section@playground.button").getByRole("button");
+
+	registry.add("body.section@playground.button@red").getByRole("button", { name: "Red" });
+
+	registry.add("body.section@playground.button@reset").getByRole("button", { name: "Reset Color" });
+
+	/** --------------------------- Fictional LocatorSchema ---------------------------
+	 * The following LocatorSchema DO NOT exist in the DOM of the /testfilters page
+	 *
+	 * They are used for testing that the getNestedLocator/getLocator methods correctly
+	 * produces correct locator selector strings for LocatorSchema with/without filter.
+	 */
+
+	registry.add("fictional.filter@undefined").getByRole("button");
+
+	registry
+		.add("fictional.filter@optionsUndefined")
+		.getByRole("button")
+		.filter({ has: undefined, hasNot: undefined, hasText: undefined, hasNotText: undefined });
+
+	registry
+		.add("fictional.locatorWithfilter@allOptions")
+		.getByRole("button")
+		.filter({
+			has: "body.section",
+			hasNot: "body.section.button",
+			hasText: "hasText",
+			hasNotText: "hasNotText",
+		});
+
+	registry
+		.add("fictional.locatorAndOptionsWithfilter@allOptions")
+		.getByRole("button", { name: "roleOptions" })
+		.filter({
+			has: "body.section.heading",
+			hasNot: "body.section.button",
+			hasText: "hasText",
+			hasNotText: "hasNotText",
+		});
+
+	registry
+		.add("fictional.filter@has")
+		.getByRole("button")
+		.filter({ has: "body.section.heading" });
+
+	registry
+		.add("fictional.filter@hasNot")
+		.getByRole("button")
+		.filter({ hasNot: "body.section.button" });
+
+	registry.add("fictional.filter@hasText").getByRole("button").filter({ hasText: "hasText" });
+
+	registry.add("fictional.filter@hasNotText").getByRole("button").filter({ hasNotText: "hasNotText" });
+
+	registry.add("fictional.filter@hasNotText.filter@hasText").getByRole("button").filter({ hasText: "hasText" });
+
+	registry
+		.add("fictional.filter@hasNotText.filter@hasText.filter@hasNotText")
+		.getByRole("button")
+		.filter({ hasNotText: "hasNotText" });
+
+	registry
+		.add("fictional.filter@hasNotText.filter@hasText.filter@hasNotText.filter@hasText")
+		.getByRole("button")
+		.filter({ hasText: "hasText" });
+}

package/intTestV2/page-object-models/testApp/pages/testfilters/testfilters.page.ts

@@ -0,0 +1,23 @@
+import { type Page, test } from "@playwright/test";
+import TestApp from "../../testApp.base";
+import { defineLocators, type Paths } from "./testfilters.locatorSchema";
+
+export default class TestFiltersV2 extends TestApp<Paths> {
+	constructor(page: Page) {
+		super(page, "/testfilters");
+	}
+
+	protected defineLocators(): void {
+		defineLocators(this.locatorRegistry);
+	}
+
+	protected pageActionsToPerformAfterNavigation(): (() => Promise<void>)[] | null {
+		return [];
+	}
+
+	async expectThisPage() {
+		await test.step(`Expect Page: ${this.urlPath}`, async () => {
+			await this.page.waitForURL(this.fullUrl);
+		});
+	}
+}

package/intTestV2/page-object-models/testApp/testApp.base.ts

@@ -0,0 +1,20 @@
+import type { Page } from "@playwright/test";
+import { type NavigationOptions, PageObject, type UrlPathTypeFromOptions, type UrlTypeOptions } from "pomwright";
+
+type BaseOptions<Options extends UrlTypeOptions> = {
+	baseUrlType: string;
+	urlPathType: UrlPathTypeFromOptions<Options>;
+};
+
+export default abstract class TestApp<
+	Paths extends string,
+	Options extends UrlTypeOptions = { baseUrlType: string; urlPathType: string },
+> extends PageObject<Paths, BaseOptions<Options>> {
+	protected constructor(
+		page: Page,
+		urlPath: UrlPathTypeFromOptions<BaseOptions<Options>>,
+		options?: { label?: string; navOptions?: NavigationOptions },
+	) {
+		super(page, "http://localhost:8080", urlPath, options);
+	}
+}

package/intTestV2/playwright.config.ts

@@ -0,0 +1,54 @@
+import { defineConfig, devices } from "@playwright/test";
+import dotenv from "dotenv";
+import { baseConfig } from "../playwright.base";
+
+dotenv.config({ override: false, quiet: true });
+
+export default defineConfig({
+	...baseConfig,
+	testDir: "./tests",
+
+	webServer: process.env.CI
+		? [
+				{
+					command: "pnpm start",
+					url: "http://localhost:8080/",
+					timeout: 5 * 60_000,
+					reuseExistingServer: false,
+					ignoreHTTPSErrors: false,
+				},
+			]
+		: [
+				{
+					command: "pnpm start",
+					url: "http://localhost:8080/",
+					timeout: 5 * 60_000,
+					reuseExistingServer: true,
+					ignoreHTTPSErrors: false,
+				},
+			],
+
+	projects: [
+		{
+			name: "chromium",
+			use: {
+				...(baseConfig.use ?? {}),
+				...devices["Desktop Chrome"],
+			},
+		},
+		{
+			name: "firefox",
+			use: {
+				...(baseConfig.use ?? {}),
+				...devices["Desktop Firefox"],
+			},
+		},
+		{
+			name: "webkit",
+			use: {
+				...(baseConfig.use ?? {}),
+				...devices["Desktop Safari"],
+			},
+		},
+	],
+});

package/intTestV2/server.js

@@ -0,0 +1,216 @@
+const express = require("express");
+const path = require("node:path");
+
+const app = express();
+const port = 8080;
+
+// Serve static files from the "test-data/staticPage" directory
+app.use(express.static(path.join(__dirname, "test-data/staticPage")));
+
+// Route to handle "/testpath/:color"
+app.get("/testpath/:color", (req, res) => {
+	const color = req.params.color;
+
+	// Ensure the color is a valid 3 or 6-character hex code
+	if (!/^([0-9A-Fa-f]{3}|[0-9A-Fa-f]{6})$/.test(color)) {
+		res.status(400).send("Invalid color code.");
+		return;
+	}
+
+	// Return a simple HTML page with the background set to the color
+	res.send(`
+    <html>
+      <body style="background-color: #${color}; height: 100vh; margin: 0; display: flex; justify-content: center; align-items: center; flex-direction: column;">
+        <h1 style="border: 3px solid black; padding: 10px; background-color: #E0E0E0; color: black;">Your Random Color is:</h1>
+        <table role="table" aria-label="Hex Code Information" style="text-align: center; font-size: 24px; background-color: #E0E0E0; color: black; border-collapse: collapse;">
+          <tr role="row">
+            <td role="rowheader" aria-label="Hex Code Header" style="border: 3px solid black; padding: 10px; background-color: silver;">Hex Code:</td>
+          </tr>
+          <tr role="row">
+            <td role="cell" aria-label="color code" style="border: 3px solid black; padding: 10px;">#${color}</td>
+          </tr>
+        </table>
+      </body>
+    </html>
+  `);
+});
+
+// Route to handle "/testpath" with a link that generates a new random color on click
+app.get("/testpath", (req, res) => {
+	res.send(`
+    <html>
+      <body style="display: flex; justify-content: center; align-items: center; height: 100vh; margin: 0;">
+        <a id="randomColorLink" href="#" style="font-size: 24px;" aria-label="Random Color Link">Go to Random Color Page</a>
+
+        <script>
+          // Function to generate a random hex color of either 3 or 6 digits
+          function generateRandomColor() {
+            // Randomly choose between generating a 3-character or 6-character hex color
+            const isShort = Math.random() < 0.5;
+            let randomColor = Math.floor(Math.random() * (isShort ? 4095 : 16777215)).toString(16);
+            // Pad the color if necessary to make it 3 or 6 characters long
+            return isShort ? randomColor.padStart(3, '0') : randomColor.padStart(6, '0');
+          }
+
+          // Add a click event listener to the link
+          document.getElementById('randomColorLink').addEventListener('click', function(event) {
+            event.preventDefault(); // Prevent the default action of the link
+            const randomColor = generateRandomColor(); // Generate a new random color
+            window.location.href = '/testpath/' + randomColor; // Navigate to the random color URL
+          });
+        </script>
+      </body>
+    </html>
+  `);
+});
+
+// Route to handle "/testfilters"
+app.get("/testfilters", (req, res) => {
+	res.send(`
+    <html>
+      <body style="margin: 0; padding: 20px; font-family: Arial, sans-serif;">
+        <section id="section1" style="margin-bottom: 20px; border: 1px solid black; padding: 10px;">
+          <h2 style="color: silver; text-shadow: 1px 1px 1px black;">Primary Colors Section</h2>
+          <button style="background-color: red; color: white; padding: 10px;" onclick="changeColor('section1', 'red')">Red</button>
+          <button style="background-color: blue; color: white; padding: 10px;" onclick="changeColor('section1', 'blue')">Blue</button>
+          <button style="background-color: green; color: white; padding: 10px;" onclick="changeColor('section1', 'green')">Green</button>
+          <button style="background-color: lightgray; color: black; padding: 10px;" onclick="resetColor('section1')">Reset Color</button>
+        </section>
+
+        <section id="section2" style="margin-bottom: 20px; border: 1px solid black; padding: 10px;">
+          <h2 style="color: silver; text-shadow: 1px 1px 1px black;">Primary Colors Explorer</h2>
+          <button style="background-color: red; color: white; padding: 10px;" onclick="changeColor('section2', 'red')">Red</button>
+          <button style="background-color: blue; color: white; padding: 10px;" onclick="changeColor('section2', 'blue')">Blue</button>
+          <button style="background-color: green; color: white; padding: 10px;" onclick="changeColor('section2', 'green')">Green</button>
+          <button style="background-color: lightgray; color: black; padding: 10px;" onclick="resetColor('section2')">Reset Color</button>
+        </section>
+
+        <section id="section3" aria-label="Accessible Section" style="margin-bottom: 20px; border: 1px solid black; padding: 10px;">
+          <h2 style="color: silver; text-shadow: 1px 1px 1px black;">Primary Colors Test</h2>
+          <button style="background-color: red; color: white; padding: 10px;" onclick="changeColor('section3', 'red')">Red</button>
+          <button style="background-color: blue; color: white; padding: 10px;" onclick="changeColor('section3', 'blue')">Blue</button>
+          <button style="background-color: green; color: white; padding: 10px;" onclick="changeColor('section3', 'green')">Green</button>
+          <button style="background-color: lightgray; color: black; padding: 10px;" onclick="resetColor('section3')">Reset Color</button>
+        </section>
+
+        <section id="section4" style="margin-bottom: 20px; border: 1px solid black; padding: 10px;">
+          <h2 style="color: silver; text-shadow: 1px 1px 1px black;">Primary Colors Playground</h2>
+          <button style="background-color: red; color: white; padding: 10px;" onclick="changeColor('section4', 'red')">Red</button>
+          <button style="background-color: blue; color: white; padding: 10px;" onclick="changeColor('section4', 'blue')">Blue</button>
+          <button style="background-color: green; color: white; padding: 10px;" onclick="changeColor('section4', 'green')">Green</button>
+          <button style="background-color: lightgray; color: black; padding: 10px;" onclick="resetColor('section4')">Reset Color</button>
+        </section>
+
+        <script>
+          function changeColor(sectionId, color) {
+            document.getElementById(sectionId).style.backgroundColor = color;
+          }
+
+          function resetColor(sectionId) {
+            document.getElementById(sectionId).style.backgroundColor = "";
+          }
+        </script>
+      </body>
+    </html>
+  `);
+});
+
+app.get("/iframe", (_req, res) => {
+	res.send(`
+    <html>
+      <body style="margin: 0; padding: 20px; font-family: Arial, sans-serif;">
+        <h1>Iframe playground</h1>
+
+        <section id="sectionA" style="margin-bottom: 20px; border: 2px solid #333; padding: 10px;">
+          <h2>Section A</h2>
+          <iframe
+            id="iframeA"
+            title="iframeA"
+            src="/iframe/a"
+            style="width: 400px; height: 200px; border: 3px solid #0066cc;"
+          ></iframe>
+        </section>
+
+        <section id="sectionB" style="margin-bottom: 20px; border: 2px solid #333; padding: 10px;">
+          <h2>Section B</h2>
+          <iframe
+            id="iframeB"
+            title="iframeB"
+            src="/iframe/b"
+            style="width: 400px; height: 240px; border: 3px solid #cc6600;"
+          ></iframe>
+        </section>
+      </body>
+    </html>
+  `);
+});
+
+app.get("/iframe/a", (_req, res) => {
+	res.send(`
+    <html>
+      <body style="margin: 0; padding: 10px; font-family: Arial, sans-serif;">
+        <h3>Frame A</h3>
+        <button id="toggleA" data-testid="toggle-a" aria-pressed="false">Toggle A: Off</button>
+        <script>
+          const buttonA = document.getElementById('toggleA');
+          buttonA.addEventListener('click', () => {
+            const pressed = buttonA.getAttribute('aria-pressed') === 'true';
+            buttonA.setAttribute('aria-pressed', (!pressed).toString());
+            buttonA.textContent = pressed ? 'Toggle A: Off' : 'Toggle A: On';
+          });
+        </script>
+      </body>
+    </html>
+  `);
+});
+
+app.get("/iframe/b", (_req, res) => {
+	res.send(`
+    <html>
+      <body style="margin: 0; padding: 10px; font-family: Arial, sans-serif;">
+        <h3>Frame B</h3>
+        <button id="toggleB" data-testid="toggle-b" aria-pressed="false">Toggle B: Off</button>
+
+        <iframe
+          id="iframeC"
+          title="iframeC"
+          src="/iframe/c"
+          style="display: block; margin-top: 12px; width: 320px; height: 160px; border: 3px solid #009933;"
+        ></iframe>
+
+        <script>
+          const buttonB = document.getElementById('toggleB');
+          buttonB.addEventListener('click', () => {
+            const pressed = buttonB.getAttribute('aria-pressed') === 'true';
+            buttonB.setAttribute('aria-pressed', (!pressed).toString());
+            buttonB.textContent = pressed ? 'Toggle B: Off' : 'Toggle B: On';
+          });
+        </script>
+      </body>
+    </html>
+  `);
+});
+
+app.get("/iframe/c", (_req, res) => {
+	res.send(`
+    <html>
+      <body style="margin: 0; padding: 10px; font-family: Arial, sans-serif;">
+        <h3>Frame C</h3>
+        <button id="toggleC" data-testid="toggle-c" aria-pressed="false">Toggle C: Off</button>
+        <script>
+          const buttonC = document.getElementById('toggleC');
+          buttonC.addEventListener('click', () => {
+            const pressed = buttonC.getAttribute('aria-pressed') === 'true';
+            buttonC.setAttribute('aria-pressed', (!pressed).toString());
+            buttonC.textContent = pressed ? 'Toggle C: Off' : 'Toggle C: On';
+          });
+        </script>
+      </body>
+    </html>
+  `);
+});
+
+// Start the server
+app.listen(port, () => {
+	console.log(`Server running at http://localhost:${port}/`);
+});