add e2e tests to publishing website

Author: marle3003

.github/actions/publish-website/action.yml

@@ -55,6 +55,10 @@ runs:
       working-directory: ./webui
       run: npx playwright install --with-deps
       shell: bash
+    - name: test website
+      working-directory: ./webui
+      run: npx playwright test --project=website
+      shell: bash
     - name: prerender
       working-directory: ./webui/ssg
       run: node index.js

webui/e2e/header.website.spec.ts

@@ -1,19 +1,16 @@
 import { test, expect } from './models/fixture-dashboard'
 
-test('header in dashboard', async ({ dashboard }) => {
-    await dashboard.open()
+test('header in dashboard', async ({ page }) => {
+    await page.goto('/home')
 
     await test.step("navigation links", async () => {
-        const links = dashboard.header.getNavLinks()
-        await expect(links.nth(0)).toHaveText('Dashboard')
-        await expect(links.nth(1)).toHaveText('Guides')
-        await expect(links.nth(2)).toHaveText('Configuration')
-        await expect(links.nth(3)).toHaveText('JavaScript API')
-        await expect(links.nth(4)).toHaveText('Resources')
-        await expect(links.nth(5)).toHaveText('References')
-    })
-
-    await test.step('version number', async() => {
-        await expect(dashboard.header.version).not.toBeVisible();
+        const links = page.getByRole('banner').getByRole('navigation').getByRole('link');
+        await expect(links.nth(0)).toHaveAccessibleDescription('Mokapi home')
+        await expect(links.nth(1)).toHaveText('Dashboard')
+        await expect(links.nth(2)).toHaveText('Guides')
+        await expect(links.nth(3)).toHaveText('Configuration')
+        await expect(links.nth(4)).toHaveText('JavaScript API')
+        await expect(links.nth(5)).toHaveText('Resources')
+        await expect(links.nth(6)).toHaveText('References')
     })
 })

webui/playwright.config.ts

@@ -155,7 +155,7 @@ const config: PlaywrightTestConfig = {
      * Use the preview server on CI for more realistic testing.
     Playwright will re-use the local server if there is already a dev-server running.
      */
-    command: process.env.CI ? 'vite preview --mode dashboard --port 5173' : 'vite dev',
+    command: process.env.CI ? 'vite preview --port 5173' : 'vite dev',
     port: 5173,
     reuseExistingServer: !process.env.CI
   }

webui/src/components/Header.vue

@@ -214,7 +214,7 @@ function navigateAndClose(params: Record<string, string>) {
 </div>
     <nav class="navbar navbar-expand-lg">
       <div class="container-fluid">
-        <a class="navbar-brand" href="./"><img src="/logo-header.svg" height="30" alt="Mokapi home"/></a>
+        <a class="navbar-brand" href="./" title="Mokapi home"><img src="/logo-header.svg" height="30" alt="Mokapi home"/></a>
         <div class="d-flex ms-auto align-items-center tools d-none">
             <a href="https://github.com/marle3003/mokapi" class="version pe-2" v-if="appInfo?.data">v{{appInfo.data.version}}</a>
             <button class="btn icon" aria-label="Search" data-bs-toggle="modal" data-bs-target="#search-docs">