Demystifying Visual Testing with WebDriverIO

on YouTube ↗28m

" summary

Shows a working setup that hooks WebDriverIO v5 to Percy.io using npm init, npx wdio config -y and @percy/webdriverio; demo takes percy snapshot screenshots at 992px and 1200px, sends them to Percy, and flags a color change in two buttons plus an iframe rendering mismatch between Chrome and Firefox. Explains WebDriverIO sync mode via fibers, TypeScript support, retries and runners, and shows Percy css to exclude dynamic content; the demo runs end-to-end and the diffs are reviewable in the Percy dashboard.

AI-written summary · about

" chapters (15)

1. 0:00Intro
2. 0:33What is Visual Testing
3. 4:10Agenda
4. 5:45Benefits of Visual Testing
5. 7:35What is WebDriverIO
6. 9:01Sync Mode
7. 10:15Fibers
8. 11:57Getting Started
9. 13:05Visual Studio Code
10. 17:40Baseline
11. 19:40Percy CSS
12. 21:45Best Practices
13. 24:18Summary
14. 25:35Key Resources
15. 26:43Outro

" related talks

• 51mAutomating visual testing with PercyMike Fotinakis · Breakpoint 2020
• 42mFunctional and Visual Testing for Web ApplicationsDmitriy Kovalenko · TestCon Europe 2019
• 48mThe Nuts and Bolts of WebdriverIOChristian Bromann · Selenium Camp 2020
• 48mWebdriverIO + Puppeteer. Double gun - double funAleksandr Khotemskoi · QA Fest 2019
• 49mWebdriverIO + Puppeteer. Double Gun – Double FunOleksandr Khotemskyi · Selenium Camp 2020
• 30mTesting Tools and Their FriendsGleb Bahmutov · JSNation 2019
• 44mWebdriverIO: The next-gen automation test framework you should know aboutKevin Lamping · Breakpoint 2020
• 41mDesign Decisions for Perfect JavaScript Testing FrameworkMichael Bodnarchuk · TestCon Europe 2019