CI FOR CSS Creating a Visual Regression Testing Workflow Presented - - PowerPoint PPT Presentation

▶
ci for css
SMART_READER_LITE
LIVE PREVIEW

CI FOR CSS Creating a Visual Regression Testing Workflow Presented - - PowerPoint PPT Presentation

Sep 09, 2022 477 likes •932 views

CI FOR CSS Creating a Visual Regression Testing Workflow Presented by Kate Kligman May 13, 2015 2 Pantheon.io Visual Regression Testing? 3 Pantheon.io Middle image CC by SA 3.0 Hans-Werner34 at en.wikipedia

slide-1
SLIDE 1
slide-2
SLIDE 2
  • Pantheon.io

2

CI FOR CSS

Creating a Visual Regression Testing Workflow

Presented by Kate Kligman May 13, 2015

slide-3
SLIDE 3
  • Pantheon.io

3

Visual Regression Testing?

Middle image CC by SA 3.0 Hans-Werner34 at en.wikipedia http://en.wikipedia.org/wiki/Eye_tracking#/media/File:Eye_tracking_thru_glass.JPG Snellen chart CC by SA 3.0 http://commons.wikimedia.org/wiki/File:Snellen_chart.svg

slide-4
SLIDE 4
  • Pantheon.io

4

About this Session

  • Why visual regression testing?
  • Headless Testing
  • Wraith
  • Full Browser Testing
  • Selenium
  • WebdriverCSS
  • Questions
slide-5
SLIDE 5
  • Pantheon.io

5

About Me

@KateKligman

slide-6
SLIDE 6
slide-7
SLIDE 7
slide-8
SLIDE 8
slide-9
SLIDE 9
slide-10
SLIDE 10
slide-11
SLIDE 11
slide-12
SLIDE 12
slide-13
SLIDE 13
slide-14
SLIDE 14
slide-15
SLIDE 15
  • Pantheon.io

15

Visual Regression Testing Challenges

  • Platform challenges
  • Fonts, form controls
  • Rendering engines
  • Content challenges
  • Dynamic content
  • Environment setup
  • Workflow challenges
  • Navigation
  • Baseline tracking
slide-16
SLIDE 16

TITLE TEXT WRAITH

slide-17
SLIDE 17
  • Pantheon.io

17

Wraith Image Gallery

slide-18
SLIDE 18
  • Pantheon.io

18

Wraith Comparisons

slide-19
SLIDE 19
  • Pantheon.io

wraith configs config.yaml javascript snap.js shots gallery.html bootstrap.min.cs thumbnails mypage

19

Wraith Setup

Wraith Initialization

$ wraith setup create configs/config.yaml create javascript/snap.js

Wraith Folder Structure Each URL path gets it’s

  • wn screenshot folder.
slide-20
SLIDE 20
  • Pantheon.io

20

Wraith Configuration

browser: phantomjs (can also use slimerjs) snap_file: javascript/snap.js directory: shots domains: dev: http://dev-panolopy-dreams.pantheon.io test: http://test-panolopy-dreams.pantheon.io

configs/config.yaml

slide-21
SLIDE 21
  • Pantheon.io

21

Wraith URL Configuration

paths: home: / login: /user/login great-vegetables: /content/great-vegetables lovely-vegetables: /content/lovely-vegetables screen_widths:

  • 320
  • 600
  • 768
  • 1024

configs/config.yaml

slide-22
SLIDE 22
  • Pantheon.io

22

Running Wraith

$ wraith capture config

slide-23
SLIDE 23
  • Pantheon.io

23

Wraith Responsive Gallery

Difference detected

slide-24
SLIDE 24
  • Pantheon.io

320__dev.png 320__test.png 320__diff.png 320__data.txt 600__dev.png 600__test.png 600__diff.png 600__data.txt

24

Wraith Artifacts

wraith/shots/home

Each text file contains a number that represents the image difference.

Automated Checks

slide-25
SLIDE 25
  • Pantheon.io

25

Limiting Test Coverage

Static Header Dynamic Content Block

slide-26
SLIDE 26
  • Pantheon.io

26

Wraith CSS Selector Gallery

slide-27
SLIDE 27
  • Pantheon.io

wraith configs config.yaml component.yaml javascript snap.js casper.js shots

27

Wraith CSS Selectors with CasperJS

Casper Setup

$ wraith setup_casper create configs/component.yaml create javascript/casper.js

Wraith Folder Structure Separate configs for casper.js navigation. …

slide-28
SLIDE 28
  • Pantheon.io

28

Wraith CSS Selector Configuration

browser: phantomjs: casperjs snap_file: javascript/casper.js paths: header: path: / selector: "header"

Edit configs/component.yaml Running it

$ wraith capture component

slide-29
SLIDE 29
  • Pantheon.io

29

Wraith CSS Selector Gallery

slide-30
SLIDE 30
  • Pantheon.io

30

Wraith History Mode

directory: shots history_dir: shots_history domains: test: http://test-panolopy-dreams.pantheon.io

Edit configs/config.yaml or configs/component.yaml

Capture and test with a single baseline image set.

slide-31
SLIDE 31
  • Pantheon.io

31

Wraith History Mode Commands

$ wraith history config $ wraith latest config

Capture the Baseline Compare the Baseline

slide-32
SLIDE 32
  • Pantheon.io

32

Wraith History Mode Gallery

slide-33
SLIDE 33
  • Pantheon.io

33

Wraith Summary

  • Render with Webkit (Chrome) or Gecko (Firefox).
  • Test two websites against each other (or a single baseline image set).
  • Use selectors to limit coverage.
slide-34
SLIDE 34

FULL BROWSER TESTING

Selenium

slide-35
SLIDE 35
  • Pantheon.io

35

Selenium: Do it Yourself?

slide-36
SLIDE 36
  • Pantheon.io

36

Hosted Services

slide-37
SLIDE 37
  • Pantheon.io

37

WebdriverCSS

  • Use Selenium for cross-browser testing
  • Test directly in JavaScript with WebdriverIO
  • Include and exclude capture regions with selectors.
slide-38
SLIDE 38
  • Pantheon.io

38

Limiting Test Coverage

Static Header Dynamic Content Block

slide-39
SLIDE 39
  • Pantheon.io

39

WebdriverCSS: Hide the Carousel

slide-40
SLIDE 40
  • Pantheon.io

40

WebdriverCSS: Exclude Regions

.webdrivercss('panolopy', { name: 'home', exclude: '#carousel' }, ...)

slide-41
SLIDE 41
  • Pantheon.io

41

Try Visual Regression Testing

  • Prevent visual mistakes.
  • Open source tools for a variety of setups.
  • Cross-browser testing options with Selenium.
slide-42
SLIDE 42
  • Pantheon.io

42

Resources

  • Headless Testing
  • https://github.com/BBC-News/wraith
  • http://casperjs.org/
  • https://github.com/Huddle/PhantomCSS
  • Full Browser Testing
  • http://www.seleniumhq.org/
  • http://webdriver.io/
  • https://github.com/webdriverio/webdrivercss
  • http://shoov.io/
slide-43
SLIDE 43
  • Pantheon.io

43

Questions?

Images CC by SA 3.0 http://en.wikipedia.org/wiki/Eye_tracking#/media/File:Eye_tracking_thru_glass.JPG http://commons.wikimedia.org/wiki/File:Snellen_chart.svg

slide-44
SLIDE 44

THANK YOU! To evaluate this session: losangeles2015.drupal.org/schedule