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

by aharenchi

Slide 1

Slide 1 text

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

Slide 2

Slide 2 text

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

Slide 3

Slide 3 text

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

Slide 4

Slide 4 text

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

Slide 5

Slide 5 text

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

Slide 6

Slide 6 text

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

Slide 7

Slide 7 text

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

Slide 8

Slide 8 text

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

Slide 9

Slide 9 text

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

Slide 10

Slide 10 text

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

Slide 11

Slide 11 text

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

Slide 12

Slide 12 text

४උ׬ྃʂ ⾣ςετ࣮ߦ Ὂʹ͛Δ

Slide 13

Slide 13 text

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

Slide 14

Slide 14 text

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

Slide 15

Slide 15 text

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