chore: setup playwright as the e2e test framework

2024-08-09 13:53:08 +08:00 · 2024-08-09 13:53:08 +08:00 · 82dd7a4ae3
parent 6dbfbe9d03
commit 82dd7a4ae3
19 changed files with 451 additions and 11 deletions
--- a/.gitignore
+++ b/.gitignore
@ -17,6 +17,11 @@ coverage
 /cypress/videos/
 /cypress/screenshots/

+/test-results/
+/playwright-report/
+/blob-report/
+/playwright/.cache/
+
 # Editor directories and files
 .vscode/*
 !.vscode/extensions.json
--- a/cypress/fixtures/article.json
+++ b/cypress/fixtures/article.json
@ -5,7 +5,7 @@
    "body": "# Article body\n\nThis is **Strong** text",
    "createdAt": "2020-11-01T14:59:39.404Z",
    "updatedAt": "2020-11-01T14:59:39.404Z",
-    "tagList": [],
+    "tagList": ["foo", "bar"],
    "description": "this is descripion",
    "author": {
      "username": "plumrx",
--- a/eslint.config.js
+++ b/eslint.config.js
@ -6,6 +6,7 @@ export default defineConfig({
      'tsconfig.json',
      'tsconfig.node.json',
      'cypress/e2e/tsconfig.json',
+      'playwright/tsconfig.json',
    ],
  },
  vue: {
@ -27,4 +28,12 @@ export default defineConfig({
  rules: {
    'ts/method-signature-style': 'off',
  },
+}, {
+  files: [
+    '*.config.ts',
+    'playwright/**/*',
+  ],
+  rules: {
+    'node/prefer-global/process': 'off',
+  },
 })
--- a/index.html
+++ b/index.html
@ -6,10 +6,10 @@
  <meta name="viewport" content="width=device-width, initial-scale=1.0">

  <link rel="icon" href="/favicon.ico" />
-  <link href="//code.ionicframework.com/ionicons/2.0.1/css/ionicons.min.css" rel="stylesheet" type="text/css">
-  <link href="//fonts.googleapis.com/css?family=Titillium+Web:700|Source+Serif+Pro:400,700|Merriweather+Sans:400,700|Source+Sans+Pro:400,300,600,700,300italic,400italic,600italic,700italic" rel="stylesheet" type="text/css">
+  <link href="https://code.ionicframework.com/ionicons/2.0.1/css/ionicons.min.css" rel="stylesheet" type="text/css">
+  <link href="https://fonts.googleapis.com/css?family=Titillium+Web:700|Source+Serif+Pro:400,700|Merriweather+Sans:400,700|Source+Sans+Pro:400,300,600,700,300italic,400italic,600italic,700italic" rel="stylesheet" type="text/css">

-  <link rel="stylesheet" href="//demo.realworld.io/main.css">
+  <link rel="stylesheet" href="https://demo.realworld.io/main.css">
 </head>
 <body>
 <div id="app"></div>
--- a/package.json
+++ b/package.json
@ -5,16 +5,19 @@
  "type": "module",
  "scripts": {
    "prepare": "simple-git-hooks",
-    "dev": "vite",
+    "dev": "vite --port 5173",
    "build": "vite build",
    "serve": "vite preview --port 4173",
    "type-check": "vue-tsc --noEmit",
    "lint": "eslint --fix .",
    "test": "npm run test:unit && npm run test:e2e:ci",
+    "test:cypress:local": "cypress open --e2e -c baseUrl=http://localhost:5173",
+    "test:cyprsss:prod": "cypress run --e2e -c baseUrl=https://vue3-realworld-example-app-mutoe.vercel.app",
    "test:e2e": "npm run build && concurrently -rk -s first \"npm run serve\" \"cypress open --e2e -c baseUrl=http://localhost:4173\"",
    "test:e2e:ci": "npm run build && concurrently -rk -s first \"npm run serve\" \"cypress run --e2e -c baseUrl=http://localhost:4173\"",
-    "test:e2e:local": "cypress open --e2e -c baseUrl=http://localhost:5173",
-    "test:e2e:prod": "cypress run --e2e -c baseUrl=https://vue3-realworld-example-app-mutoe.vercel.app",
+    "test:playwright:ci": "playwright test",
+    "test:playwright:local": "playwright test --ui",
+    "test:playwright:local:debug": "playwright test --ui --debug",
    "test:unit": "vitest run",
    "generate:api": "curl -sL https://raw.githubusercontent.com/gothinkster/realworld/main/api/openapi.yml -o ./src/services/openapi.yml && sta -p ./src/services/openapi.yml -o ./src/services -n api.ts"
  },
