mirror of
https://github.com/microsoft/playwright.git
synced 2025-06-26 21:40:17 +00:00
![dependabot[bot]](/assets/img/avatar_default.png)
chore(deps-dev): bump vite in /examples/components-vue Bumps [vite](https://github.com/vitejs/vite/tree/HEAD/packages/vite) from 2.9.5 to 2.9.13. - [Release notes](https://github.com/vitejs/vite/releases) - [Changelog](https://github.com/vitejs/vite/blob/main/packages/vite/CHANGELOG.md) - [Commits](https://github.com/vitejs/vite/commits/v2.9.13/packages/vite) --- updated-dependencies: - dependency-name: vite dependency-type: direct:development ... Signed-off-by: dependabot[bot] <support@github.com> Signed-off-by: dependabot[bot] <support@github.com> Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com>
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 tosrc
that demonstrate Vue3 component testing with and without the use of JSX syntax.