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

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

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

3b0446884fc47b25b4bc2c8b06f97a24?s=128

moyashidaisuke

January 27, 2018
Tweet

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/

    ')B8FIP 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