Screenshot testing with Angular

Slide 1

Slide 1 text

Screenshot test with Angular ng-japan ‘18

Slide 2

Slide 2 text

About me Yosuke Kurami a.k.a. @Quramy Front-end Web developer at FOLIO Co., Ltd.

Slide 3

Slide 3 text

Why screenshot testing?

Slide 4

Slide 4 text

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

Slide 5

Slide 5 text

So visual snapshot test The latest snapshot (PNG Image) The actual snapshot (PNG Image) Update if snapshot is accepted Assertion

Slide 6

Slide 6 text

Visual snapshot test

Slide 7

Slide 7 text

How screenshot testing?

Slide 8

Slide 8 text

FYI: 1 year ago… (ng-japan ’17 photo)

Slide 9

Slide 9 text

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 ﬁles

Slide 10

Slide 10 text

How brush up?

Slide 11

Slide 11 text

2 options • Capture your components guide • Capture Karma/Jasmine test cases I introduce the 1st method today.

Slide 12

Slide 12 text

Trinity • Storybook: Angular Components -> HTML • Puppeteer: HTML -> PNG images • reg-suit: compare images with the previous

Slide 13

Slide 13 text

Storybook and Angular https://amcdnl.github.io/material-storybook/

Slide 14

Slide 14 text

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 conﬁguration • Global styles, assets • etc...

Slide 15

Slide 15 text

Angular v6 support @storybook/angular 4.0.0-alpha.9

Slide 16

Slide 16 text

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.

Slide 17

Slide 17 text

Puppeteer and storybook-chrome-screenshot

Slide 18

Slide 18 text

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

Slide 19

Slide 19 text

CI Workflow

Slide 20

Slide 20 text

Demonstration https://github.com/Quramy/screenshot-testing-demo-ngjp18

Slide 21

Slide 21 text

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