@ -28,9 +31,12 @@
  "devDependencies": {
    "@mutoe/eslint-config": "^2.8.3",
    "@pinia/testing": "^0.1.5",
+    "@playwright/test": "^1.46.0",
    "@testing-library/cypress": "^10.0.2",
    "@testing-library/user-event": "^14.5.2",
    "@testing-library/vue": "^8.1.0",
+    "@types/html": "^1.0.4",
+    "@types/node": "^22.1.0",
    "@vitejs/plugin-vue": "^5.1.2",
    "@vitest/coverage-v8": "^2.0.5",
    "concurrently": "^8.2.2",
@ -40,6 +46,7 @@
    "eslint-plugin-vitest": "^0.5.4",
    "eslint-plugin-vue": "^9.27.0",
    "happy-dom": "^14.12.3",
+    "html": "^1.0.0",
    "lint-staged": "^15.2.8",
    "msw": "^2.3.5",
    "rollup-plugin-analyzer": "^4.0.0",
--- a/playwright.config.ts
+++ b/playwright.config.ts
@ -0,0 +1,81 @@
+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') });
+
+const baseURL = 'http://localhost:5173'
+
+/**
+ * See https://playwright.dev/docs/test-configuration.
+ */
+export default defineConfig({
+  testDir: './playwright',
+  /* 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,
+
+    /* 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'] },
+    },
+
+    {
+      name: 'webkit',
+      use: { ...devices['Desktop Safari'] },
+    },
+
+    /* Test against mobile viewports. */
+    // {
+    //   name: 'Mobile Chrome',
+    //   use: { ...devices['Pixel 5'] },
+    // },
+    // {
+    //   name: 'Mobile Safari',
+    //   use: { ...devices['iPhone 12'] },
+    // },
+
+    /* Test against branded browsers. */
+    // {
+    //   name: 'Microsoft Edge',
+    //   use: { ...devices['Desktop Edge'], channel: 'msedge' },
+    // },
+    // {
+    //   name: 'Google Chrome',
+    //   use: { ...devices['Desktop Chrome'], channel: 'chrome' },
+    // },
+  ],
+
+  /* Run your local dev server before starting the tests */
+  webServer: {
+    command: 'npm run dev',
+    url: baseURL,
+    reuseExistingServer: !process.env.CI,
+    ignoreHTTPSErrors: true,
+  },
+})
--- a/playwright/article/article.spec.ts
+++ b/playwright/article/article.spec.ts
@ -0,0 +1,63 @@
+import type { Article } from 'src/services/api.ts'
+import { Route } from '../constant.ts'
+import { expect, test } from '../extends'
+import { formatHTML } from '../utils/formatHTML.ts'
+
+test.describe('article', () => {
+  test.beforeEach(async ({ conduct }) => {
+    await conduct.intercept('GET', /articles\?limit/, { fixture: 'articles.json' })
+    await conduct.intercept('GET', /tags/, { fixture: 'articles-of-tag.json' })
+    await conduct.intercept('GET', /profiles\/.+/, { fixture: 'profile.json' })
+
+    await conduct.login()
+  })
+
+  test.describe('post article', () => {
+    test('jump to post detail page when submit create article form', async ({ page, conduct }) => {
+      await conduct.goto(Route.ArticleCreate)
+
+      const articleFixture = await conduct.getFixture<{ article: Article }>('article.json')
+      const waitForPostArticle = await conduct.intercept('POST', /articles$/, { body: articleFixture })
+
+      await page.getByPlaceholder('Article Title').fill(articleFixture.article.title)
+      await page.getByPlaceholder("What's this article about?").fill(articleFixture.article.description)
+      await page.getByPlaceholder('Write your article (in markdown)').fill(articleFixture.article.body)
+      for (const tag of articleFixture.article.tagList) {
+        await page.getByPlaceholder('Enter tags').fill(tag)
+        await page.getByPlaceholder('Enter tags').press('Enter')
+      }
+
+      await page.getByRole('button', { name: 'Publish Article' }).dispatchEvent('click')
+      await waitForPostArticle()
+
+      await conduct.intercept('GET', /articles\/.+/, { fixture: 'article.json' })
+      await page.waitForURL(/article\/article-title/)
+      await expect (page.getByRole('heading', { name: 'Article title' })).toContainText('Article title')
+    })
+
+    test('should render markdown correctly', async ({ browserName, page, conduct }) => {
+      test.skip(browserName !== 'chromium')
+      await conduct.goto(Route.ArticleDetail)
+
+      const waitForArticle = await conduct.intercept('GET', /articles\/.+/, { fixture: 'article.json' })
+      await waitForArticle()
+      const innerHTML = await page.locator('.article-content').innerHTML()
+      expect(formatHTML(innerHTML)).toMatchSnapshot('markdown-render.html')
+    })
+  })
+
+  test.describe('delete article', () => {
+    for (const [index, position] of ['banner', 'article footer'].entries()) {
+      test(`delete article from ${position}`, async ({ page, conduct }) => {
+        const waitForArticle = await conduct.intercept('GET', /articles\/.+/, { fixture: 'article.json' })
+        await conduct.goto(Route.ArticleDetail)
+        await waitForArticle()
+
+        await conduct.intercept('DELETE', /articles\/.+/)
+        await page.getByRole('button', { name: 'Delete Article' }).nth(index).click()
+
+        await expect(page).toHaveURL(Route.Home)
+      })
+    }
+  })
+})
--- a/playwright/article/article.spec.ts-snapshots/markdown-render-chromium-darwin.html
+++ b/playwright/article/article.spec.ts-snapshots/markdown-render-chromium-darwin.html
@ -0,0 +1,8 @@
+<div id="article-content" data-testid="article-body" class="col-md-12">
+  <h1>Article body</h1>
+  <p>This is <strong>Strong</strong> text</p>
+</div>
+<ul class="tag-list">
+  <li class="tag-default tag-pill tag-outline" data-testid="article-tag">foo</li>
+  <li class="tag-default tag-pill tag-outline" data-testid="article-tag">bar</li>
+</ul>
--- a/playwright/conduct.page-object.ts
+++ b/playwright/conduct.page-object.ts
@ -0,0 +1,69 @@
+import fs from 'node:fs/promises'
+import path from 'node:path'
+import url from 'node:url'
+import type { Page, Response } from '@playwright/test'
+import type { User } from '../src/services/api.ts'
+import { Route } from './constant'
+import { expect } from './extends.ts'
+import { boxedStep } from './utils/test-decorators.ts'
+
+const __dirname = url.fileURLToPath(new URL('.', import.meta.url))
+const fixtureDir = path.join(__dirname, '../cypress/fixtures')
+
+export class ConductPageObject {
+  constructor(
+    public readonly page: Page,
+  ) {}
+
+  async intercept(method: 'POST' | 'GET' | 'PATCH' | 'DELETE' | 'PUT', url: string | RegExp, options: {
+    fixture?: string
+    statusCode?: number
+    body?: unknown
+  } = {}): Promise<(timeout?: number) => Promise<Response>> {
+    await this.page.route(url, async route => {
+      if (route.request().method() !== method)
+        return route.continue()
+
+      return await route.fulfill({
+        status: options.statusCode || undefined,
+        json: options.body ?? undefined,
+        path: options.fixture ? path.join(fixtureDir, options.fixture) : undefined,
+      })
+    })
+
+    return (timeout: number = 1000) => this.page.waitForResponse(response => {
+      const request = response.request()
+      if (request.method() !== method)
+        return false
+
+      if (typeof url === 'string')
+        return request.url().includes(url)
+
+      return url.test(request.url())
+    }, { timeout })
+  }
+
+  async getFixture<T = unknown>(fixture: string): Promise<T> {
+    const file = path.join(fixtureDir, fixture)
+    return JSON.parse(await fs.readFile(file, 'utf-8')) as T
+  }
+
+  async goto(route: Route) {
+    await this.page.goto(route)
+  }
+
+  @boxedStep
+  async login(username = 'plumrx') {
+    const userFixture = await this.getFixture<{ user: User }>('user.json')
+    userFixture.user.username = username
+    await this.intercept('POST', /users\/login$/, { statusCode: 200, body: userFixture })
+
+    await this.goto(Route.Login)
+
+    await this.page.getByPlaceholder('Email').fill('foo@example.com')
+    await this.page.getByPlaceholder('Password').fill('12345678')
+    await this.page.getByRole('button', { name: 'Sign in' }).click()
+
+    await expect(this.page).toHaveURL(Route.Home)
+  }
+}
--- a/playwright/constant.ts
+++ b/playwright/constant.ts
@ -0,0 +1,8 @@
+export enum Route {
+  Home = '/#/',
+  Login = '/#/login',
+  Register = '/#/register',
+  Settings = '/#/settings',
+  ArticleCreate = '/#/article/create',
+  ArticleDetail = '/#/article/article-title',
+}
--- a/playwright/extends.ts
+++ b/playwright/extends.ts
@ -0,0 +1,22 @@
+import { test as base } from '@playwright/test'
+import { ConductPageObject } from './conduct.page-object.ts'
+
+export const test = base.extend<{
+  conduct: ConductPageObject
+}>({
+  conduct: async ({ page }, use) => {
+    const buyscoutPageObject = new ConductPageObject(page)
+    await use(buyscoutPageObject)
+  },
+})
+
+test.afterEach(async ({ page }, testInfo) => {
+  if (!process.env.CI && testInfo.status !== testInfo.expectedStatus) {
+    // eslint-disable-next-line ts/restrict-template-expressions
+    process.stderr.write(`❌ ❌ PLAYWRIGHT TEST FAILURE ❌ ❌\n${testInfo.error?.stack || testInfo.error}\n`)
+    testInfo.setTimeout(0)
+    await page.pause()
+  }
+})
+
+export const expect = test.expect
--- a/playwright/tsconfig.json
+++ b/playwright/tsconfig.json
@ -0,0 +1,11 @@
+{
+  "extends": "../tsconfig.json",
+  "compilerOptions": {
+    "target": "ESNext",
+    "lib": ["ESNext", "DOM"],
+    "isolatedModules": false
+  },
+  "include": [
+    "./**/*"
+  ]
+}
--- a/playwright/utils/formatHTML.ts
+++ b/playwright/utils/formatHTML.ts
@ -0,0 +1,8 @@
+import { prettyPrint } from 'html'
+
+export function formatHTML(rawHTMLString: string) {
+  const removeComments = rawHTMLString.replaceAll(/<!--.*?-->/gs, '')
+  const pretty = prettyPrint(removeComments, { indent_size: 2 })
+  const removeEmptyLines = `${pretty}\n`.replaceAll(/\n{2,}/g, '\n')
+  return removeEmptyLines
+}
--- a/playwright/utils/test-decorators.ts
+++ b/playwright/utils/test-decorators.ts
@ -0,0 +1,23 @@
+import { test } from '../extends'
+
+export function step(target: Function, context: ClassMethodDecoratorContext) {
+  return function replacementMethod(this: Function, ...args: unknown[]) {
+    const className = this.constructor.name
+    const name = `${className.replace(/PageObject$/, '')}.${context.name as string}`
+    return test.step(name, async () => {
+      // eslint-disable-next-line ts/no-unsafe-return
+      return await target.call(this, ...args)
+    })
+  }
+}
+
+export function boxedStep(target: Function, context: ClassMethodDecoratorContext) {
+  return function replacementMethod(this: Function, ...args: unknown[]) {
+    const className = this.constructor.name
+    const name = `${className.replace(/PageObject$/, '')}.${context.name as string}`
+    return test.step(name, async () => {
+      // eslint-disable-next-line ts/no-unsafe-return
+      return await target.call(this, ...args)
+    }, { box: true })
+  }
+}
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@ -30,6 +30,9 @@ importers:
      '@pinia/testing':
        specifier: ^0.1.5
        version: 0.1.5(pinia@2.2.1(typescript@5.5.4)(vue@3.4.37(typescript@5.5.4)))(vue@3.4.37(typescript@5.5.4))
