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

Ebc735cb42fdd0b35c0c2eebfa11d96c?s=47 aharenchi
December 01, 2019

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

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

Ebc735cb42fdd0b35c0c2eebfa11d96c?s=128

aharenchi

December 01, 2019
Tweet

Transcript

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

  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. ৄࡉઃఆ 1VQQFUFFSPS$ISPNZ+44DSJQUΛ࢖͏͜ͱͰҎԼͷରԠ͕Մೳ w ϕʔγοΫೝূରԠ w ϩάΠϯඇϩάΠϯը໘ରԠ w ࡱӨલͷ6*มߋରԠ Ϛ΢εΦʔόʔը૾ࠩ͠ସ͑ ςετ४උɹΦϓγϣϯ

    TDFOBSJPTɿςετ಺༰ ɹPO#FGPSF4DSJQUɿϒϥ΢βͷઃఆ ɹPO3FBEZ4DSJQUɿεΫϦʔϯγϣοτલͷ6*ঢ়ଶมߋ
  12. ४උ׬ྃʂ ⾣ςετ࣮ߦ Ὂʹ͛Δ

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

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

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