From c3cc6d8063f925d455adcd8c51fcfc838f6365d1 Mon Sep 17 00:00:00 2001 From: jfgreffier Date: Tue, 19 Jul 2022 08:27:11 +0200 Subject: [PATCH] feat: add Playwright example (#1670) --- examples/README.md | 1 + examples/playwright/index.html | 13 +++++++++ examples/playwright/package.json | 16 +++++++++++ examples/playwright/src/index.ts | 15 ++++++++++ examples/playwright/test/basic.test.ts | 36 ++++++++++++++++++++++++ examples/playwright/tsconfig.json | 5 ++++ examples/playwright/vitest.config.ts | 8 ++++++ pnpm-lock.yaml | 38 ++++++++++++++++++++++++++ 8 files changed, 132 insertions(+) create mode 100644 examples/playwright/index.html create mode 100644 examples/playwright/package.json create mode 100644 examples/playwright/src/index.ts create mode 100644 examples/playwright/test/basic.test.ts create mode 100644 examples/playwright/tsconfig.json create mode 100644 examples/playwright/vitest.config.ts diff --git a/examples/README.md b/examples/README.md index da65ff923..169a14ac4 100644 --- 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 new file mode 100644 index 000000000..23a5f054c --- /dev/null +++ b/examples/playwright/index.html @@ -0,0 +1,13 @@ + + + + + + Playwright Vitest Test Page + + + + + + + diff --git a/examples/playwright/package.json b/examples/playwright/package.json new file mode 100644 index 000000000..a8cea1b29 --- /dev/null +++ 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 new file mode 100644 index 000000000..bac6f2363 --- /dev/null +++ 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 new file mode 100644 index 000000000..ac3655669 --- /dev/null +++ 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((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 new file mode 100644 index 000000000..986627de2 --- /dev/null +++ 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 new file mode 100644 index 000000000..f25b6ca9e --- /dev/null +++ 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 index 00b47221b..f917c72ee 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -212,6 +212,20 @@ importers: typescript: 4.6.3 vitest: link:../../packages/vitest + examples/playwright: + specifiers: + '@playwright/test': ^1.23.4 + '@vitest/ui': latest + playwright: ^1.23.4 + vite: ^2.9.12 + vitest: workspace:* + devDependencies: + '@playwright/test': 1.23.4 + '@vitest/ui': link:../../packages/ui + playwright: 1.23.4 + vite: 2.9.14 + vitest: link:../../packages/vitest + examples/puppeteer: specifiers: '@vitest/ui': latest @@ -4080,6 +4094,15 @@ packages: resolution: {integrity: sha512-Aq58f5HiWdyDlFffbbSjAlv596h/cOnt2DO1w3DOC7OJ5EHs0hd/nycJfiu9RJbT6Yk6F1knnRRXNSpxoIVZ9Q==} dev: true + /@playwright/test/1.23.4: + resolution: {integrity: sha512-iIsoMJDS/lyuhw82FtcV/B3PXikgVD3hNe5hyvOpRM0uRr1OIpN3LgPeRbBjhzBWmyf6RgRg5fqK5sVcpA03yA==} + engines: {node: '>=14'} + hasBin: true + dependencies: + '@types/node': 18.0.4 + playwright-core: 1.23.4 + dev: true + /@pmmmwh/react-refresh-webpack-plugin/0.5.5_a3gyllrqvxpec3fpybsrposvju: resolution: {integrity: sha512-RbG7h6TuP6nFFYKJwbcToA1rjC1FyPg25NR2noAZ0vKI+la01KTSRPkuVPE+U88jXv7javx2JHglUcL1MHcshQ==} engines: {node: '>= 10.13'} @@ -16599,6 +16622,21 @@ packages: mlly: 0.5.4 pathe: 0.3.2 + /playwright-core/1.23.4: + resolution: {integrity: sha512-h5V2yw7d8xIwotjyNrkLF13nV9RiiZLHdXeHo+nVJIYGVlZ8U2qV0pMxNJKNTvfQVT0N8/A4CW6/4EW2cOcTiA==} + engines: {node: '>=14'} + hasBin: true + dev: true + + /playwright/1.23.4: + resolution: {integrity: sha512-NUPOLMpd8WydmwZFllST/YZ7cImgDDDrvcaq7Gj2vAjNg0jYCndFJt6HHtbkOPSIlRo4BaQYlbFx6meq1r1FXQ==} + engines: {node: '>=14'} + hasBin: true + requiresBuild: true + dependencies: + playwright-core: 1.23.4 + dev: true + /pluralize/8.0.0: resolution: {integrity: sha512-Nc3IT5yHzflTfbjgqWcCPpo7DaKy4FnpB0l/zCAW0Tc7jxAiuqSxHasntB3D7887LSrA93kDJ9IXovxJYxyLCA==} engines: {node: '>=4'} -- 2.51.2