mocha.jsͱbackstop.jsͰେن ໛ϦχϡʔΞϧͷϦάϨογϣ ϯςετ 2018/01/25 meguro.es #13 @ ϥΫεϧ༷ 

ࣗݾ঺հ • ͸͡Ί·ͯ͠ • ෱ాେཌྷʢ;͍͚ͩͩ͘͢ʣ • @moyashidaisuke • ίϩϓϥ -> ΈΜΕͼ • αʔόαΠυΑΓͰ͕͢ϑϩϯτ΋΍Γ· ͢ɻੲ͸jsͱcssͰΨνϟԋग़࡞ͬͨΓͯ͠ ·ͨ͠ɻ • ໨ࠇࡏॅ 

5NB8FP(A4M ,- .& !B .QXSYWUV#/2E"C82+ D?6<=2E9/ :B>'$B1LHE;.2EB0B"AL<;*@RSTD?  7GKN=2E9/ ')B8FI
P A4KNMJ3A/ O6LI92%?82'$BLPBA8E9/ 

େن໛ϦχϡʔΞϧ͠·ͨ͠ ʢ࢓༷ಉ͡··ʣ 

ର৅ • ͓๥͞Μศʢhttps://obousan.minrevi.jp/ʣ • Ϩεϙϯγϒ • IDҧؚ͍Ίͯϖʔδ਺600͘Β͍ • ΄ͱΜͲ͕੩తϖʔδ 

چ؀ڥ • WordpressͷݻఆϖʔδΦϯϦʔ • ๭Ϩϯλϧαʔό1୆ߏ੒ 

৽؀ڥ • Laravel + WordpressʢRestAPIʣ • AWSʢEC2ɺCloudFrontɺS3ɺALBɺRDSʣ • ͍ͭͰʹϑϧHTTPSԽ 

എܠ • HP͡Όͳͯ͘WEBαʔϏεͱͯ͠ػೳ௥Ճ͠ ͍͖͍ͯͨ • ৑௕Խͯ͠ͳ͍ͷͰ·ΕʹΑ͘མͪΔ • εύήςΟ • ౰࣌ͷ୲౰ऀෆࡏͰਖ਼͍͠࢓༷ෆ໌ 

ϦάϨογϣϯςετ 

΍Γ͍ͨࣄ • ͱΓ͋͑ͣݟͨ໨ಉ͡ΛΩʔϓ͍ͨ͠ • SEOؤுͬͯΔͷͰmetaλάͱ͔΋Ωʔϓ͠ ͍ͨ 

ݟͨ໨Ωʔϓ 

Backstop.js • https://github.com/garris/BackstopJS • ϒϥ΢βදࣔͨ݁͠ՌΛը૾Ͱอଘ • ը૾ಉ࢜Λൺֱͯ͠diffΛग़ͯ͘͠ΕΔ • ը໘αΠζࢦఆͰ͖ΔͷͰɺPCͱεϚϗ྆ํ νΣοΫՄೳ 

݁Ռ 

݁Ռ 

࢝Ίํ npm i phantomjs casperjs -g npm i backstopjs -g backstop reference backstop test 

ઃఆϑΝΠϧ { "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-Λྻڍ 

metaλάͱ͔Ωʔϓ 

mochaͱcheerio-httpcliͰࣗ࡞ • mocha -> testingͷFW • cheerio-httpcli -> εΫϨΠϐϯά • ؤுͬͯεΫϨΠϐϯάͯ͠metaλάΛऔಘ͠ ͯɺassert͢Δ • େͨ͠ࣄ͍ͯ͠ͳ͍ͷͰ͋Γͦ͏Ͱແ͔ͬͨʢ͋ͬ ͨΒڭ͍͑ͯͩ͘͞ʂʣ 

εΫϦϓτͪΒݟͤ 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); }); }); }); 

݁Ռ 

ۤ࿑ͱ͔޻෉ͱ͔ 

ۤ࿑ͱ͔޻෉ͱ͔ • backstopͷ݁Ռ͸ϖʔδ͕ॏ͍ͨͷʢը૾͕େྔʣͰద౓ͷ·ͱ Ίͳ͍ͱ։͚ͳ͍ • ग़ྗ݁ՌΛάϧʔϐϯάͰ͖ͳ͍ͷͰɺઃఆϑΝΠϧ͝ͱ෼͚ Δඞཁ͕͋Δ • ͦΕͰ΋ॏ͔ͨͬͨͷͰʢ100ը໘Ͱ1GB͘Β͍ɺɺɺʣɺS3 ʹhostingͨ͠ • backstop ͸ϖʔδ಺ϦϯΫ͕ແ͍ͷͰؤுͬͯεΫϩʔϧɺɺɺ • ݁ߏ͔͔࣌ؒΔͷͰɺશϖʔδΛର৅ʹ͢Δͷ͸໷தʹ࣮ߦ 

QA