Visual/CSS Regression Testing with WebDriver.io/WebDriverCSS - - PowerPoint PPT Presentation

visual css regression testing with webdriver io
SMART_READER_LITE
LIVE PREVIEW

Visual/CSS Regression Testing with WebDriver.io/WebDriverCSS - - PowerPoint PPT Presentation

Visual/CSS Regression Testing with WebDriver.io/WebDriverCSS DrupalCamp Florida March 5, 2016 Who am I? Lisa Ridley, Director of Client Success, Savas Labs (savaslabs.com) Responsibilities: Project Manager and Lead Developer


slide-1
SLIDE 1

Visual/CSS Regression Testing with WebDriver.io/WebDriverCSS

DrupalCamp Florida March 5, 2016

slide-2
SLIDE 2

2

Who am I?

  • Lisa Ridley, Director of Client Success, Savas Labs (savaslabs.com)
  • Responsibilities: Project Manager and Lead Developer
  • Automated Testing Champion (Functional, Behavioral, Acceptance,

Visual)

  • drupal.org: lhridley
  • Twitter: lhridley
  • Github: github.com/lhridley
  • LinkedIn: https://www.linkedin.com/in/lisahridley
  • Blog: www.codementality.com
slide-3
SLIDE 3

3

slide-4
SLIDE 4

4

What is Regression Testing?

slide-5
SLIDE 5

5

How do you regression test the visual components of a user interface?

slide-6
SLIDE 6

6

What if you could take a “before" and “after” picture…. …and could easily compare those pictures to each other?

slide-7
SLIDE 7

7

…And, what if you could automate that process… …and run it using multiple browser / operating system combinations, and even mobile devices

slide-8
SLIDE 8

8

Enter Selenium and WebDriverCSS

slide-9
SLIDE 9

Requirements

  • Node Package Manager
  • NodeJS
  • Selenium Standalone Server
  • GraphicsMagick or ImageMagick
  • webdriver.io
  • WebdriverCSS plugin for webdriver.io
  • PhantomJS, Chrome/ChromeDriver, Firefox (Iceweasel may work)
  • Font Packages (for Linux; OS X and Windows may have plenty installed)
  • xvfb (for running Chrome/Firefox headless; not needed for PhantomJS)
  • Testing framework (I use Mocha; Jasmine and Cucumber also work)

9

slide-10
SLIDE 10

10

How do they work?

slide-11
SLIDE 11

11

Baseline Comparison Diff Image

What does that look like?

slide-12
SLIDE 12

12

Skillsets Needed to Write Tests for using WebDriverCSS Javascript

slide-13
SLIDE 13

13

What does a test look like?

slide-14
SLIDE 14

14

it('This is the home page', function(done){ client .init() .url(‘https://website.testbuild.us/') .pause(2000) .webdrivercss('frontpage',[ { name: 'page', elem: ‘#page', }, ], function(err,res) { assert.ifError(err); assert.ok(res.page[0].isWithinMisMatchTolerance); } ) .call(done) .end(); });

slide-15
SLIDE 15

15

Let’s Look at this in Action

slide-16
SLIDE 16

Exclude, Hide, Remove

  • Exclude — overlays a blackout area on the specified element
  • Hide — applies “visibility: hidden”
  • Remove — applies “display: none”

16

slide-17
SLIDE 17

17

  • http://webdriver.io/guide.html
  • http://webdriver.io/api.html
  • https://github.com/webdriverio/webdrivercss
  • http://www.seleniumhq.org/projects/webdriver/
  • https://nodejs.org
  • https://mochajs.org/
  • phantomjs.org/documentation/

Selenium / WebdriverCSS / Testing Framework Documentation

slide-18
SLIDE 18

18

  • https://www.browserstack.com/automate/capabilities
  • https://www.browserstack.com/automate/node#setting-os-and-

browser

  • https://www.browserstack.com/automate/node#configure-

capabilities

  • https://www.browserstack.com/automate/node#setting-local-tunnel

BrowserStack Documentation

slide-19
SLIDE 19

19

Questions?