microsoft/playwright
1
1
Fork 0
mirror of https://github.com/microsoft/playwright.git synced 2024-12-14 21:53:35 +03:00
Code Issues Projects Releases Wiki Activity
13224d1c9f
playwright/examples/components-vue
History
Pavel Feldman 13224d1c9f
chore: restore component testing options (#13910)
2022-05-03 15:48:46 -07:00
..
playwright chore: migrate vue component example to a new vite plugin (#13750) 2022-04-25 22:10:08 -07:00
public chore: add vue components example (#12797) 2022-03-15 14:47:42 -07:00
src chore: restore component testing options (#13910) 2022-05-03 15:48:46 -07:00
.gitignore chore: add vue components example (#12797) 2022-03-15 14:47:42 -07:00
index.html chore: add vue components example (#12797) 2022-03-15 14:47:42 -07:00
package-lock.json chore: migrate vue component example to a new vite plugin (#13750) 2022-04-25 22:10:08 -07:00
package.json chore: migrate vue component example to a new vite plugin (#13750) 2022-04-25 22:10:08 -07:00
playwright.config.ts chore: restore component testing options (#13910) 2022-05-03 15:48:46 -07:00
README.md docs(examples/components-vue/README.md): updated installation steps (#13866) 2022-05-02 09:00:51 -07:00
vite.config.js chore: add vue components example (#12797) 2022-03-15 14:47:42 -07:00
vue.d.ts chore: add vue components example (#12797) 2022-03-15 14:47:42 -07:00

README.md

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 executes npm run dev before running tests if it is not already running.

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