Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Screenshot testing with Angular

Screenshot testing with Angular

I introduced the following:

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


Yosuke Kurami

June 15, 2018


  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