Screenshot testing with Angular

I introduced the following:

- Why screenshot test
- How to screenshot test using Storybook/Puppeteer/reg-suit

Transcript

1. Screenshot test with Angular ng-japan ‘18
2. About me Yosuke Kurami a.k.a. @Quramy Front-end Web developer at FOLIO Co., Ltd.
3. Why screenshot testing?
4. Test your view I'm so tired out "View" testing in SPA projects. • Asserting DOM nodes is so fragile Snapshot testing(Jest or Ava) is partially awesome. But... • Can not detect CSS styles broken • Hard to run with Angular testing stack
5. So visual snapshot test The latest snapshot (PNG Image) The actual snapshot (PNG Image) Update if snapshot is accepted Assertion
6. Visual snapshot test
7. How screenshot testing?
8. FYI: 1 year ago… (ng-japan ’17 photo)
9. FYI: 1 year ago… In ng-japan’17 I introduced visual regression system built up in previous job. And I said "It works well but hard to get started" because there're a lot of blockers. For screenshot test, we need the following: • Installing some software to capture Angular Components’ to PNG images • Setting up storage to store a number of PNG image files
10. How brush up?
11. 2 options • Capture your components guide • Capture Karma/Jasmine test cases I introduce the 1st method today.
12. Trinity • Storybook: Angular Components -> HTML • Puppeteer: HTML -> PNG images • reg-suit: compare images with the previous
13. Storybook and Angular https://amcdnl.github.io/material-storybook/
14. Storybook and Angular Storybook is "Component catalogue engine”. It's been created for React.js originally. But now we can use other UI Framework with Storybook: Anuglar / Vue.js / Polymer / React Native And Storybook also supports Angular CLI • Merged webpack configuration • Global styles, assets • etc...
15. Angular v6 support @storybook/angular 4.0.0-alpha.9
16. Puppeteer and storybook-chrome-screenshot tsuyoshiwada/storybook-chrome-screenshot A Storybook add-on, which takes screenshot images. It uses "headless Chromium”, a.k.a. Puppeteer, and runs Storybook within it. Puppeteer is easy to run in CI environment. You no longer need to start xvfb daemon.
17. Puppeteer and storybook-chrome-screenshot
18. reg-suit reg-viz/reg-suit is a CLI for visual regression testing. It does: 1. Detect Git commit hash to be compared 2. Fetch images associated with the detected commit hash from AWS S3 bucket 3. Compare the images captured with Puppeteer and the fetched images 4. Create and publish difference report
19. CI Workflow
20. Demonstration https://github.com/Quramy/screenshot-testing-demo-ngjp18
21. Resources • GitHub repositories: • storybooks/storybook • tsuyoshiwada/storybook-chrome-screenshot • reg-viz/reg-suit • Blogs & slides: • Screenshot testing with React and Storybook • react-europe-2018-talk-neeehwtfgp.now.sh