gcavanunez/lil-vue3-playwright-example

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 Test with component testing as dev dependencies.

  npm i --save-dev @playwright/test @playwright/experimental-ct-vue

• playwright/index.html file was added that defines theming for the components through importing playwright/index.js.

• playwright.config.ts was added that builds components before running tests.

• 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.