mirror of
https://github.com/microsoft/playwright.git
synced 2024-12-14 21:53:35 +03:00
3.2 KiB
3.2 KiB
Component testing with Playwright and Vue3
Recommended IDE Setup
VSCode + Volar (and disable Vetur) + TypeScript Vue Plugin (Volar) + Playwright Test for VSCode.
Project Setup
npm i
Compile and Hot-Reload for Development
npm run dev
Test project
Run tests from your VS Code, or execute
npm run test
How to add component tests using Playwright
-
npm init vue@latest was used to create a default project.
npm init vue@latest
-
Install Playwright Text w/ component testing as dev dependencies.
npm i --save-dev @playwright/test @playwright/experimental-ct-vue
-
tests.js
file was added that registers all the components to be tested.import register from '@playwright/experimental-ct-vue/register' import Counter from './src/components/Counter.vue' import DocumentationIcon from './src/components/icons/IconDocumentation.vue' import HelloWorld from './src/components/HelloWorld.vue' import NamedSlots from './src/components/NamedSlots.vue' import TheWelcome from './src/components/TheWelcome.vue' import WelcomeItem from './src/components/WelcomeItem.vue' register({ Counter, DocumentationIcon, HelloWorld, NamedSlots, TheWelcome, WelcomeItem, })
-
tests.html
file was added that defines theming for the components and referencestests.js
.<html> <head> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <style>@import '/src/assets/base.css';</style> </head> <body> <div id="app"></div> <script type="module" src="/tests.js"></script> </body> </html>
-
playwright.config.ts
was added that executesnpm run dev
before running tests if it is not already running.import { PlaywrightTestConfig, devices } from '@playwright/test'; const config: PlaywrightTestConfig = { testDir: 'src', forbidOnly: !!process.env.CI, retries: process.env.CI ? 2 : 0, reporter: process.env.CI ? [ ['html', { open: 'never' }], ] : [ ['html', { open: 'on-failure' }] ], webServer: { url: 'http://localhost:3000/tests.html', command: 'npm run dev', reuseExistingServer: !process.env.CI, }, use: { baseURL: 'http://localhost:3000/tests.html', trace: 'on-first-retry', }, projects: [ { name: 'chromium', use: { ...devices['Desktop Chrome'] }, }, { name: 'firefox', use: { ...devices['Desktop Firefox'] }, }, { name: 'webkit', use: { ...devices['Desktop Safari'] }, }, ], }; export default config;
-
A bunch of
.spec.ts
and.spec.tsx
files were added tosrc
that demonstrate Vue3 component testing with and without the use of JSX syntax.