Add playwright tests for example site pages

.github/workflows/test.yml

@@ -39,3 +39,6 @@ jobs:
 
     - name: Run tests
       run: npm run test
+
+    - name: Run Playwright tests
+      run: npm run test:playwright

.husky/pre-commit

@@ -1 +1,2 @@
 npm test
+npm run test:playwright

package.json

@@ -24,7 +24,8 @@
     "postinstall": "echo TODO: add postinstall instructions",
     "test": "npm run -s build",
     "upgrade": "npx npm-check-updates -u && npm run -s mod:update",
-    "prepare": "node .husky/install.mjs"
+    "prepare": "node .husky/install.mjs",
+    "test:playwright": "playwright test"
   },
   "repository": {
     "type": "git",
@@ -47,7 +48,8 @@
     "hugo-bin": "^0.137.1",
     "husky": "^9.1.7",
     "rimraf": "^6.0.1",
-    "semantic-release": "^24.2.0"
+    "semantic-release": "^24.2.0",
+    "playwright": "^1.20.0"
   },
   "hugo-bin": {
     "buildTags": "extended"

playwright.config.ts

@@ -0,0 +1,52 @@
+import { defineConfig, devices } from '@playwright/test';
+
+export default defineConfig({
+  testDir: './tests',
+  timeout: 30000,
+  expect: {
+    timeout: 5000,
+  },
+  reporter: 'html',
+  use: {
+    actionTimeout: 0,
+    baseURL: 'http://localhost:3000',
+    trace: 'on-first-retry',
+  },
+  projects: [
+    {
+      name: 'Desktop Chrome',
+      use: {
+        ...devices['Desktop Chrome'],
+        viewport: { width: 1280, height: 720 },
+      },
+    },
+    {
+      name: 'Desktop Firefox',
+      use: {
+        ...devices['Desktop Firefox'],
+        viewport: { width: 1280, height: 720 },
+      },
+    },
+    {
+      name: 'Desktop Safari',
+      use: {
+        ...devices['Desktop Safari'],
+        viewport: { width: 1280, height: 720 },
+      },
+    },
+    {
+      name: 'Mobile Chrome',
+      use: {
+        ...devices['Pixel 5'],
+        viewport: { width: 412, height: 915 },
+      },
+    },
+    {
+      name: 'Mobile Safari',
+      use: {
+        ...devices['iPhone 12'],
+        viewport: { width: 390, height: 844 },
+      },
+    },
+  ],
+});

tests/exampleSite.spec.ts

@@ -0,0 +1,76 @@
+import { test, expect } from '@playwright/test';
+
+const pages = [
+  '/',
+  '/gallery/',
+  '/gallery/gallery-slideshow-resources-images-sample/',
+  '/gallery/gallery-slideshow-sample-1/',
+  '/gallery/gallery-slideshow-sample-2/',
+  '/gallery/gallery-slideshow-sample-3/',
+];
+
+const viewports = [
+  { width: 1280, height: 720, name: 'Desktop' },
+  { width: 412, height: 915, name: 'Mobile Portrait' },
+  { width: 915, height: 412, name: 'Mobile Landscape' },
+];
+
+for (const page of pages) {
+  for (const viewport of viewports) {
+    test.describe(`${viewport.name} view - ${page}`, () => {
+      test.beforeEach(async ({ page }) => {
+        await page.setViewportSize({ width: viewport.width, height: viewport.height });
+        await page.goto(page);
+      });
+
+      test('should display the slideshow gallery correctly', async ({ page }) => {
+        const gallery = await page.$('.slideshow-gallery');
+        expect(gallery).not.toBeNull();
+      });
+
+      test('should navigate through images using next and previous buttons', async ({ page }) => {
+        const nextButton = await page.$('.slideshow-next-button');
+        const prevButton = await page.$('.slideshow-prev-button');
+        expect(nextButton).not.toBeNull();
+        expect(prevButton).not.toBeNull();
+
+        await nextButton.click();
+        const currentIndex = await page.$eval('.lightbox-current-index', el => el.textContent);
+        expect(currentIndex).toBe('2');
+
+        await prevButton.click();
+        const newIndex = await page.$eval('.lightbox-current-index', el => el.textContent);
+        expect(newIndex).toBe('1');
+      });
+
+      test('should display fullscreen button and work correctly', async ({ page }) => {
+        const fullscreenButton = await page.$('.slideshow-fullscreen-button');
+        expect(fullscreenButton).not.toBeNull();
+
+        await fullscreenButton.click();
+        const isFullscreen = await page.evaluate(() => document.fullscreenElement !== null);
+        expect(isFullscreen).toBe(true);
+      });
+
+      test('should display thumbnails and navigate to corresponding image', async ({ page }) => {
+        const thumbnails = await page.$$('.slideshow-thumbnail-image');
+        expect(thumbnails.length).toBeGreaterThan(0);
+
+        await thumbnails[1].click();
+        const currentIndex = await page.$eval('.lightbox-current-index', el => el.textContent);
+        expect(currentIndex).toBe('2');
+      });
+
+      test('should display captions and descriptions correctly', async ({ page }) => {
+        const captions = await page.$$('.figure-caption');
+        expect(captions.length).toBeGreaterThan(0);
+
+        for (const caption of captions) {
+          const text = await caption.textContent();
+          expect(text).not.toBeNull();
+          expect(text.length).toBeGreaterThan(0);
+        }
+      });
+    });
+  }
+}