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

Slide 1

Slide 1 text

BackstopJS + CircleCI + Docker ͰɺHTML/CSSͷࣗಈςετΛͨ͠ ࿩ɻ(WordPressͷςʔϚฤ) Toro_Unit @2018.01.27 / Frontend Nagoya #3 1

Slide 2

Slide 2 text

$ whoami 2

Slide 3

Slide 3 text

Toro_Unit ઎෦ ߛ (͏Β΂ ͻΖ͠) HAMWORKS • Frontend Engineer • WordPress Plugin and Theme Developer • Custom Post Type Permalinks • Vanilla • more... Github: @torounit Twitter: @Toro_Unit 3

Slide 4

Slide 4 text

௕໺ݝদຊࢢ͔Β͖·ͨ͠ɻ • ݱଘ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

Slide 5

Slide 5 text

Slide 6

Slide 6 text

͸͍ɻ 6

Slide 7

Slide 7 text

CSS͞ΘΔͷ͓͔ͬͯͬͳ͍Ͱ͢ΑͶ 7

Slide 8

Slide 8 text

Why? • ؅ཧ͠ʹ͍͘ɻ • ؆୯ʹ্ॻ͖Ͱ͖ͯ͠·͏ɻ • ͜ΘΕ΍͍͢ɻ • Өڹൣғ͕σΧΠ • 1ຕͷCSS͕୔ࢁͷHTMLʹద༻͞Ε͍ͯΔɻ • CMS౳ͰɺHTML͕มߋ͞ΕΔ͜ͱ΋ଟ͍ɻ 8

Slide 9

Slide 9 text

ҙਤ͠ͳ͍มߋʹؾ෇͘ͷ͕೉͍͠ 9

Slide 10

Slide 10 text

ͦͷ݁Ռ • มߋΛશͯϦηοτɻ • !important ΍ɺηϨΫλΛͱΓ͋͑ ͣڧ͘͢Δ͜ͱͰղܾɻ ͦͯ͠ߋʹ༧ظ͠ͳ͍ෆ۩߹ͷൃੜɻ 10

Slide 11

Slide 11 text

ߋʹCSSΛ৮Δͷ͕ڪ͘ͳΔѱ॥؀΁ 11

Slide 12

Slide 12 text

ͱ͜ΖͰ 12

Slide 13

Slide 13 text

DO YOU KNOW WordPress? 13

Slide 14

Slide 14 text

WordPress Theme: Vanilla • ੿ࡦͷςʔϚɻWordPress.org ʹܝ ࡌதɻ • wordpress.org/themes/vanilla/ • ·͊ͦͦ͜͜࢖ΘΕ͍ͯΔΒ͍͠ɻ 14

Slide 15

Slide 15 text

WordPress.org ʹࡌ͍ͬͯ ΔςʔϚɻ • ެࣜͷςʔϚϨϙδτϦɻ؅ཧը໘ ͔ΒΠϯετʔϧՄೳɻ • ܝࡌ͢ΔͨΊʹ͸༷ʑͳج४Λक ΓɺςʔϚϨϏϡʔΛ௨ա͠ͳ͚Ε ͹ͳΒͳ͍ɻ • Ξοϓσʔτ࣌͸ࠓͷͱ͜Ζ৹ࠪ ͸ແ͍ɻ • ؅ཧը໘͔Β1clickͰߋ৽Ͱ͖Δɻ 15

Slide 16

Slide 16 text

ߋ৽ϘλϯΛԡͨ͠ΒɺσβΠϯมΘͬͨʂ 16

Slide 17

Slide 17 text

͜ΕΞΧϯͰ͢ΑͶɻ 17

Slide 18

Slide 18 text

ࢠςʔϚ • ಛఆͷςʔϚΛϕʔεʹɺҰ෦Λ্ॻ͖ͨ͠ςʔϚɻ 18

Slide 19

Slide 19 text

ߋ৽ϘλϯΛԡͨ͠ΒɺσβΠϯͣ͘Εͨʂ 19

Slide 20

Slide 20 text

