Playwright tests for CSS selectors (#69)

* Update default selectors

* Explore playwright tests

* Simplify test structure and rename file

* Add github workflow

* Rename workflow job name

* Remove testing branch from workflow

* Add build to lint command:

Since `pnpm dev` runs a special build that injects scripts for reloading content, it doesn't pass the linter

* Disable persistency for performance

* Remove vscode addon specific comment syntax

.github/workflows/css-selectors.yaml

@@ -0,0 +1,34 @@
+name: CSS Selectors
+
+on:
+    push:
+        branches: [main]
+    pull_request:
+        branches: [main]
+
+jobs:
+    css-selectors:
+        runs-on: ubuntu-latest
+
+        steps:
+            - uses: actions/checkout@v4
+
+            - name: Install pnpm
+              uses: pnpm/action-setup@v4
+              with:
+                  version: 9
+
+            - name: Setup node.js
+              uses: actions/setup-node@v4
+              with:
+                  node-version: 20
+                  cache: "pnpm"
+
+            - name: Install dependencies
+              run: pnpm install
+
+            - name: Install Playwright Browsers
+              run: pnpm playwright install --with-deps chromium
+
+            - name: Run Playwright tests
+              run: pnpm test

.gitignore

@@ -3,3 +3,7 @@ dist
 *web-ext-config.mjs
 .webextrc*
 *wsl.localhost*
+/test-results/
+/playwright-report/
+/blob-report/
+/playwright/.cache/

manifest.json

@@ -25,7 +25,8 @@
     },
     "{{firefox}}.background": {
         "scripts": ["scripts/background.ts"],
-        "type": "module"
+        "type": "module",
+        "persistent": false
     },
     "options_ui": {
         "page": "ui/options.html",

package.json

@@ -11,9 +11,11 @@
         "dev": "vite dev",
         "dev:chrome": "TARGET=chrome vite dev",
         "dev:verbose": "pnpm dev --verbose",
-        "lint": "web-ext lint --source-dir dist/firefox",
+        "lint": "pnpm build && web-ext lint --source-dir dist/firefox",
         "build": "vite build",
-        "build:chrome": "TARGET=chrome vite build"
+        "build:chrome": "TARGET=chrome vite build",
+        "test": "playwright test",
+        "test:ui": "playwright test --ui"
     },
     "repository": {
         "type": "git",
@@ -35,7 +37,9 @@
     },
     "homepage": "https://github.com/Seismix/royalrecap#readme",
     "devDependencies": {
+        "@playwright/test": "^1.46.0",
         "@types/firefox-webext-browser": "^120.0.4",
+        "@types/node": "^22.1.0",
         "@types/webextension-polyfill": "^0.10.7",
         "typescript": "^5.5.2",
         "web-ext": "^8.2.0",

playwright.config.ts

@@ -0,0 +1,46 @@
+import { defineConfig, devices } from "@playwright/test"
+
+/**
+ * Read environment variables from file.
+ * https://github.com/motdotla/dotenv
+ */
+// import dotenv from 'dotenv';
+// dotenv.config({ path: path.resolve(__dirname, '.env') });
+
+/**
+ * See https://playwright.dev/docs/test-configuration.
+ */
+export default defineConfig({
+    testDir: "./tests",
+    /* 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 ? 1 : 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",
+    /* 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: 'http://127.0.0.1:3000',
+
+        /* Collect trace when retrying the failed test. See https://playwright.dev/docs/trace-viewer */
+        trace: "on-first-retry",
+    },
+
+    /* Configure projects for major browsers */
+    projects: [
+        {
+            name: "chromium",
+            use: { ...devices["Desktop Chrome"] },
+        },
+
+        // {
+        //     name: "firefox",
+        //     use: { ...devices["Desktop Firefox"] },
+        // },
+    ],
+})

scripts/defaults.ts

@@ -6,14 +6,15 @@ const DEFAULTS: ExtensionSettings = {
     chapterContent: ".chapter-inner",
     chapterTitle: "h1.font-white",
     fictionTitle: "h2.font-white",
-    togglePlacement: ".actions",
+    togglePlacement:
+        "div.portlet:nth-child(2) > div:nth-child(1) > div:nth-child(2)",
     settingsPlacement:
         "#settings > div:nth-child(1) > div:nth-child(1) > div:nth-child(3)",
     smoothScroll: true,
     autoExpand: false,
     blurb: ".description",
     closeButtonSelector:
-        "#settings > div:nth-child(1) > div:nth-child(1) > div:nth-child(3) > button:nth-child(2)",
+        "#settings > div:nth-child(1) > div:nth-child(1) > div:nth-child(3) > button:last-child",
 }
 
 export default DEFAULTS

tests/selectors.test.ts

@@ -0,0 +1,44 @@
+import { Page } from "@playwright/test"
+import DEFAULTS from "../scripts/defaults"
+import { expect, test } from "./utils/fixtures"
+
+/** Helper function to check if a selector exists and is visible */
+async function checkSelector(page: Page, selector: string) {
+    const element = page.locator(selector)
+    const count = await element.count()
+    expect(count).toBe(1)
+}
+
+test.describe("Chapter Page", () => {
+    let page: Page
+
+    test.beforeAll(async ({ browser }) => {
+        page = await browser.newPage()
+
+        await page.goto(
+            "https://www.royalroad.com/fiction/63759/super-supportive/chapter/1097958/two-mistakes",
+        )
+    })
+
+    test.afterAll(async () => {
+        await page.close()
+    })
+
+    for (const [key, selector] of Object.entries(DEFAULTS)) {
+        // Skip 'blurb' because it's not present on the chapter page
+        if (typeof selector === "string" && key !== "blurb") {
+            test(`${key} selector exists`, async () => {
+                await checkSelector(page, selector)
+            })
+        }
+    }
+})
+
+test.describe("Fiction Page", () => {
+    test("blurb selector exists", async ({ page }) => {
+        await page.goto(
+            "https://www.royalroad.com/fiction/63759/super-supportive",
+        )
+        await checkSelector(page, DEFAULTS.blurb)
+    })
+})