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

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

Transcript

1. ϨΨγʔίʔυͰ
   ϏδϡΞϧϦάϨογϣϯςετ
   Λ΍ͬͯΈͨʂ
   1)1$POGFSFODF-JHIUOJOH5BML!
   Ѩ೾࿈ஐܙ
   

   View Slide

2. ࣗݾ঺հ
   ͋͸ΕΜ
   ΤΩαΠτגࣜձࣾ
   ৽ଔ೥໨1)1FS
   !ZVDP@NN
   

   View Slide

3. ੢ྐྵ೥ʜ
   ฐࣾͷͱ͋ΔͭͷαʔϏε͸
   جຊػೳ͕΄ͱΜͲಉͩͬͨ͡ͷͰɺ
   ಉ͡ίʔυͰ։ൃ͞Ε͍ͯͨ˝
   

   View Slide

4. αʔϏε͸ಠࣗʹਐԽ࢝͠ΊɺಠࣗػೳͷͨΊͷ
   ग़͠෼͚ίʔυ͕૿͍͖͑ͯɺߴ౓ʹෳࡶʹͳͬͨɻ
   Ὂ͜ͷ··͕Μ͹Δ
   ⾣αʔϏεɺͭͷϓϩδΣΫτʹ͢Δ
   

   View Slide

5. ϓϩδΣΫτΛίϐʔ͠ɺ̎ͭ༻ҙ͢Δ͜ͱͰ
   ෼͚Δ͜ͱʹ੒ޭɻ
   ࣍ʹɺෆཁʹͳͬͨยํͷ੩తϑΝΠϧ΍ॲཧΛ
   ࡟আ͢Δඞཁ͕͋Δɻ˝
   

   View Slide

6. ੩తϑΝΠϧͷ࡟আ׬ྃɻ
   ݅ۙ͘ͷϖʔδΛݕূ͢Δํ๏͸ʁ
   ⾣खಈͰݕূ
   Ὂʜʜ
   

   View Slide

7. ੩తϑΝΠϧͷ࡟আ׬ྃɻ
   ݅ۙ͘ͷϖʔδΛݕূ͢Δํ๏͸ʁ
   ὊखಈͰݕূ
   ⾣ϏδϡΞϧϦάϨογϣϯςετͰݕূ
   

   View Slide

8. ϏδϡΞϧϦάϨογϣϯςετͱ͸
   εΫϦʔϯγϣοτΛࡱӨ͠ɺ
   લޙͰࠩ෼͕ग़͍ͯͳ͍͔ݕূ͢Δςετ
   $44΍ίʔυมߋʹΑΔද่ࣔΕ͕ͳ͍͔ݕূ͢Δͷʹ༏Ε͍ͯΔ
   ݕূͰ͖Δ͜ͱ
   ɾϘλϯ΍ը૾ͷදࣔՄ൱
   ɾϖʔδͷදࣔՄ൱
   ݕূͰ͖ͳ͍͜ͱ
   ɾϖʔδભҠ
   

   View Slide

9. ࢖͏΋ͷ
   #BDLTUPQ+4ɹ
   ϏδϡΞϧϦάϨογϣϯςετΛߦ͑ΔϑϨʔϜϫʔΫ
   ςετͷઃఆ CBDLTUPQKTPO
   ɹ
   εΫϦʔϯγϣοτੜ੒
   มߋલͷεΫϦʔϯγϣοτʢ3FGFSFODFʣΛอଘ
   มߋޙͷεΫϦʔϯγϣοτʢ5FTUʣΛอଘ
   ྆ऀΛൺֱͨ͠Ϩϙʔτੜ੒
   ςετͷྲྀΕ
   ࢲୡ͕΍Δ͜ͱʂ
   Node.js + Puppeteer or ChromyJS
   

   View Slide

10. ςετ४උɹඞਢ
    ̍ൺֱͰ͖Δ؀ڥͷ༻ҙ
    ྫɿຊ൪؀ڥͱεςʔδ؀ڥ
    
    ςετͷઃఆ
    ʲඞਢ߲໨ʳ
    JEɿϨϙʔτλΠτϧ
    WJFXQPSUTɿࡱӨը໘αΠζ
    TDFOBSJPTɿςετ಺༰
    ɹMBCFMɿςετλΠτϧ
    ɹVSMɿมߋޙ63-ɹ
    SFGFSFODF6SMɿมߋલ63-
    มߋޙ؀ڥ
    มߋલ؀ڥ
    

    View Slide

11. ৄࡉઃఆ
    1VQQFUFFSPS$ISPNZ+44DSJQUΛ࢖͏͜ͱͰҎԼͷରԠ͕Մೳ
    w ϕʔγοΫೝূରԠ
    w ϩάΠϯඇϩάΠϯը໘ରԠ
    w ࡱӨલͷ6*มߋରԠ Ϛ΢εΦʔόʔը૾ࠩ͠ସ͑
    
    ςετ४උɹΦϓγϣϯ
    TDFOBSJPTɿςετ಺༰
    ɹPO#FGPSF4DSJQUɿϒϥ΢βͷઃఆ
    ɹPO3FBEZ4DSJQUɿεΫϦʔϯγϣοτલͷ6*ঢ়ଶมߋ
    

    View Slide

12. ४උ׬ྃʂ
    ⾣ςετ࣮ߦ
    Ὂʹ͛Δ
    

    View Slide

13. ݁Ռ
    ϛογϣϯίϯϓϦʔτʂʂʂʂʂ˝
    

    View Slide

14. ·ͱΊ
    ϏδϡΞϧϦάϨογϣϯςετͷྑ͍ͱ͜Ζ
    w ද่ࣔΕΛݕग़Ͱ͖Δ
    w ςετͷ༻ҙ͕༰қ
    ͜Μͳਓʹಛʹ͓͢͢Ίʂ
    ςετͷͳ͍؀ڥͰද่ࣔΕ͕ා͘ϦϑΝΫλϦ
    ϯά͕Ͱ͖ͯͳ͍ํ
    ɹΊͤ͟ʂϨΨγʔίʔυ͔Βͷ୤٫ʂ
    

    View Slide

15. ͓·͚
    ঺հهࣄɿ
    ʮ#BDLTUPQ+4ͰϏδϡΞϧϦάϨογϣϯςετʂʯ
    IUUQTRJJUBDPNBIBSFODIJJUFNTDGEFD
    a͋Γ͕ͱ͏
    

    View Slide