͜ΕΞΧϯͰ͢ΑͶɻ 20

Slide 21

Slide 21 text

ޙํޓ׵ੑΛ୲อ͢Δඞཁ͕͋Δɻ • PHP ͸΋ͪΖΜͷ͜ͱɺϚʔΫΞοϓ΍CSS΋ɻ • ՄೳͳݶΓഁյతมߋ͸཈͍͑ͨɻ 21

Slide 22

Slide 22 text

Ͱ΋ɺϦϦʔεޙʹͦΜͳʹมߋ͢Δʁ 22

Slide 23

Slide 23 text

• όάमਖ਼ɻ • ςʔϚΧελϚΠβʔ͕͏·͘ಈ͍͍ͯͳ͍ͱ͔ɺ৭ΜͳϨΠϠʔʹ·͕ͨ Δमਖ਼͕ඞཁͳ৔߹΋͋Δɻ • ؅ཧը໘͔Β͍Ζ͍Ζมߋग़དྷΔΑ͏ʹ͍ͯ͠ΔͱͲ͏ͯ͠΋ൃੜ͕ͪ͠ɻ • ػೳͷ௥Ճ • ࣗ෼Ͱ࢖͍ͬͯΔதͰ΍Γ͍ͨ͜ͱ΋ग़ͯ͘Δɻ • ͦͷͨͼʹผͷςʔϚΛ࡞Δͷ΋ɻɻɻɻ • ͳΜͱͳ͘Styls΍Ί͍ͨɻ • WordPress ͷ৽ػೳ΁ͷରԠɻ 23

Slide 24

Slide 24 text

Gutenberg • WordPress 5.0 Ͱ౥ࡌ༧ఆͷ৽͍͠Τ σΟλɻ • ϒϩοΫϕʔεɻ • ΤσΟλͷදݱྗ͕େ෯ʹڧԽɻ • ςʔϚͰίϨΛͪΌΜͱαϙʔτ͢ Δʹ͸ɺ͍Ζ͍Ζมߋ͕ඞཁɻ • ओʹCSSपΓΛվम͢Δඞཁ͕͋ Δɻ 24

Slide 25

Slide 25 text

ʮCSS͓͔ͬͳ͍ʯΛͲ͏ʹ͔ղফ͢ Δඞཁ͕͋Δɻ 25

Slide 26

Slide 26 text

طଘͷίʔυΛ࿔Δͷ͸ͦ΋ͦ΋ڪ͍ CSS ʹݶͬͨ࿩Ͱ͸ແ͍ 26

Slide 27

Slide 27 text

ڪාΛͲ͏ݮΒ͍͔ͯ͘͠ • ςετ΍ɺLint ͷࣗಈԽɻ • ྫ͑͹ɺPHPͷ৔߹͸ɺPHPUnit ΍ PHPCS౳Λ༻͍Δɻ • JSͳΒɺMocha ͱ͔ɺJest ͱ͔ɻ • ࣗಈతɾఆظతʹ࣮ߦɻ • Travis CI / Circle CI / Jenkins ౳Ͱ ίϛοτ͝ͱʹࣗಈ࣮ߦɻ • ϏϧυͷࣗಈԽɻ 27

Slide 28

Slide 28 text

ఆܕతͳ֬ೝ࡞ۀͷࣗಈԽɻ յΕͨ͜ͱɾ௚ͬͨ͜ͱͷݕग़ͷࣗಈԽɻ 28

Slide 29

Slide 29 text

ܧଓతΠϯςάϨʔγϣϯ Continuous Integration 29

Slide 30

Slide 30 text

ܧଓతΠϯςάϨʔγϣϯͱ͸ • Continuous Integration. ུͯ͠ CI. • ओʹϓϩάϥϚʔͷΞϓϦέʔγϣϯ࡞੒࣌ͷ඼࣭վળ΍ೲ ظͷ୹ॖͷͨΊͷश׳ͷ͜ͱ(by Wikipedia) • ۩ମతͳऔΓ૊Έͱͯ͠͸ςετ΍ϏϧυͳͲͷఆظతͳ࣮ ߦͳͲɻ • ࣗಈԽ͢ΔͨΊʹɺCI༻ͷαʔόʔΛ༻ҙͨ͠Γɻ 30

