レガシーコードで ビジュアルリグレッションテスト をやってみた！

PHP Conference 2019 Lightning Talk@2019/12/01 の発表資料です。
BackstopJSでのビジュアルリグレッションテストを行った話です。

Transcript

1. ϨΨγʔίʔυͰ
   ϏδϡΞϧϦάϨογϣϯςετ
   Λ΍ͬͯΈͨʂ 1)1
   $POGFSFODF
   
   -JHIUOJOH
   5BML!
   Ѩ೾࿈
   ஐܙ
2. ࣗݾ঺հ ͋͸ΕΜ
   ΤΩαΠτגࣜձࣾ
   ৽ଔ೥໨1)1FS
   !ZVDP@NN
3. ੢ྐྵ೥ʜ
   ฐࣾͷͱ͋ΔͭͷαʔϏε͸
   جຊػೳ͕΄ͱΜͲಉͩͬͨ͡ͷͰɺ
   ಉ͡ίʔυͰ։ൃ͞Ε͍ͯͨ˝
4. αʔϏε͸ಠࣗʹਐԽ࢝͠ΊɺಠࣗػೳͷͨΊͷ
   ग़͠෼͚ίʔυ͕૿͍͖͑ͯɺߴ౓ʹෳࡶʹͳͬͨɻ
   Ὂ
   ͜ͷ··͕Μ͹Δ
   ⾣
   αʔϏεɺͭͷϓϩδΣΫτʹ͢Δ
5. ϓϩδΣΫτΛίϐʔ͠ɺ̎ͭ༻ҙ͢Δ͜ͱͰ
   ෼͚Δ͜ͱʹ੒ޭɻ
   ࣍ʹɺෆཁʹͳͬͨยํͷ੩తϑΝΠϧ΍ॲཧΛ ࡟আ͢Δඞཁ͕͋Δɻ˝
6. ੩తϑΝΠϧͷ࡟আ׬ྃɻ
   ݅ۙ͘ͷϖʔδΛݕূ͢Δํ๏͸ʁ
   ⾣
   खಈͰݕূ
   Ὂ
   ʜʜ
7. ੩తϑΝΠϧͷ࡟আ׬ྃɻ
   ݅ۙ͘ͷϖʔδΛݕূ͢Δํ๏͸ʁ
   Ὂ
   खಈͰݕূ
   ⾣
   ϏδϡΞϧϦάϨογϣϯςετͰݕূ
8. ϏδϡΞϧϦάϨογϣϯςετͱ͸ εΫϦʔϯγϣοτΛࡱӨ͠ɺ
   લޙͰࠩ෼͕ग़͍ͯͳ͍͔ݕূ͢Δςετ
   $44΍ίʔυมߋʹΑΔද่ࣔΕ͕ͳ͍͔ݕূ͢Δͷʹ༏Ε͍ͯΔ
   ݕূͰ͖Δ͜ͱ
   ɾϘλϯ΍ը૾ͷදࣔՄ൱
   ɾϖʔδͷදࣔՄ൱
   ݕূͰ͖ͳ͍͜ͱ
   ɾϖʔδભҠ
9. ࢖͏΋ͷ #BDLTUPQ+4ɹ
   ϏδϡΞϧϦάϨογϣϯςετΛߦ͑ΔϑϨʔϜϫʔΫ  ςετͷઃఆ
   CBDLTUPQKTPO ɹ
    εΫϦʔϯγϣοτੜ੒
    มߋલͷεΫϦʔϯγϣοτʢ3FGFSFODFʣΛอଘ
   
    มߋޙͷεΫϦʔϯγϣοτʢ5FTUʣΛอଘ
    ྆ऀΛൺֱͨ͠Ϩϙʔτੜ੒ ςετͷྲྀΕ ࢲୡ͕΍Δ͜ͱʂ Node.js + Puppeteer or ChromyJS
10. ςετ४උɹ
    ඞਢ
     ̍
    ൺֱͰ͖Δ؀ڥͷ༻ҙ
    ྫɿຊ൪؀ڥͱεςʔδ؀ڥ
    
    ςετͷઃఆ ʲ
    ඞਢ߲໨
    ʳ
    JE
    ɿϨϙʔτλΠτϧ
    WJFXQPSUTɿࡱӨը໘αΠζ
    TDFOBSJPT
    ɿςετ಺༰
    ɹ
    MBCFMɿςετλΠτϧ
    ɹ
    VSMɿมߋޙ63-ɹ
    
    SFGFSFODF6SMɿมߋલ63- มߋޙ؀ڥ มߋલ؀ڥ
11. 
    ৄࡉઃఆ
    1VQQFUFFS
    PS
    $ISPNZ+4
    4DSJQUΛ࢖͏͜ͱͰҎԼͷରԠ͕Մೳ
    w ϕʔγοΫೝূରԠ
    w ϩάΠϯඇϩάΠϯը໘ରԠ
    w ࡱӨલͷ6*มߋରԠ
    Ϛ΢εΦʔόʔը૾ࠩ͠ସ͑ ςετ४උɹ
    Φϓγϣϯ
     TDFOBSJPT
    ɿςετ಺༰
    ɹ
    PO#FGPSF4DSJQUɿϒϥ΢βͷઃఆ
    ɹ
    PO3FBEZ4DSJQUɿεΫϦʔϯγϣοτલͷ6*ঢ়ଶมߋ
12. ४උ׬ྃʂ
    ⾣
    ςετ࣮ߦ
    Ὂ
    ʹ͛Δ
13. ݁Ռ ϛογϣϯίϯϓϦʔτʂʂʂʂʂ˝
14. ·ͱΊ ϏδϡΞϧϦάϨογϣϯςετͷྑ͍ͱ͜Ζ
    w ද่ࣔΕΛݕग़Ͱ͖Δ
    w ςετͷ༻ҙ͕༰қ
    ͜Μͳਓʹಛʹ͓͢͢Ίʂ
    ςετͷͳ͍؀ڥͰද่ࣔΕ͕ා͘ϦϑΝΫλϦ ϯά͕Ͱ͖ͯͳ͍ํ
    ɹΊͤ͟ʂϨΨγʔίʔυ͔Βͷ୤٫ʂ
15. ͓·͚ ঺հهࣄɿ
    ʮ
    #BDLTUPQ+4ͰϏδϡΞϧϦάϨογϣϯςετʂ
    ʯ
    
    IUUQTRJJUBDPNBIBSFODIJJUFNTDGEFD
    a
    ͋Γ͕ͱ͏