test: migrate to playwright tests

Author: mutoe

package.json

@@ -10,14 +10,14 @@
     "serve": "vite preview --port 4173",
     "type-check": "vue-tsc --noEmit",
     "lint": "eslint --fix .",
-    "test": "npm run test:unit && npm run test:e2e:ci",
+    "test": "npm run test:unit && npm run test:playwright",
     "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:playwright:ci": "playwright test",
     "test:playwright:local": "playwright test --ui",
-    "test:playwright:local:debug": "playwright test --ui --debug",
+    "test:playwright:local:debug": "playwright test --ui --headed --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"
   },

playwright.config.ts

@@ -9,28 +9,37 @@ import { defineConfig, devices } from '@playwright/test'
 
 const baseURL = 'http://localhost:5173'
 
+const isCI = process.env.CI
+
 /**
  * See https://playwright.dev/docs/test-configuration.
  */
 export default defineConfig({
   testDir: './playwright',
   /* Run tests in files in parallel */
-  fullyParallel: true,
+  fullyParallel: false,
   /* Fail the build on CI if you accidentally left test.only in the source code. */
-  forbidOnly: !!process.env.CI,
+  forbidOnly: !!isCI,
   /* Retry on CI only */
-  retries: process.env.CI ? 1 : 0,
+  retries: isCI ? 1 : 0,
   /* Opt out of parallel tests on CI. */
-  workers: process.env.CI ? 1 : undefined,
+  workers: isCI ? 1 : undefined,
   /* Reporter to use. See https://playwright.dev/docs/test-reporters */
-  reporter: 'html',
+  reporter: [
+    ['line'],
+    ['html', { open: 'never' }],
+  ],
   /* 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,
 
+    navigationTimeout: 4000,
+
     /* Collect trace when retrying the failed test. See https://playwright.dev/docs/trace-viewer */
-    trace: 'on-first-retry',
+    screenshot: 'only-on-failure',
+    trace: isCI ? 'on-first-retry' : 'retain-on-failure',
+    video: isCI ? 'on-first-retry' : 'retain-on-failure',
   },
 
   /* Configure projects for major browsers */
@@ -40,12 +49,12 @@ export default defineConfig({
       use: { ...devices['Desktop Chrome'] },
     },
 
-    {
+    isCI && {
       name: 'firefox',
       use: { ...devices['Desktop Firefox'] },
     },
 
-    {
+    isCI && {
       name: 'webkit',
       use: { ...devices['Desktop Safari'] },
     },
@@ -69,13 +78,13 @@ export default defineConfig({
     //   name: 'Google Chrome',
     //   use: { ...devices['Desktop Chrome'], channel: 'chrome' },
     // },
-  ],
+  ].filter(Boolean),
 
   /* Run your local dev server before starting the tests */
   webServer: {
     command: 'npm run dev',
     url: baseURL,
-    reuseExistingServer: !process.env.CI,
+    reuseExistingServer: !isCI,
     ignoreHTTPSErrors: true,
   },
 })

playwright/article/article.spec.ts

@@ -1,11 +1,11 @@
 import { test as base } from '@playwright/test'
-import { ConductPageObject } from './conduct.page-object.ts'
+import { ConduitPageObject } from 'page-objects/conduit.page-object'
 
 export const test = base.extend<{
-  conduct: ConductPageObject
+  conduit: ConduitPageObject
 }>({
-  conduct: async ({ page }, use) => {
-    const buyscoutPageObject = new ConductPageObject(page)
+  conduit: async ({ page }, use) => {
+    const buyscoutPageObject = new ConduitPageObject(page)
     await use(buyscoutPageObject)
   },
 })

playwright/extends.ts

@@ -0,0 +1,33 @@
+import type { Page } from '@playwright/test'
+import { ConduitPageObject } from './conduit.page-object'
+
+export class ArticleDetailPageObject extends ConduitPageObject {
+  constructor(public page: Page) {
+    super(page)
+  }
+
+  positionMap = {
+    'banner': 0,
+    'article footer': 1,
+  } as const
+
+  private async clickOperationButton(position: keyof typeof this.positionMap = 'banner', buttonName: string) {
+    await this.page.getByRole('button', { name: buttonName }).nth(this.positionMap[position]).click()
+  }
+
+  async clickEditArticle(position: keyof typeof this.positionMap = 'banner') {
+    return this.clickOperationButton(position, 'Edit Article')
+  }
+
+  async clickDeleteArticle(position: keyof typeof this.positionMap = 'banner') {
+    await this.page.getByRole('button', { name: 'Delete article' }).nth(this.positionMap[position]).dispatchEvent('click')
+  }
+
+  async clickFollowUser(position: keyof typeof this.positionMap = 'banner') {
+    await this.page.getByRole('button', { name: 'Follow' }).nth(this.positionMap[position]).dispatchEvent('click')
+  }
+
+  async clickFavoriteArticle(position: keyof typeof this.positionMap = 'banner') {
+    await this.page.getByRole('button', { name: 'Favorite article' }).nth(this.positionMap[position]).dispatchEvent('click')
+  }
+}

playwright/page-objects/article-detail.page-object.ts

@@ -2,36 +2,45 @@ 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'
+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')
+const fixtureDir = path.join(__dirname, '../../cypress/fixtures')
 
-export class ConductPageObject {
+export class ConduitPageObject {
   constructor(
     public readonly page: Page,
   ) {}
 
   async intercept(method: 'POST' | 'GET' | 'PATCH' | 'DELETE' | 'PUT', url: string | RegExp, options: {
     fixture?: string
+    postFixture?: (fixture: any) => void | unknown
     statusCode?: number
     body?: unknown
-  } = {}): Promise<(timeout?: number) => Promise<Response>> {
+    timeout?: number
+  } = {}): Promise<() => Promise<Response>> {
     await this.page.route(url, async route => {
       if (route.request().method() !== method)
         return route.continue()
 
+      if (options.postFixture && options.fixture) {
+        const body = await this.getFixture(options.fixture)
+        const returnValue = await options.postFixture(body)
+        options.body = returnValue === undefined ? body : returnValue
+        options.fixture = undefined
+      }
+
       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 => {
+    return () => this.page.waitForResponse(response => {
       const request = response.request()
       if (request.method() !== method)
         return false
@@ -40,7 +49,7 @@ export class ConductPageObject {
         return request.url().includes(url)
 
       return url.test(request.url())
-    }, { timeout })
+    }, { timeout: options.timeout ?? 4000 })
   }
 
   async getFixture<T = unknown>(fixture: string): Promise<T> {
@@ -49,21 +58,29 @@ export class ConductPageObject {
   }
 
   async goto(route: Route) {
-    await this.page.goto(route)
+    await this.page.goto(route, { waitUntil: 'domcontentloaded' })
   }
 
   @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()
+
+    const waitForLogin = await this.intercept('POST', /users\/login$/, { statusCode: 200, body: userFixture })
+    await Promise.all([
+      waitForLogin(),
+      this.page.getByRole('button', { name: 'Sign in' }).click(),
+    ])
 
     await expect(this.page).toHaveURL(Route.Home)
   }
+
+  async toContainText(text: string) {
+    await expect(this.page.locator('body')).toContainText(text)
+  }
 }

playwright/conduct.page-object.ts renamed to playwright/page-objects/conduit.page-object.ts

@@ -0,0 +1,44 @@
+import type { Page } from '@playwright/test'
+import { ConduitPageObject } from './conduit.page-object.ts'
+
+export class EditArticlePageObject extends ConduitPageObject {
+  constructor(public page: Page) {
+    super(page)
+  }
+
+  async fillTitle(title: string) {
+    await this.page.getByPlaceholder('Article Title').fill(title)
+  }
+
+  async fillDescription(description: string) {
+    await this.page.getByPlaceholder("What's this article about?").fill(description)
+  }
+
+  async fillContent(content: string) {
+    await this.page.getByPlaceholder('Write your article (in markdown)').fill(content)
+  }
+
+  async fillTags(tags: string | string[]) {
+    if (!Array.isArray(tags))
+      tags = [tags]
+    for (const tag of tags) {
+      await this.page.getByPlaceholder('Enter tags').fill(tag)
+      await this.page.getByPlaceholder('Enter tags').press('Enter')
+    }
+  }
+
+  async fillForm({ title, description, content, tags }: { title?: string, description?: string, content?: string, tags?: string | string[] }) {
+    if (title !== undefined)
+      await this.fillTitle(title)
+    if (description !== undefined)
+      await this.fillDescription(description)
+    if (content !== undefined)
+      await this.fillContent(content)
+    if (tags !== undefined)
+      await this.fillTags(tags)
+  }
+
+  async clickPublishArticle() {
+    await this.page.getByRole('button', { name: 'Publish Article' }).dispatchEvent('click')
+  }
+}

playwright/page-objects/edit-article.page-object.ts

@@ -0,0 +1,27 @@
+import type { Page } from '@playwright/test'
+import { ConduitPageObject } from './conduit.page-object.ts'
+
+export class LoginPageObject extends ConduitPageObject {
+  constructor(public page: Page) {
+    super(page)
+  }
+
+  async fillEmail(email: string = 'foo@example.com') {
+    await this.page.getByPlaceholder('Email').fill(email)
+  }
+
+  async fillPassword(password = '12345678') {
+    await this.page.getByPlaceholder('Password').fill(password)
+  }
+
+  async fillForm(form: { email?: string, password?: string }) {
+    if (form.email !== undefined)
+      await this.fillEmail(form.email)
+    if (form.password !== undefined)
+      await this.fillPassword(form.password)
+  }
+
+  async clickSignIn() {
+    await this.page.getByRole('button', { name: 'Sign in' }).dispatchEvent('click')
+  }
+}