Slide 31

Slide 31 text

ओཁͳCIαʔϏεɺιϑτ΢ΣΞ SaaS • Travis CI • Circle CI • codeship ΞϓϦέʔγϣϯ • Jenkins 31

Slide 32

Slide 32 text

WordPress ͷϓϥάΠϯͰ͸ςετΛॻ͍ͨΓͯ͠·͢ɻ • WordPressͰߦ͏ܧଓతΠϯςάϨʔγϣϯͷεεϝ • WordPressͰߦ͏ܧଓతΠϯςάϨʔγϣϯೖ໳ฤ 32

Slide 33

Slide 33 text

HTML/CSS ։ൃͰ΋CI͍ͨ͠ɻ 33

Slide 34

Slide 34 text

BackstopJS • WEBαΠτɺΞϓϦͷݟͨ໨ͷճؼ ςετΛߦ͏πʔϧɻ • ϔουϨεϒϥ΢β( Headless Chrome ΍ɺPhamtomJS ౳) ͰεΫ ϦʔϯγϣοτΛऔಘɾൺֱ͠ɺม ߋΛݕ஌Ͱ͖Δɻ • ෳ਺ͷը໘αΠζɾϢʔβʔΤʔδΣ ϯτͳͲͰςετՄೳɻ 34

Slide 35

Slide 35 text

Πϯετʔϧ $ npm install -g backstopjs • άϩʔόϧ͡Όͳͯ͘΋OK. • Headless Chrome Λ࢖͏৔߹͸ɺGoogle Chrome ͳ͍͠ɺ Chromium ΋Πϯετʔϧɻ 35

Slide 36

Slide 36 text

ίϚϯυ $ backstop init ઃఆϑΝΠϧͷͻͳܗੜ੒ $ backstop reference ϦϑΝϨϯε(ਖ਼ղͷεΫϦʔϯγϣο τ)Λऔಘɻ $ backstop test ςετ࣮ߦ $ backstop approve ςετ݁ՌΛϦϑΝϨϯεʹऔΓࠐΈɻ 36

Slide 37

Slide 37 text

