feat: add Playwright example (#1670)

vitest-dev · Jul 19, 2022 · c3cc6d8 · c3cc6d8
1 parent a038494
commit c3cc6d8
Show file tree

Hide file tree

Showing 8 changed files with 132 additions and 0 deletions.
diff --git a/examples/README.md b/examples/README.md
@@ -5,6 +5,7 @@
 | `lit` | [GitHub](https://github.com/vitest-dev/vitest/tree/main/examples/lit) | [Play Online](https://stackblitz.com/fork/github/vitest-dev/vitest/tree/main/examples/lit?initialPath=__vitest__) |
 | `mocks` | [GitHub](https://github.com/vitest-dev/vitest/tree/main/examples/mocks) | [Play Online](https://stackblitz.com/fork/github/vitest-dev/vitest/tree/main/examples/mocks?initialPath=__vitest__) |
 | `nextjs` | [GitHub](https://github.com/vitest-dev/vitest/tree/main/examples/nextjs) | [Play Online](https://stackblitz.com/fork/github/vitest-dev/vitest/tree/main/examples/nextjs?initialPath=__vitest__) |
+| `playwright` | [GitHub](https://github.com/vitest-dev/vitest/tree/main/examples/playwright) | |
 | `puppeteer` | [GitHub](https://github.com/vitest-dev/vitest/tree/main/examples/puppeteer) | |
 | `react-enzyme` | [GitHub](https://github.com/vitest-dev/vitest/tree/main/examples/react-enzyme) | [Play Online](https://stackblitz.com/fork/github/vitest-dev/vitest/tree/main/examples/react-enzyme?initialPath=__vitest__) |
 | `react-mui` | [GitHub](https://github.com/vitest-dev/vitest/tree/main/examples/react-mui) | [Play Online](https://stackblitz.com/fork/github/vitest-dev/vitest/tree/main/examples/react-mui?initialPath=__vitest__) |

diff --git a/examples/playwright/index.html b/examples/playwright/index.html
@@ -0,0 +1,13 @@
+<!DOCTYPE html>
+<html>
+
+<head>
+	<meta charset="utf-8">
+	<title>Playwright Vitest Test Page</title>
+	<script type="module" src="/src/index.ts"></script>
+</head>
+
+<body>
+</body>
+
+</html>
diff --git a/examples/playwright/package.json b/examples/playwright/package.json
@@ -0,0 +1,16 @@
+{
+  "name": "@vitest/example-playwright",
+  "private": true,
+  "scripts": {
+    "build": "vite build",
+    "test": "vite build && vitest",
+    "test:ui": "vite build && vitest --ui"
+  },
+  "devDependencies": {
+    "@playwright/test": "^1.23.4",
+    "@vitest/ui": "latest",
+    "playwright": "^1.23.4",
+    "vite": "^2.9.9",
+    "vitest": "latest"
+  }
+}
diff --git a/examples/playwright/src/index.ts b/examples/playwright/src/index.ts
@@ -0,0 +1,15 @@
+const root = document.createElement('div')
+const button = document.createElement('button')
+button.id = 'btn'
+
+let count = 0
+
+button.textContent = `Clicked ${count} time(s)`
+
+button.onclick = () => {
+  count++
+  button.textContent = `Clicked ${count} time(s)`
+}
+
+root.appendChild(button)
+document.body.appendChild(root)
diff --git a/examples/playwright/test/basic.test.ts b/examples/playwright/test/basic.test.ts
@@ -0,0 +1,36 @@
+import { afterAll, beforeAll, describe, test } from 'vitest'
+import { preview } from 'vite'
+import type { PreviewServer } from 'vite'
+import { chromium } from 'playwright'
+import type { Browser, Page } from 'playwright'
+import { expect } from '@playwright/test'
+
+describe('basic', async () => {
+  let server: PreviewServer
+  let browser: Browser
+  let page: Page
+
+  beforeAll(async () => {
+    server = await preview({ preview: { port: 3000 } })
+    browser = await chromium.launch()
+    page = await browser.newPage()
+  })
+
+  afterAll(async () => {
+    await browser.close()
+    await new Promise<void>((resolve, reject) => {
+      server.httpServer.close(error => error ? reject(error) : resolve())
+    })
+  })
+
+  test('should have the correct title', async () => {
+    await page.goto('http://localhost:3000')
+    const button = page.locator('#btn')
+    await expect(button).toBeDefined()
+
+    await expect(button).toHaveText('Clicked 0 time(s)')
+
+    await button.click()
+    await expect(button).toHaveText('Clicked 1 time(s)')
+  }, 60_000)
+})
diff --git a/examples/playwright/tsconfig.json b/examples/playwright/tsconfig.json
@@ -0,0 +1,5 @@
+{
+  "compilerOptions": {
+    "jsx": "react"
+  }
+}
diff --git a/examples/playwright/vitest.config.ts b/examples/playwright/vitest.config.ts
@@ -0,0 +1,8 @@
+import { defineConfig } from 'vite'
+
+export default defineConfig({
+  test: {
+    testTimeout: 30_000,
+    hookTimeout: 30_000,
+  },
+})
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml