chore: setup playwright as the e2e test framework

mutoe · mutoe · commit 82dd7a4ae35d · 2024-08-10T06:54:29.000+08:00
diff --git 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
diff --git 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",
diff --git 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',
+  },
 })
diff --git 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>
diff --git 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",
diff --git 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,
+  },
+})
diff --git 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)
+      })
+    }
+  })
+})
diff --git 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>
diff --git 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)
+  }
+}
diff --git 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',
+}
diff --git 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
diff --git a/playwright/tsconfig.json b/playwright/tsconfig.json
@@ -0,0 +1,11 @@
+{
+  "extends": "../tsconfig.json",
+  "compilerOptions": {
+    "target": "ESNext",
+    "lib": ["ESNext", "DOM"],
+    "isolatedModules": false
+  },
+  "include": [
+    "./**/*"
+  ]
+}
diff --git 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
+}
diff --git a/playwright/utils/test-decorators.ts b/playwright/utils/test-decorators.ts
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
diff --git a/src/components/ArticleDetail.vue b/src/components/ArticleDetail.vue
diff --git a/tsconfig.json b/tsconfig.json
diff --git a/tsconfig.node.json b/tsconfig.node.json
diff --git a/vite.config.ts b/vite.config.ts
