No Bugs in Sight: Continuous Visual Testing at Code.org (CSSConf 2016)

B3330bb396b899128a7ac1c8e38bec77?s=47 Brian Jordan
September 26, 2016

No Bugs in Sight: Continuous Visual Testing at Code.org (CSSConf 2016)

At Code.org, automated cross-browser visual testing plays a vital role in maintaining stability and catching regressions. Learn how they test their their visually-intensive, interactive curriculum from Brian Jordan.

In this talk, Code.org's Brian Jordan will describe the evolution of their continuous, cross-browser automated testing suite, including a year’s worth of lessons learned from visual regression tests in the wild. Setting the context of the challenges of testing Code.org’s interactive, drag-and-drop open source computer science curriculum (game visualizations using SVG, Canvas, and a metric boat-load of SASS styling), Brian will describe how Code.org’s small engineering team got a handle on cross-browser issues and visual regressions, and how team members can write quick tests for their own visual-intensive code. At the end, Brian will share some fun examples from Code.org's "Bug Collection"—real live examples of bugs detected before they hit production.

B3330bb396b899128a7ac1c8e38bec77?s=128

Brian Jordan

September 26, 2016
Tweet

Transcript

  1. 2.
  2. 3.
  3. 4.
  4. 5.
  5. 6.
  6. 7.
  7. 8.
  8. 9.
  9. 10.
  10. 11.

    +

  11. 12.
  12. 13.
  13. 14.
  14. 16.
  15. 20.
  16. 26.
  17. 40.
  18. 41.
  19. 42.
  20. 53.
  21. 54.
  22. 66.
  23. 68.
  24. 69.
  25. 70.
  26. 71.
  27. 90.
  28. 91.
  29. 92.
  30. 93.
  31. 101.
  32. 105.

    In memory of Laurel Fan Thanks to the Code.org team

    who spread the burden of fleshing out, monitoring and improving our test infrastructure, especially Laurel Fan, Brendan Reville, and Brad Buchanan. Thanks to the kind folks at Sauce Labs, Applitools, and CircleCI who helped us get set up, and to Dave Haeffner @tourdedave for sharing his advice on testing.