+      '@playwright/test':
+        specifier: ^1.46.0
+        version: 1.46.0
      '@testing-library/cypress':
        specifier: ^10.0.2
        version: 10.0.2(cypress@13.13.2)
@ -39,6 +42,12 @@ importers:
      '@testing-library/vue':
        specifier: ^8.1.0
        version: 8.1.0(@vue/compiler-sfc@3.4.37)(@vue/server-renderer@3.4.37(vue@3.4.37(typescript@5.5.4)))(vue@3.4.37(typescript@5.5.4))
+      '@types/html':
+        specifier: ^1.0.4
+        version: 1.0.4
+      '@types/node':
+        specifier: ^22.1.0
+        version: 22.1.0
      '@vitejs/plugin-vue':
        specifier: ^5.1.2
        version: 5.1.2(vite@5.4.0(@types/node@22.1.0))(vue@3.4.37(typescript@5.5.4))
@ -66,6 +75,9 @@ importers:
      happy-dom:
        specifier: ^14.12.3
        version: 14.12.3
+      html:
+        specifier: ^1.0.0
+        version: 1.0.0
      lint-staged:
        specifier: ^15.2.8
        version: 15.2.8
@ -518,6 +530,11 @@ packages:
    resolution: {integrity: sha512-cq8o4cWH0ibXh9VGi5P20Tu9XF/0fFXl9EUinr9QfTM7a7p0oTA4iJRCQWppXR1Pg8dSM0UCItCkPwsk9qWWYA==}
    engines: {node: ^12.20.0 || ^14.18.0 || >=16.0.0}

