Add playwright tests for example site pages

Fixes #5

Add Playwright tests for example site pages.

* **package.json**: Add `playwright` as a dev dependency and add `test:playwright` script to run Playwright tests.
* **playwright.config.ts**: Configure Playwright to test both mobile and desktop views, set viewport sizes, and configure test directory and test match pattern.
* **tests/exampleSite.spec.ts**: Write tests for each specified page, including tests for mobile and desktop views. Test interactions such as navigating through images, fullscreen button, and thumbnails. Verify captions and descriptions are displayed correctly.
* **.github/workflows/test.yml**: Add a step to run Playwright tests.
* **.husky/pre-commit**: Add a command to run Playwright tests before committing.

---

For more details, open the [Copilot Workspace session](https://copilot-workspace.githubnext.com/d-oit/hinode-mod-slideshow-gallery/issues/5?shareId=XXXX-XXXX-XXXX-XXXX).

Author: d-oit

.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);
+        }
+      });
+    });
+  }
+}