Component Testing with Playwright

A presentation at VueConf.US 2022 in June 2022 in Fort Lauderdale, FL, USA by Debbie O'Brien

Slide 1

Slide 1

Component Testing with Playwright

Slide 2

Slide 2

Debbie O’Brien Senior Program Manager at Microsoft Playwright Advocate International Speaker Teacher YouTuber Open Source Love Sport: running, cycling, skiing, padel, 4th degree black belt in Taekwondo debs_obrien

Slide 3

Slide 3

Node.js Powerful Test Runner Capable test runner ✅ File System access ✅ Parallelization <button/> Fake Browsers <counter/> <accordion/> ❌ Fake CSS / layout ❌ No screenshot testing ❌ Fake clicks Browser

Slide 4

Slide 4

Node.js Browser Light-weight Test Runner Poor test runner ❌ File System access ❌ Parallelization Real Browsers ✅ Real CSS / layout ✅ Screenshot testing ❌ Fake clicks <button/> <counter/> <accordion/>

Slide 5

Slide 5

Node.js Browser Powerful test runner Powerful Test Runner ✅ File System access ✅ Parallelization <button/> <counter/> Real Browsers ✅ Real clicks ✅ Real CSS / layout ✅ Screenshot testing <accordion/>

Slide 6

Slide 6

Slide 7

Slide 7

Slide 8

Slide 8

Slide 9

Slide 9

Slide 10

Slide 10

Slide 11

Slide 11

Slide 12

Slide 12

Compile Component Bundle and Facade HTML Page Under the Hood: Global Setup Serve http://localhost:3100/playwright/index,html http://localhost:3100/playwright/bundle.js [ { name: “HelloWorld”, file: … }, { name: “WelcomeItem”, file: … }, { name: “Button”, file: … }, ] Compile & Bundle file://…cache/playwright/index.html file://…cache/playwright/bundle.js

Slide 13

Slide 13

Under the Hood: Mount Fixture

Slide 14

Slide 14

Real Browsers • Chromium, Firefox, WebKit All Playwright capabilities Component Tests Features Great Developer Experience • importing components and using JSX syntax where possible • handling component events in tests • VSCode extension, debugging, Playwright Tracing etc.

Slide 15

Slide 15

9/3/20XX Presentation Title 15

Slide 16

Slide 16

Thank You Docs: playwright.dev aka.ms/playwright/twitter aka.ms/playwright/youtube aka.ms/playwright/slack debbie.codes debbieobrien@microsoft.com debs_obrien