+  '@playwright/test@1.46.0':
+    resolution: {integrity: sha512-/QYft5VArOrGRP5pgkrfKksqsKA6CEFyGQ/gjNe6q0y4tZ1aaPfq4gIjudr1s3D+pXyrPRdsy4opKDrjBabE5w==}
+    engines: {node: '>=18'}
+    hasBin: true
+
  '@rollup/rollup-android-arm-eabi@4.20.0':
    resolution: {integrity: sha512-TSpWzflCc4VGAUJZlPpgAJE1+V60MePDQnBd7PPkpuEmOy8i87aL6tinFGKBFKuEDikYpig72QzdT3QPYIi+oA==}
    cpu: [arm]
@ -673,6 +690,9 @@ packages:
  '@types/estree@1.0.5':
    resolution: {integrity: sha512-/kYRxGDLWzHOB7q+wtSUQlFrtcdUccpfy+X+9iMBpHK8QLLhx2wIPYuS5DYtR9Wa/YlZAbIovy7qVdB1Aq6Lyw==}

+  '@types/html@1.0.4':
+    resolution: {integrity: sha512-Wb1ymSAftCLxhc3D6vS0Ike/0xg7W6c+DQxAkerU6pD7C8CMzTYwvrwnlcrTfsVO/nMelB9KOKIT7+N5lOeQUg==}
+
  '@types/json-schema@7.0.15':
    resolution: {integrity: sha512-5+fP8P8MFNC+AyZCDxrB2pkZFPGzqQWUzpSeuuVLvm8VMcorNYavBqoFcxK8bQz4Qsbn4oUEEem4wDLfcysGHA==}

