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

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

5. 5

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

38. 38

39. 39

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

57. 57

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