Pro Yearly is on sale from $80 to $50! »

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. /P#VHTJO4JHIU $POUJOVPVT7JTVBM5FTUJOH BU$PEFPSH @bcjordan #SJBO+PSEBO TPGUXBSFFOHJOFFSBU$PEFPSH

  2. None
  3. None
  4. None
  5. None
  6. None
  7. None
  8. None
  9. None
  10. None
  11. +

  12. UVSUMFDTT

  13. None
  14. None
  15. UBMLQMVH UPNPSSPX 

  16. $PEFPSH

  17. OPOQSPGJU

  18. FYQBOEJOH QBSUJDJQBUJPOJO$4

  19. )PVSPG$PEF

  20. None
  21. WJEFPTMJEF$PEFPSHJOUSP  IUUQTXXXZPVUVCFDPNXBUDI WN5(4J#L#

  22. GVMMDVSSJDVMB  EJTUSJDUQBSUOFSTIJQT  QSPGFTTJPOBM EFWFMPQNFOU  QPMJDZDIBOHF

  23. ,$4$VSSJDVMVN

  24. L, UFBDIFSTUSBJOFE

  25. DPVSTFT LUFBDIFST NNTUVEFOUT

  26. None
  27. IPXEJE$PEFPSH TUBSUBVUPNBUFEUFTUJOH

  28. EFWFMPQNFOU JO

  29. XIZUFTU  XIBUJT$PEFPSHT UFTUJOHDPOUFYU

  30. UIFDPOUFYU

  31. UIFDPOUFYU

  32. UIFDPOUFYU

  33. UIFDPOUFYU

  34. UIFDPOUFYU 35- -53

  35. UIFDPOUFYU

  36. UIFDPOUFYU

  37. TPIPXEPXF UFTUBMMUIBU

  38. IPXXFTUBSUFE 4FMFOJVNUFTUJOH

  39. IPXPVSUFTUTBSF PSHBOJ[FEBOESVO TFMFOJVNXFCESJWFS DVDVNCFS

  40. None
  41. None
  42. UBLFBXBZT

  43. #VJMEBMJCSBSZPG TUFQT

  44. #VJMEBMJCSBSZPG UFTUMFWFMT

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

  46. XIPXSJUFTUFTUT

  47. XIPXIBU SVOTUFTUT

  48. POFQJQFMJOF

  49. FWFSZDPNNJU

  50. XIBUDIBMMFOHFT EJEXFFOEVQGBDJOH

  51. DIBMMFOHF NVMUJQMFCSPXTFST

  52. TPMVUJPO TFMFOJVNXFCESJWFS 4BVDF-BCT

  53. None
  54. None
  55. DIBMMFOHF UFTUJOHOFXDIBOHFT

  56. MPDBMMZ DISPNFESJWFS 4BVDF$POOFDU

  57. QVMMSFRVFTUUFTUTJO$* ❤

  58. DIBMMFOHF JOUFSBDUJPO  ESBHBOEESPQ

  59. TPMVUJPO K2VFSZ4JNVMBUF  TFMFDUPS ESBHj

  60. DIBMMFOHF WJTVBM SFTQPOTJWF DIBOHFT

  61. IBDLBUIPOTPMVUJPO

  62. OPUFBTZ

  63. BDUVBMUIJOH

  64. VTJOHFZFT

  65. DPOWFSUFEGFBUVSF

  66. None
  67. JHOPSJOHSFHJPOT

  68. None
  69. None
  70. None
  71. None
  72. XIBUEPUFTUTMPPL MJLFXIFOSVOOJOH

  73. 4QFFE3VO WJEFPPGUFTUSVO OPUZFUPOMJOF TPSSZ FNBJMCSJBO!DPEFPSHJGZPVXBOUJU

  74. OPU XBTUJOHUJNF

  75. TQFFEJOHVQ UFTUSVOT

  76.  NJOPGUFTUT

  77. QBSBMMFMJ[BUJPO BUSVOOFSMFWFM

  78.  NJOPGUFTUT UP NJOPGUFTUT

  79. KVTUJGZJOH UFTUT

  80. UIFCVHDPMMFDUJPO

  81. NJTTJOHCVUUPO

  82. CVUUPOIFJHIUDIBOHF

  83. FYUSBNBSHJO

  84. PWFSGMPXIJEEFOBEEFE

  85. EVQMJDBUFCVUUPO

  86. TUSBZQJYFM

  87. 'JSFGPYHFU##PY

  88. $ISPNF EFQSFDBUFE47(&MFNFOUPGGTFU8JEUI 

  89. NZGBWPSJUF CVHFWFS

  90. None
  91. None
  92. None
  93. None
  94. XIPJOWFTUJHBUFT GBJMVSFT

  95. EFWPGUIFEBZ

  96. EFWPGUIFEBZ

  97. EFWPGUIFEBZ

  98. XIBUTOFYU

  99. "QQMJUPPMT&ZFTUFTUSFTVMUTBT (JU)VC13DPNNFOUT

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

  101. UBLFBXBZT

  102. TUBSUTNBMM

  103. FWFSZCPEZ UFTUT

  104. QFSJPEJDBMMZ JOWFTUJO TQFFEVQT

  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.
  106. code.org/help github.com/code-dot-org Thanks! @bcjordan #SJBO+PSEBO TPGUXBSFFOHJOFFSBU$PEFPSH