@ -1093,6 +1113,9 @@ packages:
  buffer-crc32@0.2.13:
    resolution: {integrity: sha512-VO9Ht/+p3SN7SKWqcrgEzjGbRSJYTx+Q1pTQC0wrWqHx0vpJraQ6GtHx8tvcg1rlK1byhU5gccxgOgj7B0TDkQ==}

+  buffer-from@1.1.2:
+    resolution: {integrity: sha512-E+XQCRwSbaaiChtv6k6Dwgc+bx+Bs6vuKJHHl5kox/BaKbhiXzqQOwK4cO22yElGp2OCmjwVhT3HmxgyPGnJfQ==}
+
  buffer@5.7.1:
    resolution: {integrity: sha512-EHcyIPBQ4BSGlvjB16k5KgAJ27CIsHY/2JBmCRReo48y9rQ3MaUzWX3KVlBa4U7MyX02HdVj0K7C3WaB3ju7FQ==}

@ -1258,6 +1281,10 @@ packages:
  concat-map@0.0.1:
    resolution: {integrity: sha512-/Srv4dswyQNBfohGpz9o6Yb3Gz3SrUDqBH5rTuhGR7ahtlbYKnVxw2bCFMRljaA7EXHaXZ8wsHdodFvbkhKmqg==}

+  concat-stream@1.6.2:
+    resolution: {integrity: sha512-27HBghJxjiZtIk3Ycvn/4kbJk/1uZuJFfuPEns6LaEvpvG1f0hTea8lilrouyo9mVc2GWdcEZ8OLoGmSADlrCw==}
+    engines: {'0': node >= 0.8}
+
  concurrently@8.2.2:
    resolution: {integrity: sha512-1dP4gpXFhei8IOtlXRE/T/4H88ElHgTiUzh71YUmtjTEHMSRS2Z/fgOxHSxxusGHogsRfxNq1vyAwxSC+EVyDg==}
    engines: {node: ^14.13.0 || >=16.0.0}
@ -1809,6 +1836,11 @@ packages:
  fs.realpath@1.0.0:
    resolution: {integrity: sha512-OO0pH2lK6a0hZnAdau5ItzHPI6pUlvI7jMVnxUQRtw4owF2wk8lOSabtGDCTP4Ggrg2MbGnWO9X8K1t4+fGMDw==}

+  fsevents@2.3.2:
+    resolution: {integrity: sha512-xiqMQR4xAeHTuB9uWm+fFRcIOgKBMiOBP+eXiyT7jsgVCq1bkVygt00oASowB7EdtpOHaaPgKt812P9ab+DDKA==}
+    engines: {node: ^8.16.0 || ^10.6.0 || >=11.0.0}
+    os: [darwin]
+
  fsevents@2.3.3:
    resolution: {integrity: sha512-5xoDfX+fL7faATnagmWPpbFtwh/R77WmMMqqHGS65C3vvB0YHrgF+B1YmZ3441tMj5n63k0212XNoJwzlhffQw==}
    engines: {node: ^8.16.0 || ^10.6.0 || >=11.0.0}
