Viff - New Style Testing Strategy for Web Pages

Find virtual differences between web pages in different environments(developing, staging, production) and browsers.

Transcript

1. Viff New Style Testing Strategy for Web Page
2. Style Testing for Web Pages Multi-browser / Cross-browser Testing
3. Style Testing for Web Pages Reusable CSS Components A simple variable update could affect multiple pages
4. Style Testing for Web Pages Test the CSS value / class name expect($('#my-target')).toHaveCss({margin: '10px'}); expect($('#my-target')).toHaveClass('box'); • Cannot list all computed styles to test • It's not a test from end to end
5. Style Testing for Web Pages Only Look And Feel Almost Same
6. Style Testing for Web Pages Only Look And Feel
7. Style Testing for Web Pages Summary of problems • Spend a lot of time ◦ multi-browser, cross-browser and multi-devices • Hard to measure the correct result ◦ hard to do E2E testing ◦ it depends on look and feel which isn't always believable Need more confidence in Software Delivery !!!
8. Expected Solution • Could easily find differences between two web pages • Command-line support • Multiple browsers support (nice to have) • Event handling to set scenario before taking screenshot • Difference approval process • CSS / HTML diff
9. Competitors Page difference Command- line support Multi-/Cross- browser Multi- environme nt Event handling Approval process CSS/HTML diff Csscritic ★ ★ Multi- browsers ★ PhantomCSS ★ ★ PhantomJS ★ Mogotest ★ Cross- browser ★ dpxdt ★ ★ PhantomJS ★ ★ No one achieve that, but we got some ideas from these
10. Viff • What Viff isn't going to be ◦ isn't a testing framework which could tell you if it's correct or not ◦ isn't a tool to find difference between two images (like imagemagick) • What Viff is going to be ◦ is a semi-automatic tool to give quick feedback if find differences between web pages in different environments and browsers ◦ is a review mechanism for QAs or Developers to find influences quickly
11. http://winsonwq.github.io/viff
12. Demo
14. Viff Features • Partial screenshot • Multi-browsers ◦ Chrome(buggy), Safari(first screen, noisy), Opera(first screen), Firefox (pretty good), PhantomJS, iOS, Android, IE • Command-line support • Event handling • Diff report ◦ Original images and diff image ◦ JSON Format ◦ quick review process ◦ Command-line report ◦ CSS/HTML diff • Diff approval process • Cross environments testing • Multiple pages testing ◦ Page crawler ◦ Specify pages to test • Online Service
15. Viff Tech Stack • Browser Driver ◦ Selenium, WebDriverJS • Image Operation ◦ resemble.js • Platform and Tools ◦ Nodejs ◦ Gruntjs ◦ Nodeunit ◦ CoffeeScript
16. Running Viff Installation npm install -g coffee-script && npm install -g viff Learn more in https://github.com/winsonwq/viff Run in command-line viff --selenium-host http://localhost:4444/wd/hub \ -browsers "firefox,chrome" \ -envs "build=http://localhost:4000,prod=http://ishouldbeageek.me" \ -paths "/404.html,/page2" \ --report-format html \ > report.html
17. Viff Testing Strategy • Keep same testing content • No need to test all pages of sites, only configure the pages contains the minimal css style group for testing • Test the Style Guide Page ◦ contains all demo of components • When to run ◦ before commit your code, compare local to build ◦ run every night for the build and review the report
18. Viff Testing Strategy Home Page Parent Page Child Page Standard Page FAQ Page Search Results
19. Viff Testing Strategy FAQ Form with event handling Tables Sitemap
20. Viff Testing Strategy Part 1 Part 2 Part 3 Style Guide Comparing
21. Q/A