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

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

aharenchi
December 01, 2019

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

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

aharenchi

December 01, 2019
Tweet

Other Decks in Technology

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