Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Automating Visual Regression Testing with Backs...

Automating Visual Regression Testing with BackstopJS

Slides from my PNSQC 2018 talk on how my team and I used automated testing to help us catch content loss and style regressions.

Angela Riggs

October 10, 2018
Tweet

More Decks by Angela Riggs

Other Decks in Programming

Transcript

  1. Hi, I’m Angela! - QA Engineer at Vacasa - Teacher

    > Dev Intern > QA - Pronouns: She / Her - Twitter: @angelariggs_
  2. @angelariggs_ PNSQC | 2018 - Open-source package - Before &

    after screenshots - Chrome Headless, PhantomJS, or Slimer
  3. @angelariggs_ PNSQC | 2018 - Open-source package - Before &

    after screenshots - Chrome Headless, PhantomJS, or Slimer - UI simulations
  4. @angelariggs_ PNSQC | 2018 - Open-source package - Before &

    after screenshots - Chrome Headless, PhantomJS, or Slimer - UI simulations - HTML report for comparison
  5. @angelariggs_ PNSQC | 2018 Success: Automated visual regression testing helped

    us find and fix regressions before it became the client’s problem
  6. @angelariggs_ PNSQC | 2018 1. Run screenshot references 2. Go

    play Towerfall for 35 minutes 3. Developer deploys
  7. @angelariggs_ PNSQC | 2018 1. Run screenshot references 2. Go

    play Towerfall for 35 minutes 3. Developer deploys 4. Run screenshot tests
  8. @angelariggs_ PNSQC | 2018 1. Run screenshot references 2. Go

    play Towerfall for 35 minutes 3. Developer deploys 4. Run screenshot tests 5. Go have lunch
  9. @angelariggs_ PNSQC | 2018 1. Run screenshot references 2. Go

    play Towerfall for 35 minutes 3. Developer deploys 4. Run screenshot tests 5. Go have lunch 6. Review report
  10. @angelariggs_ PNSQC | 2018 1. Run screenshot references 2. Go

    play Towerfall for 35 minutes 3. Developer deploys 4. Run screenshot tests 5. Go have lunch 6. Review report 7. Feedback to developer
  11. @angelariggs_ PNSQC | 2018 1. Run screenshot references* 2. Go

    play Towerfall for 35 minutes 3. Developer deploys 4. Run screenshot tests* 5. Go have lunch 6. Review report 7. Feedback to developer
  12. @angelariggs_ PNSQC | 2018 1. Run screenshot references 2. Go

    play Towerfall for 35 minutes 3. Developer deploys 4. Run screenshot tests 5. Go have lunch 6. Review report* 7. Feedback to developer
  13. @angelariggs_ PNSQC | 2018 - Increase viewport height to grab

    entire page - One CSS selector per URL - Remove URLs that use the same template
  14. @angelariggs_ PNSQC | 2018 1. Run screenshot references* 2. Go

    play Towerfall for 35 minutes 3. Developer deploys 4. Run screenshot tests* 5. Go have lunch 6. Review report* 7. Feedback to developer
  15. @angelariggs_ PNSQC | 2018 1. Tester runs screenshot references 2.

    Developer deploys 3. Tester runs screenshot test 4. Review report 5. Feedback to developer
  16. @angelariggs_ PNSQC | 2018 - Four separate configuration files -

    Lots of back & forth between developer and tester
  17. @angelariggs_ PNSQC | 2018 - detailed README for setup and

    use - template repo for quick setup on new projects
  18. @angelariggs_ PNSQC | 2018 1. Dev runs references 2. Dev

    deploys 3. Dev runs tests 4. Dev reviews the report
  19. @angelariggs_ PNSQC | 2018 - Smoke tests for all deploys

    on all projects - Regression test during feature testing
  20. @angelariggs_ PNSQC | 2018 1. Run references on master branch

    2. Check out feature branch 3. Run tests on feature branch 4. Review the report
  21. @angelariggs_ PNSQC | 2018 - Smoke tests for all deploys

    on all projects - Regression test during feature testing - Local use during feature development
  22. @angelariggs_ PNSQC | 2018 1. Create and check out feature

    branch 2. Run references on fresh branch 3. Do local development 4. Run tests on branch periodically 5. Review report