@ -1955,6 +1987,10 @@ packages:
  html-escaper@2.0.2:
    resolution: {integrity: sha512-H2iMtd0I4Mt5eYiapRdIDjp+XzelXQ0tFE4JS7YFwFevXXMmOp9myNrUvCg0D6ws8iqkRPBfKHgbwig1SmlLfg==}

+  html@1.0.0:
+    resolution: {integrity: sha512-lw/7YsdKiP3kk5PnR1INY17iJuzdAtJewxr14ozKJWbbR97znovZ0mh+WEMZ8rjc3lgTK+ID/htTjuyGKB52Kw==}
+    hasBin: true
+
  http-signature@1.3.6:
    resolution: {integrity: sha512-3adrsD6zqo4GsTqtO7FyrejHNv+NgiIfAfv68+jVlFmSr9OGy7zrxONceFRLKvnnZA5jbxQBX1u9PpB6Wi32Gw==}
    engines: {node: '>=0.10'}
@ -2150,6 +2186,9 @@ packages:
  is-weakset@2.0.2:
    resolution: {integrity: sha512-t2yVvttHkQktwnNNmBQ98AhENLdPUTDTE21uPqAQ0ARwQfGeQKRVS0NNurH7bTf7RrvcVn1OOge45CnBeHCSmg==}

