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

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

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.

Brian Jordan

September 26, 2016
Tweet

Other Decks in Programming

Transcript

  1. /P#VHTJO4JHIU
    $POUJOVPVT7JTVBM5FTUJOH
    BU$PEFPSH
    @bcjordan
    #SJBO+PSEBO TPGUXBSFFOHJOFFSBU$PEFPSH

    View Slide

  2. View Slide

  3. View Slide

  4. View Slide

  5. View Slide

  6. View Slide

  7. View Slide

  8. View Slide

  9. View Slide

  10. View Slide

  11. +

    View Slide

  12. UVSUMFDTT

    View Slide

  13. View Slide

  14. View Slide

  15. UBMLQMVH UPNPSSPX

    View Slide

  16. $PEFPSH

    View Slide

  17. OPOQSPGJU

    View Slide

  18. FYQBOEJOH
    QBSUJDJQBUJPOJO$4

    View Slide

  19. )PVSPG$PEF

    View Slide

  20. View Slide

  21. WJEFPTMJEF$PEFPSHJOUSP

    IUUQTXXXZPVUVCFDPNXBUDI WN5(4J#L#

    View Slide

  22. GVMMDVSSJDVMB
    EJTUSJDUQBSUOFSTIJQT
    QSPGFTTJPOBM
    EFWFMPQNFOU
    QPMJDZDIBOHF

    View Slide

  23. ,$4$VSSJDVMVN

    View Slide

  24. L,
    UFBDIFSTUSBJOFE

    View Slide

  25. DPVSTFT
    LUFBDIFST
    NNTUVEFOUT

    View Slide

  26. View Slide

  27. IPXEJE$PEFPSH
    TUBSUBVUPNBUFEUFTUJOH

    View Slide

  28. EFWFMPQNFOU
    JO

    View Slide

  29. XIZUFTU
    XIBUJT$PEFPSHT
    UFTUJOHDPOUFYU

    View Slide

  30. UIFDPOUFYU

    View Slide

  31. UIFDPOUFYU

    View Slide

  32. UIFDPOUFYU

    View Slide

  33. UIFDPOUFYU

    View Slide

  34. UIFDPOUFYU
    35- -53

    View Slide

  35. UIFDPOUFYU

    View Slide

  36. UIFDPOUFYU

    View Slide

  37. TPIPXEPXF
    UFTUBMMUIBU

    View Slide

  38. IPXXFTUBSUFE
    4FMFOJVNUFTUJOH

    View Slide

  39. IPXPVSUFTUTBSF
    PSHBOJ[FEBOESVO
    TFMFOJVNXFCESJWFS
    DVDVNCFS

    View Slide

  40. View Slide

  41. View Slide

  42. UBLFBXBZT

    View Slide

  43. #VJMEBMJCSBSZPG
    TUFQT

    View Slide

  44. #VJMEBMJCSBSZPG
    UFTUMFWFMT

    View Slide

  45. #VJMEBMJCSBSZPG
    BOOPUBUJPOT
    !OP@NPCJMF
    !OP@JF
    !TLJQ
    !EC@BDDFTT
    !BT@TUVEFOU
    !FZFT

    View Slide

  46. XIPXSJUFTUFTUT

    View Slide

  47. XIPXIBU
    SVOTUFTUT

    View Slide

  48. POFQJQFMJOF

    View Slide

  49. FWFSZDPNNJU

    View Slide

  50. XIBUDIBMMFOHFT
    EJEXFFOEVQGBDJOH

    View Slide

  51. DIBMMFOHF
    NVMUJQMFCSPXTFST

    View Slide

  52. TPMVUJPO
    TFMFOJVNXFCESJWFS
    4BVDF-BCT

    View Slide

  53. View Slide

  54. View Slide

  55. DIBMMFOHF
    UFTUJOHOFXDIBOHFT

    View Slide

  56. MPDBMMZ
    DISPNFESJWFS
    4BVDF$POOFDU

    View Slide

  57. QVMMSFRVFTUUFTUTJO$*

    View Slide

  58. DIBMMFOHF
    JOUFSBDUJPO
    ESBHBOEESPQ

    View Slide

  59. TPMVUJPO
    K2VFSZ4JNVMBUF
    TFMFDUPS
    ESBHj

    View Slide

  60. DIBMMFOHF
    WJTVBM SFTQPOTJWF
    DIBOHFT

    View Slide

  61. IBDLBUIPOTPMVUJPO

    View Slide

  62. OPUFBTZ

    View Slide

  63. BDUVBMUIJOH

    View Slide

  64. VTJOHFZFT

    View Slide

  65. DPOWFSUFEGFBUVSF

    View Slide

  66. View Slide

  67. JHOPSJOHSFHJPOT

    View Slide

  68. View Slide

  69. View Slide

  70. View Slide

  71. View Slide

  72. XIBUEPUFTUTMPPL
    MJLFXIFOSVOOJOH

    View Slide

  73. 4QFFE3VO
    WJEFPPGUFTUSVO OPUZFUPOMJOF TPSSZ
    FNBJMCSJBO!DPEFPSHJGZPVXBOUJU

    View Slide

  74. OPU
    XBTUJOHUJNF

    View Slide

  75. TQFFEJOHVQ
    UFTUSVOT

    View Slide


  76. NJOPGUFTUT

    View Slide

  77. QBSBMMFMJ[BUJPO
    BUSVOOFSMFWFM

    View Slide


  78. NJOPGUFTUT
    UP
    NJOPGUFTUT

    View Slide

  79. KVTUJGZJOH
    UFTUT

    View Slide

  80. UIFCVHDPMMFDUJPO

    View Slide

  81. NJTTJOHCVUUPO

    View Slide

  82. CVUUPOIFJHIUDIBOHF

    View Slide

  83. FYUSBNBSHJO

    View Slide

  84. PWFSGMPXIJEEFOBEEFE

    View Slide

  85. EVQMJDBUFCVUUPO

    View Slide

  86. TUSBZQJYFM

    View Slide

  87. 'JSFGPYHFU##PY

    View Slide

  88. $ISPNF
    EFQSFDBUFE47(&MFNFOUPGGTFU8JEUI

    View Slide

  89. NZGBWPSJUF
    CVHFWFS

    View Slide

  90. View Slide

  91. View Slide

  92. View Slide

  93. View Slide

  94. XIPJOWFTUJHBUFT
    GBJMVSFT

    View Slide

  95. EFWPGUIFEBZ

    View Slide

  96. EFWPGUIFEBZ

    View Slide

  97. EFWPGUIFEBZ

    View Slide

  98. XIBUTOFYU

    View Slide

  99. "QQMJUPPMT&ZFTUFTUSFTVMUTBT
    (JU)VC13DPNNFOUT

    View Slide

  100. NPSFDSPTTCSPXTFSSFTQPOTJWF
    WJTVBMUFTUT
    github.com/tourdedave/responsive-web-testing

    View Slide

  101. UBLFBXBZT

    View Slide

  102. TUBSUTNBMM

    View Slide

  103. FWFSZCPEZ
    UFTUT

    View Slide

  104. QFSJPEJDBMMZ
    JOWFTUJO
    TQFFEVQT

    View Slide

  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.

    View Slide

  106. code.org/help
    github.com/code-dot-org
    Thanks!
    @bcjordan
    #SJBO+PSEBO TPGUXBSFFOHJOFFSBU$PEFPSH

    View Slide