{ "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

Slide 38

Slide 38 text

Slide 39

Slide 39 text

Slide 40

Slide 40 text

• ෳ਺ͷ Viewport ͷΤϛϡϨʔτ΋Մೳɻ • Cookie Λྲྀ͠ࠐΊ͹ɺϩάΠϯ͕ඞཁͳϖʔδ΋ɻ • Ϛ΢εͷૢ࡞ͳͲ΋JSͰઃఆՄೳͳͷͰɺhoverɺclick࣌ͳ Ͳ΋ςετग़དྷΔɻ ϨϙδτϦͷReadme ͱɺexample ΛݟΔͱ͔ͳΓ৭Μͳίτ ͕ग़དྷΔɻ https://github.com/garris/BackstopJS/tree/master/examples 40

Slide 41

Slide 41 text

Note. • ฒྻ࣮ߦͳͲ΋Մೳɻ • ϦϑΝϨϯεσʔλ(ਖ਼ղͷσʔλ)ΛϨϙδτϦʹಥͬࠐΉ ͱͦͦ͜͜ॏ͍ɻ • ͜ͷςʔϚͷςετͷ৔߹͸ɺςετέʔε30݅Ͱ2෼ఔ ౓ɻ • ࣮ߦ؀ڥͳͲͰ΋େ͖͘มΘΔɻ 41

Slide 42

Slide 42 text

উखʹ࣮ߦ͍ͤͨ͞ʂ • खݩͰຖճճ͢ͷ͸໘౗ɻ • ໘౗ͳίτ͸๨Ε͕ͪɻɻɻɻ 42

Slide 43

Slide 43 text

CI αʔϏεͰճͦ͏ʂ 43

Slide 44

Slide 44 text

͔͠͠ɾɾɾ 44

Slide 45

Slide 45 text

ࣗಈԽʹ·ͭΘΔน • ։ൃ؀ڥͱςετ؀ڥͷϑΥϯτ͕ҧ͏ɻ • શͯͷϚγϯʹώϥΪϊϑΥϯτ͸ೖ͍ͬͯͳ͍͠ŋŋŋ • ͦ΋ͦ΋OS͕ҧ͏ɻCIαʔϏεͷOS͸Linux͕΄ͱΜͲɻ • ϑΥϯτΛҰகͤͯ͞΋ɺϨϯμϦϯά͕ҧͬͨΓŋŋŋɻ 45

Slide 46

Slide 46 text

Ͳ͜Ͱ΋ಉ͡؀ڥ͕༻ҙͰ͖Ε͹ŋŋŋ 46

Slide 47

Slide 47 text

Ծ૝Խٕज़ʂ • Vagrant (Virtualbox) • Docker • LXC ͜ΕΒͷٕज़Λ࢖͑͹ɺOS΍؀ڥͷҧ͍ΛٵऩͰ͖Δʂ 47

Slide 48

Slide 48 text

ͱ͍͏Θ͚Ͱ Docker • ࠷ۙΑ͘ฉ͘ίϯςφܕͷԾ૝Խٕ ज़ɻ • ىಈ͕଎͍ɻ • ϏϧυࡁΈͷΠϝʔδΛڞ༗͢Ε ͹؀ڥͷ౷Ұ΋؆୯ɻ • vagrant ౳ΑΓखܰʹѻ͍΍͍͢ɻ • Windows Ͱ΋ಈ͘ʂ (Windows 10 Pro) 48

Slide 49

Slide 49 text

ࡶͳ Docker Πϝʔδͷ࡞Γํղઆɻ Dockerﬁle ʹɺͣΒͣΒίϚϯυΛهड़ɻ 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

Slide 50

Slide 50 text

Docker ΠϝʔδͷϏϧυ $ docker build -t yourname/myimage ݱࡏͷσΟϨΫτϦΛ/workdirʹϚ΢ϯτͯ͠ɺDocker Ϛγϯͷɹbash Λىಈ $ docker run --rm -v \ `pwd`:/workdir -w /workdir -it yourname/myimage bash 50

Slide 51

Slide 51 text

docker hub ʹΠϝʔδΛެ։ɻ $ docker push yourname/myimage 51

Slide 52

Slide 52 text

More • Docker Documentation | Docker Documentation • Docker υΩϡϝϯτ೔ຊޠԽϓϩδΣΫτ — Docker-docs- ja 17.06.Beta υΩϡϝϯτ 52

Slide 53

Slide 53 text

BackstopJS ͱ WordPress ͷ࣮ߦ؀ڥΛ Docker Ͱ࡞ͬͨɻ • torounit/wp-theme-test-env - Docker Hub • Github: torounit/wp-theme-test-env Chromium / Node.js / Noto Sans ͱ WordPress ͷಈ࡞؀ڥɻ WordPress ͷ ςʔϚϢχοτςετσʔλ΋ઃఆࡁΈɻ 53

Slide 54

Slide 54 text

Note. backstopJS ͷ docker Πϝʔδ΋͋Δɻ • backstopjs/backstopjs - Docker Hub 54

Slide 55

Slide 55 text

Let's ࣗಈԽ ! 55

Slide 56

Slide 56 text

ࠓճ͸ Circle CI • OSSͩͱແྉͰ࢖͑Δɻ • Docker αϙʔτɻ • store_artifacts Ͱੜ੒෺Λอଘ& ϒϥ΢βͰ؆୯ʹ֬ೝͰ͖ΔͷͰɺ BackstopJSΛ࢖͏ͱ͖͸ศརɻ 56

Slide 57

Slide 57 text

Slide 58

Slide 58 text

Circle CI ͷઃఆɻ /.circleci/config.yml ʹઃఆΛهड़ɻDocker ରԠͳͷ͸ version 2ܥͳͷͰ஫ҙɻ 58

Slide 59

Slide 59 text

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

Slide 60

Slide 60 text

1. Circle CI ʹϩάΠϯ 2. Projects -> AddProjectͰɺϨϙδτϦΛબ୒͢Δɻ 3. git commit & push Ͱςετ͕࣮ߦ͞ΕΔɻ 60

Slide 61

Slide 61 text

• store_test_results ͰɺxUnitܗࣜ ͷςετ݁Ռ͕อଘ͞ΕΔ৔ॴΛࢦ ఆ͢Δͱςετ݁Ռ͕ҰཡͰΈΕ Δɻ • Artifacts ͷλϒ͔Βɺอଘͨ͠ςε τੜ੒෺Λ֬ೝͰ͖Δɻ • node_modules ౳͸ΩϟογϡՄ ೳɻ 61

Slide 62

Slide 62 text

ޮೳɾޮՌ • ҙਤ͠ͳ͍มߋΛݕग़Λָʹݕग़Ͱ͖Δɻ • CSSͷབྷΜͩόάϑΟοΫε࣌ʹ͸݁ߏҖྗɻ • CSSͷϦϑΝΫλϦϯάҊ݅Ͱ͸ͭΑ͍ɻ • ϥϯμϜཁૉ౳ɺςετͮ͠Β͍ཁૉ΋͋Δɻ 62

Slide 63

Slide 63 text

Note. • ໨ࢹͰͷςετΛޮ཰తʹػձʹߦΘͤΔπʔϧɻ • ϖʔδ਺͕ଟ͍ͱ΍ͬͺΓ࣌ؒ͸͔͔ΔͷͰɺͳΜͰ΋͔Μ Ͱ΋΍Ε͹ྑ͍ͬͯϞϊͰ͸ͳ͍ؾ͸͢Δɻ • έʔεόΠέʔεɻ • ελΠϧΨΠυ౳Λ૊Έ߹Θͤͯ΍Δͷ͕Αͦ͞͏ɻ • ෳ਺ͷϒϥ΢βͰͷݟͨ໨ͷҧ͍Λݕग़͢ΔϞϊͰ͸ແ͍ɻ 63

Slide 64

Slide 64 text

https://github.com/torounit/vanilla/ 64

Slide 65

Slide 65 text

͔͍ͭͲ͜Ζ • ӡ༻தͷαʔϏεͷCSSϦϑΝΫλϦϯά • େن໛ͳECͱ͔ͰɺLP౳Λ୔ࢁ࡞ͬͨΓ͍ͯ͠Δέʔεɻ • σβΠϯϦχϡʔΞϧΛ؆୯ʹ͸Ͱ͖ͳ͍͕ɺ֦ுΛͯ͠ ͍͘Α͏ͳϞϊɻ 65

Slide 66

Slide 66 text

ط஌ͷ໰୊ͳͲ • ݁ߏCPU౳ʹෛՙ͕͔͔ΔͷͰɺࣗલͰCIαʔόʔΛ༻ҙ͢ΔͳΒ ͦΕͳΓʹεϖοΫ͕ඞཁɻ • େྔͷεΫϦʔϯγϣοτΛऔΔͷͰϨϙδτϦ͕ංେԽ͢Δɻ • 16384pxҎ্ͷεΫϦʔϯγϣοτ͸ChromeͩͱࡱΕͳ͍ɻ • ͦΕҎԼͰ΋௕͍ϖʔδͩͱਖ਼͘͠औಘग़དྷͳ͍͜ͱ΋ɻʢ؀ڥ ґଘ͢ΔͬΆ͍ɻʣ • ςετΛηϨΫλͳͲͰ෼ׂͯ͠ରԠՄೳɻ 66

Slide 67

Slide 67 text

let's Contribute! • garris/BackstopJS: Catch CSS curve balls. 67

Slide 68

Slide 68 text

Thanks! Github: @torounit Twitter: @Toro_Unit Facebook: fb.me/torounit Blog: https://torounit.com 68