Repository for lighting talk at Xebia Vue Sync meeting

There are two componenents: myButton and myModal.

Run the app

npm run dev

Run tests

npm run test-ct

Run tests in UI mode

npm run test-ct --  --ui

Key configuration

• playwright-ct-.config.ts
• ./playwright/index.ts

myButton tests

npm run test-ct src/components/myButton

myModal tests

myModal - visibility

playwright test -c playwright-ct.config.ts --ui src/components/myModal

• --ui allows for watch mode
• Add <div id="modals"></div> in playwright/index.html (remove the DIV to see the broken test)

myModal - integration

For integration you decide how broad the scope is. Key takeaways:

Testing component in small

Testing component in large

Playwright Test for VSCode allows you to run tests from Visual Studio Code.

myModal - visual tests

• Tests are tagged as @visual-tests

npm run test-ct -- --ui --grep @visual-tests

Bread something:

- <h3 class="flex shrink-0 items-center pb-4 text-xl font-medium ">Cześć!</h3>
+ <h3 class="flex shrink-0 items-center pb-40 text-xl font-medium ">Cześć!</h3>

And in the Playwright UI look at the side by side oraz slider tabs. If you want to update snapshots:

npm run test-ct src/components/myModal/myModal.component.spec.ts -- --update-snapshots

Compare Playwright tests with traditional ones

• src/components/myButton/myButton.spec.ts
• src/components/myModal/myModal.spec.ts