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 references tests.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 executes npm 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 to src that demonstrate Vue3 component testing with and without the use of JSX syntax.

3.2 KiB Raw Blame History