BackstopJS + CircleCI + Docker で、HTML/CSSの自動テストをした話。(WordPressのテーマ編)

Frontend Nagoya #3 での登壇資料です。

Transcript

1. BackstopJS + CircleCI + Docker ͰɺHTML/CSSͷࣗಈςετΛͨ͠ ࿩ɻ(WordPressͷςʔϚฤ) Toro_Unit @2018.01.27 / Frontend Nagoya #3 1
2. $ whoami 2
3. Toro_Unit ઎෦ ߛ (͏Β΂ ͻΖ͠) HAMWORKS • Frontend Engineer • WordPress Plugin and Theme Developer • Custom Post Type Permalinks • Vanilla • more... Github: @torounit Twitter: @Toro_Unit 3
4. ௕໺ݝদຊࢢ͔Β͖·ͨ͠ɻ • ݱଘ12ఱकͷদຊ৓͋Γ·͢ɻ1 • ηΠδɾΦβϫ দຊϑΣεςΟόϧ ͱ͔΍ͬͯΔ֗Ͱ͢ɻ 1 https://commons.wikimedia.org/wiki/File: 130608_Matsumoto_Castle_Matsumoto_Nagano_pref_Japan02bs4.jpg Author: 663highland. License: CC BY 2.5 4
6. ͸͍ɻ 6
7. CSS͞ΘΔͷ͓͔ͬͯͬͳ͍Ͱ͢ΑͶ 7
8. Why? • ؅ཧ͠ʹ͍͘ɻ • ؆୯ʹ্ॻ͖Ͱ͖ͯ͠·͏ɻ • ͜ΘΕ΍͍͢ɻ • Өڹൣғ͕σΧΠ • 1ຕͷCSS͕୔ࢁͷHTMLʹద༻͞Ε͍ͯΔɻ • CMS౳ͰɺHTML͕มߋ͞ΕΔ͜ͱ΋ଟ͍ɻ 8
9. ҙਤ͠ͳ͍มߋʹؾ෇͘ͷ͕೉͍͠ 9
10. ͦͷ݁Ռ • มߋΛશͯϦηοτɻ • !important ΍ɺηϨΫλΛͱΓ͋͑ ͣڧ͘͢Δ͜ͱͰղܾɻ ͦͯ͠ߋʹ༧ظ͠ͳ͍ෆ۩߹ͷൃੜɻ 10
11. ߋʹCSSΛ৮Δͷ͕ڪ͘ͳΔѱ॥؀΁ 11
12. ͱ͜ΖͰ 12
13. DO YOU KNOW WordPress? 13
14. WordPress Theme: Vanilla • ੿ࡦͷςʔϚɻWordPress.org ʹܝ ࡌதɻ • wordpress.org/themes/vanilla/ • ·͊ͦͦ͜͜࢖ΘΕ͍ͯΔΒ͍͠ɻ 14
15. WordPress.org ʹࡌ͍ͬͯ ΔςʔϚɻ • ެࣜͷςʔϚϨϙδτϦɻ؅ཧը໘ ͔ΒΠϯετʔϧՄೳɻ • ܝࡌ͢ΔͨΊʹ͸༷ʑͳج४Λक ΓɺςʔϚϨϏϡʔΛ௨ա͠ͳ͚Ε ͹ͳΒͳ͍ɻ • Ξοϓσʔτ࣌͸ࠓͷͱ͜Ζ৹ࠪ ͸ແ͍ɻ • ؅ཧը໘͔Β1clickͰߋ৽Ͱ͖Δɻ 15
16. ߋ৽ϘλϯΛԡͨ͠ΒɺσβΠϯมΘͬͨʂ 16
17. ͜ΕΞΧϯͰ͢ΑͶɻ 17
18. ࢠςʔϚ • ಛఆͷςʔϚΛϕʔεʹɺҰ෦Λ্ॻ͖ͨ͠ςʔϚɻ 18
19. ߋ৽ϘλϯΛԡͨ͠ΒɺσβΠϯͣ͘Εͨʂ 19
20. ͜ΕΞΧϯͰ͢ΑͶɻ 20
21. ޙํޓ׵ੑΛ୲อ͢Δඞཁ͕͋Δɻ • PHP ͸΋ͪΖΜͷ͜ͱɺϚʔΫΞοϓ΍CSS΋ɻ • ՄೳͳݶΓഁյతมߋ͸཈͍͑ͨɻ 21
22. Ͱ΋ɺϦϦʔεޙʹͦΜͳʹมߋ͢Δʁ 22
23. • όάमਖ਼ɻ • ςʔϚΧελϚΠβʔ͕͏·͘ಈ͍͍ͯͳ͍ͱ͔ɺ৭ΜͳϨΠϠʔʹ·͕ͨ Δमਖ਼͕ඞཁͳ৔߹΋͋Δɻ • ؅ཧը໘͔Β͍Ζ͍Ζมߋग़དྷΔΑ͏ʹ͍ͯ͠ΔͱͲ͏ͯ͠΋ൃੜ͕ͪ͠ɻ • ػೳͷ௥Ճ • ࣗ෼Ͱ࢖͍ͬͯΔதͰ΍Γ͍ͨ͜ͱ΋ग़ͯ͘Δɻ • ͦͷͨͼʹผͷςʔϚΛ࡞Δͷ΋ɻɻɻɻ • ͳΜͱͳ͘Styls΍Ί͍ͨɻ • WordPress ͷ৽ػೳ΁ͷରԠɻ 23
24. Gutenberg • WordPress 5.0 Ͱ౥ࡌ༧ఆͷ৽͍͠Τ σΟλɻ • ϒϩοΫϕʔεɻ • ΤσΟλͷදݱྗ͕େ෯ʹڧԽɻ • ςʔϚͰίϨΛͪΌΜͱαϙʔτ͢ Δʹ͸ɺ͍Ζ͍Ζมߋ͕ඞཁɻ • ओʹCSSपΓΛվम͢Δඞཁ͕͋ Δɻ 24
25. ʮCSS͓͔ͬͳ͍ʯΛͲ͏ʹ͔ղফ͢ Δඞཁ͕͋Δɻ 25
26. طଘͷίʔυΛ࿔Δͷ͸ͦ΋ͦ΋ڪ͍ CSS ʹݶͬͨ࿩Ͱ͸ແ͍ 26
27. ڪාΛͲ͏ݮΒ͍͔ͯ͘͠ • ςετ΍ɺLint ͷࣗಈԽɻ • ྫ͑͹ɺPHPͷ৔߹͸ɺPHPUnit ΍ PHPCS౳Λ༻͍Δɻ • JSͳΒɺMocha ͱ͔ɺJest ͱ͔ɻ • ࣗಈతɾఆظతʹ࣮ߦɻ • Travis CI / Circle CI / Jenkins ౳Ͱ ίϛοτ͝ͱʹࣗಈ࣮ߦɻ • ϏϧυͷࣗಈԽɻ 27
28. ఆܕతͳ֬ೝ࡞ۀͷࣗಈԽɻ յΕͨ͜ͱɾ௚ͬͨ͜ͱͷݕग़ͷࣗಈԽɻ 28
29. ܧଓతΠϯςάϨʔγϣϯ Continuous Integration 29
30. ܧଓతΠϯςάϨʔγϣϯͱ͸ • Continuous Integration. ུͯ͠ CI. • ओʹϓϩάϥϚʔͷΞϓϦέʔγϣϯ࡞੒࣌ͷ඼࣭վળ΍ೲ ظͷ୹ॖͷͨΊͷश׳ͷ͜ͱ(by Wikipedia) • ۩ମతͳऔΓ૊Έͱͯ͠͸ςετ΍ϏϧυͳͲͷఆظతͳ࣮ ߦͳͲɻ • ࣗಈԽ͢ΔͨΊʹɺCI༻ͷαʔόʔΛ༻ҙͨ͠Γɻ 30
31. ओཁͳCIαʔϏεɺιϑτ΢ΣΞ SaaS • Travis CI • Circle CI • codeship ΞϓϦέʔγϣϯ • Jenkins 31
32. WordPress ͷϓϥάΠϯͰ͸ςετΛॻ͍ͨΓͯ͠·͢ɻ • WordPressͰߦ͏ܧଓతΠϯςάϨʔγϣϯͷεεϝ • WordPressͰߦ͏ܧଓతΠϯςάϨʔγϣϯೖ໳ฤ 32
33. HTML/CSS ։ൃͰ΋CI͍ͨ͠ɻ 33
34. BackstopJS • WEBαΠτɺΞϓϦͷݟͨ໨ͷճؼ ςετΛߦ͏πʔϧɻ • ϔουϨεϒϥ΢β( Headless Chrome ΍ɺPhamtomJS ౳) ͰεΫ ϦʔϯγϣοτΛऔಘɾൺֱ͠ɺม ߋΛݕ஌Ͱ͖Δɻ • ෳ਺ͷը໘αΠζɾϢʔβʔΤʔδΣ ϯτͳͲͰςετՄೳɻ 34
35. Πϯετʔϧ $ npm install -g backstopjs • άϩʔόϧ͡Όͳͯ͘΋OK. • Headless Chrome Λ࢖͏৔߹͸ɺGoogle Chrome ͳ͍͠ɺ Chromium ΋Πϯετʔϧɻ 35
36. ίϚϯυ $ backstop init ઃఆϑΝΠϧͷͻͳܗੜ੒ $ backstop reference ϦϑΝϨϯε(ਖ਼ղͷεΫϦʔϯγϣο τ)Λऔಘɻ $ backstop test ςετ࣮ߦ $ backstop approve ςετ݁ՌΛϦϑΝϨϯεʹऔΓࠐΈɻ 36
37. { "id": "vanilla_wp", "viewports": [ { "label": "phone", "width": 320, "height": 480 }, ], "onBeforeScript": "chromy/onBefore.js", "onReadyScript": "chromy/onReady.js", "scenarios": [ { "label": "Markup HTML Tags and Formatting", "url": "http://localhost/markup-html-tags-and-formatting/", "selectors": [] }, { "label": "Page Markup And Formatting", "url": "http://localhost/about/page-markup-and-formatting/", "selectors": [] }, ], "report": ["CI"], "engine": "chrome" } 37
40. • ෳ਺ͷ Viewport ͷΤϛϡϨʔτ΋Մೳɻ • Cookie Λྲྀ͠ࠐΊ͹ɺϩάΠϯ͕ඞཁͳϖʔδ΋ɻ • Ϛ΢εͷૢ࡞ͳͲ΋JSͰઃఆՄೳͳͷͰɺhoverɺclick࣌ͳ Ͳ΋ςετग़དྷΔɻ ϨϙδτϦͷReadme ͱɺexample ΛݟΔͱ͔ͳΓ৭Μͳίτ ͕ग़དྷΔɻ https://github.com/garris/BackstopJS/tree/master/examples 40
41. Note. • ฒྻ࣮ߦͳͲ΋Մೳɻ • ϦϑΝϨϯεσʔλ(ਖ਼ղͷσʔλ)ΛϨϙδτϦʹಥͬࠐΉ ͱͦͦ͜͜ॏ͍ɻ • ͜ͷςʔϚͷςετͷ৔߹͸ɺςετέʔε30݅Ͱ2෼ఔ ౓ɻ • ࣮ߦ؀ڥͳͲͰ΋େ͖͘มΘΔɻ 41
42. উखʹ࣮ߦ͍ͤͨ͞ʂ • खݩͰຖճճ͢ͷ͸໘౗ɻ • ໘౗ͳίτ͸๨Ε͕ͪɻɻɻɻ 42
43. CI αʔϏεͰճͦ͏ʂ 43
44. ͔͠͠ɾɾɾ 44
45. ࣗಈԽʹ·ͭΘΔน • ։ൃ؀ڥͱςετ؀ڥͷϑΥϯτ͕ҧ͏ɻ • શͯͷϚγϯʹώϥΪϊϑΥϯτ͸ೖ͍ͬͯͳ͍͠ŋŋŋ • ͦ΋ͦ΋OS͕ҧ͏ɻCIαʔϏεͷOS͸Linux͕΄ͱΜͲɻ • ϑΥϯτΛҰகͤͯ͞΋ɺϨϯμϦϯά͕ҧͬͨΓŋŋŋɻ 45
46. Ͳ͜Ͱ΋ಉ͡؀ڥ͕༻ҙͰ͖Ε͹ŋŋŋ 46
47. Ծ૝Խٕज़ʂ • Vagrant (Virtualbox) • Docker • LXC ͜ΕΒͷٕज़Λ࢖͑͹ɺOS΍؀ڥͷҧ͍ΛٵऩͰ͖Δʂ 47
48. ͱ͍͏Θ͚Ͱ Docker • ࠷ۙΑ͘ฉ͘ίϯςφܕͷԾ૝Խٕ ज़ɻ • ىಈ͕଎͍ɻ • ϏϧυࡁΈͷΠϝʔδΛڞ༗͢Ε ͹؀ڥͷ౷Ұ΋؆୯ɻ • vagrant ౳ΑΓखܰʹѻ͍΍͍͢ɻ • Windows Ͱ΋ಈ͘ʂ (Windows 10 Pro) 48
49. ࡶͳ Docker Πϝʔδͷ࡞Γํղઆɻ Dockerfile ʹɺͣΒͣΒίϚϯυΛهड़ɻ FROM ubuntu:16.04 RUN apt-get install -y chromium-browser ENV CHROME_PATH /usr/bin/chromium-browser RUN apt-get install -y nodejs Ubuntu ʹ Chromium ͱ Node.js ͕ೖͬͨ؀ڥΛखܰʹ࡞੒Ͱ ͖Δɻ 49
50. Docker ΠϝʔδͷϏϧυ $ docker build -t yourname/myimage ݱࡏͷσΟϨΫτϦΛ/workdirʹϚ΢ϯτͯ͠ɺDocker Ϛγϯͷɹbash Λىಈ $ docker run --rm -v \ `pwd`:/workdir -w /workdir -it yourname/myimage bash 50
51. docker hub ʹΠϝʔδΛެ։ɻ $ docker push yourname/myimage 51
52. More • Docker Documentation | Docker Documentation • Docker υΩϡϝϯτ೔ຊޠԽϓϩδΣΫτ — Docker-docs- ja 17.06.Beta υΩϡϝϯτ 52
53. BackstopJS ͱ WordPress ͷ࣮ߦ؀ڥΛ Docker Ͱ࡞ͬͨɻ • torounit/wp-theme-test-env - Docker Hub • Github: torounit/wp-theme-test-env Chromium / Node.js / Noto Sans ͱ WordPress ͷಈ࡞؀ڥɻ WordPress ͷ ςʔϚϢχοτςετσʔλ΋ઃఆࡁΈɻ 53
54. Note. backstopJS ͷ docker Πϝʔδ΋͋Δɻ • backstopjs/backstopjs - Docker Hub 54
55. Let's ࣗಈԽ ! 55
56. ࠓճ͸ Circle CI • OSSͩͱແྉͰ࢖͑Δɻ • Docker αϙʔτɻ • store_artifacts Ͱੜ੒෺Λอଘ& ϒϥ΢βͰ؆୯ʹ֬ೝͰ͖ΔͷͰɺ BackstopJSΛ࢖͏ͱ͖͸ศརɻ 56
58. Circle CI ͷઃఆɻ /.circleci/config.yml ʹઃఆΛهड़ɻDocker ରԠͳͷ͸ version 2ܥͳͷͰ஫ҙɻ 58
59. version: 2.0 jobs: test: docker: - image: torounit/wp-theme-test-env:latest working_directory: /var/www/wordpress/wp-content/themes/vanilla steps: - checkout - setup_remote_docker: docker_layer_caching: true - run: command: npm install - run: command: sudo service php7.0-fpm start & sudo service nginx start & sudo service mysql start - run: command: wp theme activate vanilla --path=/var/www/wordpress - run: command: curl http://localhost > /dev/null - run: command: npm test - store_artifacts: path: backstop_data destination: artifacts - store_test_results: path: backstop_data/ci_report 59
60. 1. Circle CI ʹϩάΠϯ 2. Projects -> AddProjectͰɺϨϙδτϦΛબ୒͢Δɻ 3. git commit & push Ͱςετ͕࣮ߦ͞ΕΔɻ 60
61. • store_test_results ͰɺxUnitܗࣜ ͷςετ݁Ռ͕อଘ͞ΕΔ৔ॴΛࢦ ఆ͢Δͱςετ݁Ռ͕ҰཡͰΈΕ Δɻ • Artifacts ͷλϒ͔Βɺอଘͨ͠ςε τੜ੒෺Λ֬ೝͰ͖Δɻ • node_modules ౳͸ΩϟογϡՄ ೳɻ 61
62. ޮೳɾޮՌ • ҙਤ͠ͳ͍มߋΛݕग़Λָʹݕग़Ͱ͖Δɻ • CSSͷབྷΜͩόάϑΟοΫε࣌ʹ͸݁ߏҖྗɻ • CSSͷϦϑΝΫλϦϯάҊ݅Ͱ͸ͭΑ͍ɻ • ϥϯμϜཁૉ౳ɺςετͮ͠Β͍ཁૉ΋͋Δɻ 62
63. Note. • ໨ࢹͰͷςετΛޮ཰తʹػձʹߦΘͤΔπʔϧɻ • ϖʔδ਺͕ଟ͍ͱ΍ͬͺΓ࣌ؒ͸͔͔ΔͷͰɺͳΜͰ΋͔Μ Ͱ΋΍Ε͹ྑ͍ͬͯϞϊͰ͸ͳ͍ؾ͸͢Δɻ • έʔεόΠέʔεɻ • ελΠϧΨΠυ౳Λ૊Έ߹Θͤͯ΍Δͷ͕Αͦ͞͏ɻ • ෳ਺ͷϒϥ΢βͰͷݟͨ໨ͷҧ͍Λݕग़͢ΔϞϊͰ͸ແ͍ɻ 63
64. https://github.com/torounit/vanilla/ 64
65. ͔͍ͭͲ͜Ζ • ӡ༻தͷαʔϏεͷCSSϦϑΝΫλϦϯά • େن໛ͳECͱ͔ͰɺLP౳Λ୔ࢁ࡞ͬͨΓ͍ͯ͠Δέʔεɻ • σβΠϯϦχϡʔΞϧΛ؆୯ʹ͸Ͱ͖ͳ͍͕ɺ֦ுΛͯ͠ ͍͘Α͏ͳϞϊɻ 65
66. ط஌ͷ໰୊ͳͲ • ݁ߏCPU౳ʹෛՙ͕͔͔ΔͷͰɺࣗલͰCIαʔόʔΛ༻ҙ͢ΔͳΒ ͦΕͳΓʹεϖοΫ͕ඞཁɻ • େྔͷεΫϦʔϯγϣοτΛऔΔͷͰϨϙδτϦ͕ංେԽ͢Δɻ • 16384pxҎ্ͷεΫϦʔϯγϣοτ͸ChromeͩͱࡱΕͳ͍ɻ • ͦΕҎԼͰ΋௕͍ϖʔδͩͱਖ਼͘͠औಘग़དྷͳ͍͜ͱ΋ɻʢ؀ڥ ґଘ͢ΔͬΆ͍ɻʣ • ςετΛηϨΫλͳͲͰ෼ׂͯ͠ରԠՄೳɻ 66
67. let's Contribute! • garris/BackstopJS: Catch CSS curve balls. 67
68. Thanks! Github: @torounit Twitter: @Toro_Unit Facebook: fb.me/torounit Blog: https://torounit.com 68