base page object model for proxying locator calls

end-to-end-tests/pageObjects/extensionsShortcutsPage.ts

@@ -17,6 +17,7 @@
 
 import { expect, type Page } from "@playwright/test";
 import { getModifierKey, getModifierSymbol } from "end-to-end-tests/utils";
+import BasePageObject from "./pageObject";
 
 function getExtensionShortcutsUrl(chromiumChannel: "chrome" | "msedge") {
   switch (chromiumChannel) {
@@ -42,13 +43,14 @@ async function getShortcut(page: Page): Promise<string> {
   return modifierKey === "Meta" ? `${modifierSymbol}M` : "Ctrl + M";
 }
 
-export class ExtensionsShortcutsPage {
+export class ExtensionsShortcutsPage extends BasePageObject {
   private readonly pageUrl: string;
 
   constructor(
-    private readonly page: Page,
+    page: Page,
     private readonly chromiumChannel: "chrome" | "msedge",
   ) {
+    super(page);
     this.pageUrl = getExtensionShortcutsUrl(this.chromiumChannel);
   }
 
@@ -57,88 +59,82 @@ export class ExtensionsShortcutsPage {
   }
 
   async goto() {
-    await this.page.goto(this.pageUrl);
+    await this.page().goto(this.pageUrl);
 
     if (this.chromiumChannel === "chrome") {
       await expect(
-        this.page.getByRole("heading", { name: /PixieBrix/ }),
+        this.getByRole("heading", { name: /PixieBrix/ }),
       ).toBeVisible();
     } else {
-      await expect(this.page.getByText(/PixieBrix/)).toBeVisible();
+      await expect(this.getByText(/PixieBrix/)).toBeVisible();
     }
   }
 
   async clearQuickbarShortcut() {
-    await this.page.bringToFront();
+    await this.page().bringToFront();
 
-    const shortcut = await getShortcut(this.page);
+    const shortcut = await getShortcut(this.page());
 
     if (this.chromiumChannel === "chrome") {
-      await expect(this.page.getByPlaceholder(/shortcut set: /i)).toHaveValue(
+      await expect(this.page().getByPlaceholder(/shortcut set: /i)).toHaveValue(
         shortcut,
       );
 
       // Clear the shortcut
-      await this.page.getByLabel("Edit shortcut Toggle Quick").click();
-      await this.page
-        .locator("extensions-keyboard-shortcuts #container")
-        .click();
+      await this.getByLabel("Edit shortcut Toggle Quick").click();
+      await this.locator("extensions-keyboard-shortcuts #container").click();
 
       await expect(
-        this.page.getByLabel(/Shortcut Toggle Quick Bar for PixieBrix/, {
+        this.getByLabel(/Shortcut Toggle Quick Bar for PixieBrix/, {
           exact: true,
         }),
       ).toBeEmpty();
     } else {
       await expect(
-        this.page.getByLabel(
+        this.getByLabel(
           /Type a shortcut that will Toggle Quick Bar for PixieBrix/,
         ),
       ).toHaveValue(shortcut);
 
-      await this.page.getByRole("button", { name: "Clear shortcut" }).click();
+      await this.getByRole("button", { name: "Clear shortcut" }).click();
 
       await expect(
-        this.page.getByLabel(
+        this.getByLabel(
           /Type a shortcut that will Toggle Quick Bar for PixieBrix/,
         ),
       ).toBeEmpty();
     }
   }
 
   async setQuickbarShortcut() {
-    await this.page.bringToFront();
+    await this.page().bringToFront();
 
-    const modifierKey = await getModifierKey(this.page);
-    const shortcut = await getShortcut(this.page);
+    const modifierKey = await getModifierKey(this.page());
+    const shortcut = await getShortcut(this.page());
 
     if (this.chromiumChannel === "chrome") {
       await expect(
-        this.page.getByLabel(/Shortcut Toggle Quick Bar for PixieBrix/),
+        this.getByLabel(/Shortcut Toggle Quick Bar for PixieBrix/),
       ).toBeEmpty();
 
-      await this.page.getByLabel("Edit shortcut Toggle Quick").click();
-      await this.page
-        .getByPlaceholder("Type a shortcut")
-        .press(`${modifierKey}+m`);
+      await this.getByLabel("Edit shortcut Toggle Quick").click();
+      await this.getByPlaceholder("Type a shortcut").press(`${modifierKey}+m`);
 
-      await this.page
-        .locator("extensions-keyboard-shortcuts #container")
-        .click();
+      await this.locator("extensions-keyboard-shortcuts #container").click();
 
-      await expect(this.page.getByPlaceholder(/shortcut set: /i)).toHaveValue(
+      await expect(this.getByPlaceholder(/shortcut set: /i)).toHaveValue(
         shortcut,
       );
     } else {
       const shortcutLabel = /type a shortcut that will toggle quick bar/i;
-      const input = this.page.getByLabel(shortcutLabel);
+      const input = this.getByLabel(shortcutLabel);
 
       await expect(input).toBeEmpty();
 
       await input.click();
       await input.press(`${modifierKey}+m`);
 
-      await this.page.getByText("Keyboard ShortcutsPixieBrix").click();
+      await this.getByText("Keyboard ShortcutsPixieBrix").click();
 
       await expect(input).toHaveValue(shortcut);
     }

end-to-end-tests/pageObjects/floatingActionButton.ts

@@ -15,13 +15,11 @@
  * along with this program.  If not, see <http://www.gnu.org/licenses/>.
  */
 
-import { type Page } from "@playwright/test";
-
-export class FloatingActionButton {
-  constructor(private readonly page: Page) {}
+import BasePageObject from "./pageObject";
 
+export class FloatingActionButton extends BasePageObject {
   async getActionButton() {
-    return this.page.getByRole("button", {
+    return this.getByRole("button", {
       name: "Toggle the PixieBrix Sidebar",
     });
   }
@@ -35,7 +33,7 @@ export class FloatingActionButton {
     const actionButton = await this.getActionButton();
     await actionButton.hover();
 
-    const hideButton = this.page.getByRole("button", {
+    const hideButton = this.getByRole("button", {
       name: "Hide Button",
     });
     await hideButton.click();

end-to-end-tests/pageObjects/pageObject.ts

@@ -0,0 +1,49 @@
+/*
+ * Copyright (C) 2024 PixieBrix, Inc.
+ *
+ * This program is free software: you can redistribute it and/or modify
+ * it under the terms of the GNU Affero General Public License as published by
+ * the Free Software Foundation, either version 3 of the License, or
+ * (at your option) any later version.
+ *
+ * This program is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+ * GNU Affero General Public License for more details.
+ *
+ * You should have received a copy of the GNU Affero General Public License
+ * along with this program.  If not, see <http://www.gnu.org/licenses/>.
+ */
+
+import { type Locator, type Page } from "playwright";
+
+class BasePageObject implements Partial<Locator> {
+  private readonly baseLocator: Locator;
+  constructor(locatorOrPage: Locator | Page) {
+    if ("page" in locatorOrPage) {
+      this.baseLocator = locatorOrPage;
+    } else {
+      this.baseLocator = locatorOrPage.locator("body");
+    }
+
+    return new Proxy(this, {
+      get: function (target, prop, receiver) {
+        if (Reflect.has(target, prop)) {
+          return Reflect.get(target, prop, receiver);
+        } else if (Reflect.has(target.baseLocator, prop)) {
+          if (typeof target.baseLocator[prop] === "function") {
+            return function (...args) {
+              return target.baseLocator[prop].apply(target.baseLocator, args);
+            };
+          } else {
+            return target.baseLocator[prop];
+          }
+        }
+      },
+    });
+  }
+}
+
+export default BasePageObject as unknown as new (
+  locatorOrPage: Locator | Page,
+) => Locator;