Skip to content

Instantly share code, notes, and snippets.

@mojoaxel
Last active June 28, 2017 14:23
Show Gist options
  • Save mojoaxel/07119db81138ac74dd3204aa1b5a3292 to your computer and use it in GitHub Desktop.
Save mojoaxel/07119db81138ac74dd3204aa1b5a3292 to your computer and use it in GitHub Desktop.
Visual Regression Testing - https://git.io/vQcS0

Regression Testing

What is regression testing?

  • A "regression" means a "step back" what usually means a new/old bug.
  • Regression testing verifies that software which was previously developed (and tested) still performs the same way after it was changed or interfaced with other software.
  • It is not only used for functional areas, but also to visual changes (CSS).
  • Regression Testing is usually a big part of QA (quality assurance).
  • Regression testing can be done on every level: component, module, system.
  • Regression testing may include the execution of existing functional tests.
  • "Visual Regression Testing" is a process where screenshots from the running systems are compared to privious ones.
  • Visual regression testing is relatively easy and very powerfull!

Usefull links

have a look at The awesome List of Regressin Testing.

Wraith

Installation

docker search wraith
docker pull bbcnews/wraith

Run Wraith with docker

see docs for example  

docker run -P -v `pwd`:/wraithy -w=/wraithy bbcnews/wraith capture ./tests/.wraith.config.small.yaml
  • -P : Publish all exposed ports to random ports
  • -v : Bind mount a volume
  • -w : Working directory inside the container

Configuration

see docs for examples

#Headless browser option
#browser: "phantomjs"
#browser: "slimerjs" # not in docker
browser: "casperjs"

#Add only 2 domains, key will act as a label
domains:
  stage: "http://192.168.10.61"
  development: "http://192.168.10.201:8000"

#Type the name of the directory that shots will be stored in
directory: "tests/screenshots"

#Type screen widths below, here are a couple of examples
screen_widths:
  - 1440

#Amount of fuzz ImageMagick will use
fuzz: "10%"

# Amount of diff to report an error
threshold: 0.05

#Choose how results are displayed, by default alphanumeric. Different screen widths are always grouped.
#alphanumeric - all paths (with, and without, a difference) are shown, sorted by path
#diffs_first - all paths (with, and without, a difference) are shown, sorted by difference size (largest first)
#diffs_only - only paths with a difference are shown, sorted by difference size (largest first)
mode: diffs_first

before_capture: "tests/hooks/wait_15s.js"

#Type page URL paths below, here are a couple of examples
paths:
  portal: /tgw/app/portal
  matrix_tubes_reports_contracts: /tgw/app/matrix/reports/contracts

Capture Hooks

https://bbc-news.github.io/wraith/#before_capturehooks

module.exports = function (casper, ready) {
  casper.wait(3000, function() {
    // click the collapse button
    casper.click('.collapseBtn');
    // move the mouse over the second element in the table
    casper.mouse.move('#mainview-ctdvs-region tr.CTDVLogFile tbody > tr:nth-child(2) > td.name');
    // give the tooltip time to appear
    casper.wait(1000, ready);
  });
}
  matrix_tubes_reports_contracts: 
    path: /tgw/app/matrix/reports/contracts
    before_capture: "tests/hooks/wait_and_hover.js"
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment