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
Tweet

More Decks by Yosuke Kurami

Other Decks in Programming

Transcript

  1. 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
  2. So visual snapshot test The latest snapshot (PNG Image) The

    actual snapshot (PNG Image) Update if snapshot is accepted Assertion
  3. 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
  4. 2 options • Capture your components guide • Capture Karma/Jasmine

    test cases I introduce the 1st method today.
  5. Trinity • Storybook: Angular Components -> HTML • Puppeteer: HTML

    -> PNG images • reg-suit: compare images with the previous
  6. 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...
  7. 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.
  8. 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
  9. 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