+  isarray@1.0.0:
+    resolution: {integrity: sha512-VLghIWNM6ELQzo7zwmcg0NmTVyWKYjvIeM83yjp0wRDTmUnrM678fQbcKBo6n2CJEF0szoG//ytg+TKla89ALQ==}
+
  isarray@2.0.5:
    resolution: {integrity: sha512-xHjhDr3cNBK0BzdUJSPXZntQUx/mwMS5Rw4A7lPJ90XGAO6ISP/ePDNuo0vhqOZU+UD5JoodwCAAoZQd3FeAKw==}

@ -2697,6 +2736,16 @@ packages:
  pkg-types@1.0.3:
    resolution: {integrity: sha512-nN7pYi0AQqJnoLPC9eHFQ8AcyaixBUOwvqc5TDnIKCMEE6I0y8P7OKA7fPexsXGCGxQDl/cmrLAp26LhcwxZ4A==}

+  playwright-core@1.46.0:
+    resolution: {integrity: sha512-9Y/d5UIwuJk8t3+lhmMSAJyNP1BUC/DqP3cQJDQQL/oWqAiuPTLgy7Q5dzglmTLwcBRdetzgNM/gni7ckfTr6A==}
+    engines: {node: '>=18'}
+    hasBin: true
+
+  playwright@1.46.0:
+    resolution: {integrity: sha512-XYJ5WvfefWONh1uPAUAi0H2xXV5S3vrtcnXe6uAOgdGi3aSpqOSXX08IAjXW34xitfuOJsvXU5anXZxPSEQiJw==}
+    engines: {node: '>=18'}
+    hasBin: true
+
  pluralize@8.0.0:
    resolution: {integrity: sha512-Nc3IT5yHzflTfbjgqWcCPpo7DaKy4FnpB0l/zCAW0Tc7jxAiuqSxHasntB3D7887LSrA93kDJ9IXovxJYxyLCA==}
    engines: {node: '>=4'}
@ -2726,6 +2775,9 @@ packages:
    resolution: {integrity: sha512-Qb1gy5OrP5+zDf2Bvnzdl3jsTf1qXVMazbvCoKhtKqVs4/YK4ozX4gKQJJVyNe+cajNPn0KoC0MC3FUmaHWEmQ==}
    engines: {node: ^10.13.0 || ^12.13.0 || ^14.15.0 || >=15.0.0}

+  process-nextick-args@2.0.1:
+    resolution: {integrity: sha512-3ouUOpQhtgrbOa17J7+uxOTpITYWaGP7/AhoR3+A+/1e9skrzelGi/dXzEYyvbxubEF6Wn2ypscTKiKJFFn1ag==}
+
  process@0.11.10:
    resolution: {integrity: sha512-cdGef/drWFoydD1JsMzuFf8100nZl+GT+yacc2bEced5f9Rjk4z+WtFUTBu9PhOi9j/jfmBPu0mMEY4wIdAF8A==}
    engines: {node: '>= 0.6.0'}
@ -2771,6 +2823,9 @@ packages:
    resolution: {integrity: sha512-Ug69mNOpfvKDAc2Q8DRpMjjzdtrnv9HcSMX+4VsZxD1aZ6ZzrIE7rlzXBtWTyhULSMKg076AW6WR5iZpD0JiOg==}
    engines: {node: '>=8'}

+  readable-stream@2.3.8:
+    resolution: {integrity: sha512-8p0AUk4XODgIewSi0l8Epjs+EVnWiK7NoDIEGU0HhE7+ZyY8D1IMY7odu5lRrFXGg71L15KG8QrPmum45RTtdA==}
+
  redent@4.0.0:
    resolution: {integrity: sha512-tYkDkVVtYkSVhuQ4zBgfvciymHaeuel+zFKXShfDnFP5SyVEP7qo70Rf1jTOTCx3vGNAbnEi/xFkcfQVMIBWag==}
    engines: {node: '>=12'}
@ -2851,6 +2906,9 @@ packages:
  rxjs@7.8.1:
    resolution: {integrity: sha512-AA3TVj+0A2iuIoQkWEK/tqFjBq2j+6PO6Y0zJcvzLAFhEFIO3HL0vls9hWLncZbAAbK0mar7oZ4V079I/qPMxg==}

+  safe-buffer@5.1.2:
+    resolution: {integrity: sha512-Gd2UZBJDkXlY7GbJxfsE8/nvKkUEU1G38c1siN6QP6a9PT9MmHB8GnpscSmMJSoF8LOIrt8ud/wPtojys4G6+g==}
+
  safe-buffer@5.2.1:
    resolution: {integrity: sha512-rp3So07KcdmmKbGvgaNxQSJr7bGVSVk5S9Eq1F+ppbRo70+YeaDxkw5Dd8NPN+GD6bjnYm2VuPuCXmpuYvmCXQ==}

@ -3015,6 +3073,9 @@ packages:
    resolution: {integrity: sha512-GPQHj7row82Hjo9hKZieKcHIhaAIKOJvFSIZXuCU9OASVZrMNUaZuz++SPVrBjnLsnk4k+z9f2EIypgxf2vNFw==}
    engines: {node: '>=18'}

+  string_decoder@1.1.1:
+    resolution: {integrity: sha512-n/ShnvDi6FHbbVfviro+WojiFzv+s8MPMHBczVePfUpDJLwoLT0ht1l4YwBCbi8pJAveEEdnkHyPyTP/mzRfwg==}
+
  strip-ansi@6.0.1:
    resolution: {integrity: sha512-Y38VPSHcqkFrCpFnQ9vuSXmquuv5oXOKpGeT6aGrr3o3Gc9AlVa6JBfUSOCnbxGGZF+/0ooI7KrPuUSztUdU5A==}
    engines: {node: '>=8'}
@ -3179,6 +3240,9 @@ packages:
    resolution: {integrity: sha512-spAaHzc6qre0TlZQQ2aA/nGMe+2Z/wyGk5Z+Ru2VUfdNwT6kWO6TjevOlpebsATEG1EIQ2sOiDszud3lO5mt/Q==}
    engines: {node: '>=16'}

+  typedarray@0.0.6:
+    resolution: {integrity: sha512-/aCDEGatGvZ2BIk+HmLf4ifCJFwvKFNb9/JeZPMulfgFracn9QFcAf5GO8B/mweUjSoblS5In0cWhqpfs/5PQA==}
+
  typescript@5.5.4:
    resolution: {integrity: sha512-Mtq29sKDAEYP7aljRgtPOpTvOfbwRWlS6dPRzwjdE+C0R4brX/GUyhHSecbHMFLNBLcJIPt9nl9yG5TZ1weH+Q==}
    engines: {node: '>=14.17'}
@ -3815,6 +3879,10 @@ snapshots:

  '@pkgr/core@0.1.1': {}

+  '@playwright/test@1.46.0':
+    dependencies:
+      playwright: 1.46.0
+
  '@rollup/rollup-android-arm-eabi@4.20.0':
    optional: true

@ -3967,6 +4035,8 @@ snapshots:

  '@types/estree@1.0.5': {}

+  '@types/html@1.0.4': {}
+
  '@types/json-schema@7.0.15': {}

  '@types/mdast@3.0.15':
@ -4470,6 +4540,8 @@ snapshots:

  buffer-crc32@0.2.13: {}

+  buffer-from@1.1.2: {}
+
  buffer@5.7.1:
    dependencies:
      base64-js: 1.5.1
@ -4608,6 +4680,13 @@ snapshots:

  concat-map@0.0.1: {}

+  concat-stream@1.6.2:
+    dependencies:
+      buffer-from: 1.1.2
+      inherits: 2.0.4
+      readable-stream: 2.3.8
+      typedarray: 0.0.6
+
  concurrently@8.2.2:
    dependencies:
      chalk: 4.1.2
@ -5320,6 +5399,9 @@ snapshots:

  fs.realpath@1.0.0: {}

+  fsevents@2.3.2:
+    optional: true
+
  fsevents@2.3.3:
    optional: true

@ -5463,6 +5545,10 @@ snapshots:

  html-escaper@2.0.2: {}

+  html@1.0.0:
+    dependencies:
+      concat-stream: 1.6.2
+
  http-signature@1.3.6:
    dependencies:
      assert-plus: 1.0.0
@ -5634,6 +5720,8 @@ snapshots:
      call-bind: 1.0.5
      get-intrinsic: 1.2.2

+  isarray@1.0.0: {}
+
  isarray@2.0.5: {}

  isexe@2.0.0: {}
@ -6198,6 +6286,14 @@ snapshots:
      mlly: 1.4.2
      pathe: 1.1.1

+  playwright-core@1.46.0: {}
+
+  playwright@1.46.0:
+    dependencies:
+      playwright-core: 1.46.0
+    optionalDependencies:
+      fsevents: 2.3.2
+
  pluralize@8.0.0: {}

  postcss-selector-parser@6.1.1:
@ -6223,6 +6319,8 @@ snapshots:
      ansi-styles: 5.2.0
      react-is: 17.0.2

+  process-nextick-args@2.0.1: {}
+
  process@0.11.10: {}

  prompts@2.4.2:
@ -6266,6 +6364,16 @@ snapshots:
      parse-json: 5.2.0
      type-fest: 0.6.0

+  readable-stream@2.3.8:
+    dependencies:
+      core-util-is: 1.0.2
+      inherits: 2.0.4
+      isarray: 1.0.0
+      process-nextick-args: 2.0.1
+      safe-buffer: 5.1.2
+      string_decoder: 1.1.1
+      util-deprecate: 1.0.2
+
  redent@4.0.0:
    dependencies:
      indent-string: 5.0.0
@ -6357,6 +6465,8 @@ snapshots:
    dependencies:
      tslib: 2.6.2

+  safe-buffer@5.1.2: {}
+
  safe-buffer@5.2.1: {}

  safer-buffer@2.1.2: {}
@ -6529,6 +6639,10 @@ snapshots:
      get-east-asian-width: 1.2.0
      strip-ansi: 7.1.0

+  string_decoder@1.1.1:
+    dependencies:
+      safe-buffer: 5.1.2
+
  strip-ansi@6.0.1:
    dependencies:
      ansi-regex: 5.0.1
@ -6683,6 +6797,8 @@ snapshots:

  type-fest@4.24.0: {}

+  typedarray@0.0.6: {}
+
  typescript@5.5.4: {}

  ufo@1.3.2: {}
--- a/src/components/ArticleDetail.vue
+++ b/src/components/ArticleDetail.vue
@ -1,5 +1,5 @@
 <template>
-  <div class="banner">
+  <div class="banner" data-testid="article-banner">
    <div class="container">
      <h1>{{ article.title }}</h1>

@ -14,7 +14,12 @@
  <div class="container page">
    <div class="row article-content">
      <!-- eslint-disable vue/no-v-html -->
-      <div id="article-content" class="col-md-12" v-html="articleHandledBody" />
+      <div
+        id="article-content"
+        data-testid="article-body"
+        class="col-md-12"
+        v-html="articleHandledBody"
+      />
      <!-- eslint-enable vue/no-v-html -->

      <!-- TODO: abstract tag list component -->
@ -23,6 +28,7 @@
          v-for="tag in article.tagList"
          :key="tag"
          class="tag-default tag-pill tag-outline"
+          data-testid="article-tag"
        >
          {{ tag }}
        </li>
@ -31,7 +37,7 @@

    <hr>

-    <div class="article-actions">
+    <div class="article-actions" data-testid="article-actions">
      <ArticleDetailMeta
        v-if="article"
        :article="article"
--- a/tsconfig.json
+++ b/tsconfig.json
@ -2,7 +2,7 @@
  "compilerOptions": {
    "target": "ES2020",
    "jsx": "preserve",
-    "lib": ["ES2020", "DOM", "DOM.Iterable"],
+    "lib": ["ES2021", "DOM", "DOM.Iterable"],
    "useDefineForClassFields": true,
    "baseUrl": ".",
    "module": "ESNext",
--- a/tsconfig.node.json
+++ b/tsconfig.node.json
@ -9,6 +9,7 @@
  "include": [
    "vite.config.ts",
    "cypress.config.ts",
+    "playwright.config.ts",
    "eslint.config.js"
  ]
 }
--- a/vite.config.ts
+++ b/vite.config.ts
@ -17,6 +17,9 @@ export default defineConfig({
    analyzer({ summaryOnly: true }),
  ],
  test: {
+    include: [
+      'src/**/*.spec.ts',
+    ],
    environment: 'happy-dom',
    setupFiles: './src/setupTests.ts',
    globals: true,