20180125mocha.jsとbackstop.jsで大規模リニューアルのリグレッションテスト

Transcript

1. mocha.jsͱbackstop.jsͰେن ໛ϦχϡʔΞϧͷϦάϨογϣ ϯςετ 2018/01/25 meguro.es #13 @ ϥΫεϧ༷
2. ࣗݾ঺հ • ͸͡Ί·ͯ͠ • ෱ాେཌྷʢ;͍͚ͩͩ͘͢ʣ • @moyashidaisuke • ίϩϓϥ -> ΈΜΕͼ • αʔόαΠυΑΓͰ͕͢ϑϩϯτ΋΍Γ· ͢ɻੲ͸jsͱcssͰΨνϟԋग़࡞ͬͨΓͯ͠ ·ͨ͠ɻ • ໨ࠇࡏॅ
3. 5NB8FP(A4M ,- .& !B .QXSYWUV#/2E"C82+ D? 6<=2E9/ :B>'$B1LHE;.2EB0B"AL<;*@RSTD?  7GKN=2E9/ ')B8FI
   P A4KNMJ3A/ O6LI92%?82'$B LPBA8E9/
4. େن໛ϦχϡʔΞϧ͠·ͨ͠ ʢ࢓༷ಉ͡··ʣ
5. ର৅ • ͓๥͞Μศʢhttps://obousan.minrevi.jp/ʣ • Ϩεϙϯγϒ • IDҧؚ͍Ίͯϖʔδ਺600͘Β͍ • ΄ͱΜͲ͕੩తϖʔδ
6. چ؀ڥ • WordpressͷݻఆϖʔδΦϯϦʔ • ๭Ϩϯλϧαʔό1୆ߏ੒
7. ৽؀ڥ • Laravel + WordpressʢRestAPIʣ • AWSʢEC2ɺCloudFrontɺS3ɺALBɺRDSʣ • ͍ͭͰʹϑϧHTTPSԽ
8. എܠ • HP͡Όͳͯ͘WEBαʔϏεͱͯ͠ػೳ௥Ճ͠ ͍͖͍ͯͨ • ৑௕Խͯ͠ͳ͍ͷͰ·ΕʹΑ͘མͪΔ • εύήςΟ • ౰࣌ͷ୲౰ऀෆࡏͰਖ਼͍͠࢓༷ෆ໌
9. ϦάϨογϣϯςετ
10. ΍Γ͍ͨࣄ • ͱΓ͋͑ͣݟͨ໨ಉ͡ΛΩʔϓ͍ͨ͠ • SEOؤுͬͯΔͷͰmetaλάͱ͔΋Ωʔϓ͠ ͍ͨ
11. ݟͨ໨Ωʔϓ
12. Backstop.js • https://github.com/garris/BackstopJS • ϒϥ΢βදࣔͨ݁͠ՌΛը૾Ͱอଘ • ը૾ಉ࢜Λൺֱͯ͠diffΛग़ͯ͘͠ΕΔ • ը໘αΠζࢦఆͰ͖ΔͷͰɺPCͱεϚϗ྆ํ νΣοΫՄೳ
13. ݁Ռ
14. ݁Ռ
15. ࢝Ίํ npm i phantomjs casperjs -g npm i backstopjs -g backstop reference backstop test
16. ઃఆϑΝΠϧ { "viewports": [ { "label": "phone", "width": 320, "height": 480 }, { "label": "tablet", "width": 1024, "height": 768 } ], "scenarios": [ {"label": "/","url": “https://testdomain/" ,"referenceUrl": "http://obousan.minrevi.jp/"}, {"label": "/aisatsu-reibun/","url": “https://testdomain/aisatsu-reibun/", "referenceUrl": "http://obousan.minrevi.jp/aisatsu-reibun/"}, ], Ωϟϓνϟ͍ͨ͠ ը໘αΠζ ର৅ͷ63-Λྻڍ
17. metaλάͱ͔Ωʔϓ
18. mochaͱcheerio-httpcliͰࣗ࡞ • mocha -> testingͷFW • cheerio-httpcli -> εΫϨΠϐϯά • ؤுͬͯεΫϨΠϐϯάͯ͠metaλάΛऔಘ͠ ͯɺassert͢Δ • େͨ͠ࣄ͍ͯ͠ͳ͍ͷͰ͋Γͦ͏Ͱແ͔ͬͨʢ͋ͬ ͨΒڭ͍͑ͯͩ͘͞ʂʣ
19. εΫϦϓτͪΒݟͤ function getSeoData(url) { const data = {}; const result = client.fetchSync(url); data.title = result.$('title').text(); data.keywords = result.$('meta[name="keywords"]').attr('content'); return data; } describe(senario.url, () => { let newSeoData, oldSeoData; before(done => { newSeoData = getSeoData(newUrl); oldSeoData = getSeoData(oldUrl); done(); }); // ҎԼςετέʔε it('title', () => { assert.equal(newSeoData.title, oldSeoData.title); }); it('keywords', () => { assert.equal(newSeoData.keywords, oldSeoData.keywords); }); }); });
20. ݁Ռ
21. ۤ࿑ͱ͔޻෉ͱ͔
22. ۤ࿑ͱ͔޻෉ͱ͔ • backstopͷ݁Ռ͸ϖʔδ͕ॏ͍ͨͷʢը૾͕େྔʣͰద౓ͷ·ͱ Ίͳ͍ͱ։͚ͳ͍ • ग़ྗ݁ՌΛάϧʔϐϯάͰ͖ͳ͍ͷͰɺઃఆϑΝΠϧ͝ͱ෼͚ Δඞཁ͕͋Δ • ͦΕͰ΋ॏ͔ͨͬͨͷͰʢ100ը໘Ͱ1GB͘Β͍ɺɺɺʣɺS3 ʹhostingͨ͠ • backstop ͸ϖʔδ಺ϦϯΫ͕ແ͍ͷͰؤுͬͯεΫϩʔϧɺɺɺ • ݁ߏ͔͔࣌ؒΔͷͰɺશϖʔδΛର৅ʹ͢Δͷ͸໷தʹ࣮ߦ
23. QA