大規模 Web サービスの ブラウザテスト自動化・高速化

大規模 Web サービスの ブラウザテスト自動化・高速化

https://atnd.org/events/66159
で実施したプレゼン資料

627cb7a9f7fa2acc5cea0f71490733f5?s=128

Naoki Shimizu

May 25, 2015
Tweet

Transcript

  1. Testing Casual Talks #2 େن໛ Web αʔϏεͷ ϒϥ΢βςετࣗಈԽɾߴ଎Խ 2015/05/25 (Mon)

    @deme0607 https://unsplash.com/
  2. ਗ਼ਫ ௚थ (Naoki Shimizu) @deme0607

  3. Software Engineer @DeNA 2013೥4݄ೖࣾ (৽ଔ) SWET (Software Engineer in Test)

    ॴଐ https://unsplash.com/
  4. Mission ήʔϜϓϥοτϑΥʔϜͷ඼࣭อূɾ޲্ ։ൃੜ࢈ੑͷ޲্

  5. 2015೥5݄ גࣜձࣾϖϩϦग़޲ ঁੑ޲͚ϝσΟΞ MERY ͷ։ൃɾӡ༻ https://unsplash.com/

  6. େن໛ Web αʔϏεͷ ϒϥ΢βςετࣗಈԽɾߴ଎Խ https://unsplash.com/

  7. DeNA ͷ SWET (Software Engineer in Test) ͰͷऔΓ૊Έʹ͍ͭͯ঺հ http://startupstockphotos.com/

  8. ϒϥ΢βࣗಈςετͷߏங ςετฒྻԽʹΑΔߴ଎Խ ฒྻԽͨ͠ςετͷӡ༻ɾվળ https://unsplash.com/

  9. ϒϥ΢βࣗಈςετͷߏங ςετฒྻԽʹΑΔߴ଎Խ ฒྻԽͨ͠ςετͷӡ༻ɾվળ https://unsplash.com/

  10. NBPF Next Browser Platform ࣍ੈ୅ϒϥ΢βήʔϜϓϥοτϑΥʔϜ OpenID Connect + JavaScript SDK

    ैདྷͷ Mobage ϓϥοτϑΥʔϜͱ΋࿈ܞ https://unsplash.com/
  11. https://unsplash.com/

  12. NBPF ʹର͢Δ ϒϥ΢βࣗಈςετΛߏங ։ൃऀʹΑΔϢχοτςετ + SWET ʹΑΔ E2E ςετͷΞϓϩʔν σϓϩΠɾϦϦʔε࣌ͷड͚ೖΕςετ

    SDK ΍ϓϥοτϑΥʔϜػೳͷਖ਼ৗܥɾҟৗܥςετૢ࡞ΛࣗಈԽ https://unsplash.com/
  13. Selenium WebDriver ϒϥ΢βૢ࡞ͷࣗಈԽ RSpec / Capybara ςετϑϨʔϜϫʔΫ (Ruby) Jenkins CI؀ڥ

    https://unsplash.com/
  14. ϒϥ΢βࣗಈςετ֦ॆͷར఺ #1 ޮ཰తͳϦάϨογϣϯςετ #2 ϚχϡΞϧݕূ޻਺ͷ࡟ݮɾूத http://startupstockphotos.com/

  15. ϒϥ΢βࣗಈςετ֦ॆͷར఺ #1 ޮ཰తͳϦάϨογϣϯςετ https://unsplash.com/

  16. جຊతͳςετέʔε͸׬શࣗಈԽ hotfix ΍খن໛ͳվળϦϦʔε࣌ͷ໨ࢹɾखಈͷ֬ೝ͕΄΅ෆཁʹ ϦϦʔεαΠΫϧͷߴ଎Խɾ඼࣭ͷ޲্ https://unsplash.com/

  17. ϒϥ΢βࣗಈςετ֦ॆͷར఺ #2 ϚχϡΞϧݕূ޻਺ͷ࡟ݮɾूத https://unsplash.com/

  18. ࣗಈςετͰ͸୲อͰ͖ͳ͍͜ͱ΋͋Δ UI/ϨΠΞ΢τͷ֬ೝ΍ػछґଘ໰୊ͷൃݟ etc QA ޻਺Λ৽ػೳ΍ UI/ϨΠΞ΢τݕূʹूத ৽ػೳͷݕূํ਑Λߟ͑Δ͜ͱ͸ίϯϐϡʔλʹ͸Ͱ͖ͳ͍ https://unsplash.com/

  19. ϒϥ΢βࣗಈςετ֦ॆͷ໰୊఺ https://unsplash.com/

  20. ϒϥ΢βࣗಈςετ֦ॆͷ໰୊఺ ςετ࣮ߦ࣌ؒͷ૿Ճ https://unsplash.com/

  21. ϒϥ΢βࣗಈςετ͸࣮ߦ͕͔͔࣌ؒΔ HTTP ϦΫΤετ/ϨεϙϯεɺAjaxɺϝʔϧड৴ etc. ࣮ߦ͢ΔςετέʔεΛ࡟ݮ͢Δ͜ͱ͸ආ͚͍ͨ ϦάϨογϣϯςετͱͯ͠ͷޮՌ down https://unsplash.com/

  22. ϒϥ΢βࣗಈςετͷߏங ςετฒྻԽʹΑΔߴ଎Խ ฒྻԽͨ͠ςετͷӡ༻ɾվળ https://unsplash.com/

  23. ςετͷฒྻԽʹඞཁͳ͜ͱ ฒྻ࣮ߦ͍ͯ͠Δςετͷॲཧ͕ޓ͍ʹ িಥ͠ͳ͍Α͏ʹ͢Δ https://unsplash.com/

  24. ฒྻԽͷΞϓϩʔν #1 αʔϏε࣮ߦ؀ڥͷಠཱ #2 ςετઐ༻σʔλͷ࡞੒ https://unsplash.com/

  25. ฒྻԽͷΞϓϩʔν #1 αʔϏε࣮ߦ؀ڥͷಠཱ https://www.flickr.com/photos/danichro/7284517300

  26. ςετ࣮ߦϊʔυຖʹઐ༻ͷαʔϏε ࣮ߦ؀ڥΛߏங Docker/Vagrant ౳Λར༻ͯ͠ DB + ΞϓϦαʔόΛ౎౓࡞੒ ֤ςετ͕ઐ༻ͷ؀ڥʹ޲͚ͯಈ࡞͢ΔͷͰ িಥ͠ͳ͍ https://www.flickr.com/photos/danichro/7284517300

  27. https://www.flickr.com/photos/danichro/7284517300 Node A Test Set A VM / Container Application

    DB Node B Test Set B VM / Container Application DB
  28. ໰୊఺ େن໛αʔϏεͷ؀ڥߏஙίετ͕େ͖͍ ෳ਺αʔϏεͷґଘؔ܎ղফ ؀ڥґଘͷ໰୊ʹςετͰؾ͚ͮͳ͍ ຊ൪؀ڥɾ࣮σʔλͰ͔͠ൃੜ͠ͳ͍໰୊ https://www.flickr.com/photos/danichro/7284517300

  29. ฒྻԽͷΞϓϩʔν #2 ςετઐ༻σʔλͷ࡞੒ https://unsplash.com/

  30. ςετຖʹઐ༻ͷςετσʔλΛ࡞੒ Ϣʔβ΍ήʔϜ ID etc ςετσʔλ࡞੒खஈ DB ૢ࡞ αʔϏεͰ API Λ༻ҙ

    https://unsplash.com/
  31. Node A Test Set A Service Environment Application DB https://unsplash.com/

    Node B Test Set B
  32. Node A Test Set A Service Environment Application DB https://unsplash.com/

    Node B Test Set B Data Set A
  33. Node A Test Set A Service Environment Application DB https://unsplash.com/

    Node B Test Set B Data Set A Data Set B
  34. DB ૢ࡞ʹΑΔςετσʔλ࡞੒ ࢓༷มߋʹ௥ै͠ਏ͘ϝϯςφϯείετߴ αʔϏεଆͷεΩʔϚ΍ॲཧ͕มΘͬͨΒςετ΋मਖ਼ ࣮؀ڥͷ DB Λςετ͔Βૢ࡞͢ΔϦεΫߴ Ϣʔβʹෆཁͳςετσʔλ͕ݟ͑ͯ͠·͏ αʔϏεʹඞཁͳσʔλΛޡͬͯ࡟আ https://unsplash.com/

  35. API ʹΑΔςετσʔλͷ࡞੒ ςετσʔλΛ࡞੒Ͱ͖ΔAPI Λఏڙ Ϣʔβ࡞੒ APIɾήʔϜ࡞੒ API etc. ςετຖʹ API

    Ͱઐ༻σʔλΛ࡞੒ https://unsplash.com/
  36. Node A Test Set A Service Environment Application DB https://unsplash.com/

    Node B Test Set B API
  37. Node A Test Set A Service Environment Application DB https://unsplash.com/

    Node B Test Set B API Data Set A
  38. Node A Test Set A Service Environment Application DB https://unsplash.com/

    Node B Test Set B Data Set A Data Set B API
  39. API ͕༻ҙ͞Ε͍ͯΔͳΒϕετͳબ୒ࢶ αʔϏε΋ಉ͡ API Λར༻ͯ͠σʔλΛ࡞੒ ςετͱαʔϏεؒͰσʔλߏ଄ʹဃ཭͕ൃੜ͢Δͷ͸ NG αʔϏεͷن໛ɾߏ଄ʹΑͬͯ͸ಋೖίετߴ ௕ظӡ༻ʹΑͬͯେن໛Խͨ͠αʔϏε/ϞϊϦγοΫͳߏ଄ͷαʔϏε etc.

    https://unsplash.com/
  40. NBPF ͷςετฒྻԽ શσʔλιʔεͷ API Ҡߦ͸ະୡ੒ NBPF ϦϦʔε: 2014೥ ϞόήʔϦϦʔε: 2006೥

    DB ૢ࡞͸ϦεΫ͕େ͖͍ ਺ઍສϢʔβ͕αʔϏεΛར༻ https://unsplash.com/
  41. ςετ࣮ߦ࣌ʹ࡞੒Ͱ͖ͳ͍σʔλ͸ ࣄલʹ४උ ֤ςετ࣮ߦϊʔυʹઐ༻ͷςετσʔλΛ ׂ౰ https://unsplash.com/

  42. Service Environment Application DB https://unsplash.com/ Data Set A Data Set

    B Browser UI
  43. Node A Test Set A Service Environment Application DB https://unsplash.com/

    Node B Test Set B Data Set A Data Set B
  44. αʔϏεͷ UI ܦ༝ͰϢʔβΛࣄલ࡞੒ ࣄલ࡞੒खॱ͸ WebDriver ͰࣗಈԽ UI ܦ༝ͷσʔλ࡞੒͸࣮ߦ͕͔͔࣌ؒΔ ࣄલ࡞੒σʔλͷ࢖͍ճ͕͠ඞཁ https://unsplash.com/

  45. ࣄલ࡞੒σʔλར༻ ςετͷޙॲཧʹ஫ҙ ςετσʔλ͕յΕΔͱ࣍ճҎ߱ͷςετʹӨڹ API Ͱ࡞੒ෆՄͳσʔλ͕ඞཁͳΒ༗ޮͳબ୒ࢶ https://unsplash.com/

  46. ϒϥ΢βࣗಈςετͷฒྻ࣮ߦ؀ڥ͕׬੒ 8ฒྻςετ on Jenkins ࣮ߦ࣌ؒ 2.5h → 30min ΧδϡΞϧʹશςετέʔεͷϦάϨογϣϯ ςετ͕࣮ߦՄೳ

    https://unsplash.com/
  47. ϒϥ΢βࣗಈςετͷߏங ςετฒྻԽʹΑΔߴ଎Խ ฒྻԽͨ͠ςετͷӡ༻ɾվળ https://unsplash.com/

  48. ϒϥ΢βࣗಈςετͷฒྻ࣮ߦ؀ڥ͕׬੒ 8ฒྻςετ on Jenkins ࣮ߦ࣌ؒ 2.5h → 30min ΧδϡΞϧʹશςετέʔεͷϦάϨογϣϯ ςετ͕࣮ߦՄೳ

    https://unsplash.com/
  49. ৽ͨʹݦࡏԽͨ͠໰୊ #1 ෆ҆ఆͳςετ #2 ෆద੾ͳฒྻ࣮ߦܭը https://unsplash.com/

  50. ৽ͨʹݦࡏԽͨ͠໰୊ #1 ෆ҆ఆͳςετ https://www.flickr.com/photos/classblog/5136926303

  51. ϒϥ΢βࣗಈςετ͸ෆ҆ఆʹͳΓ͕ͪ λΠϜΞ΢τΤϥʔɾAjax ͷλΠϛϯά etc. ςετʹࣦഊ͍ͯ͠Δ͜ͱʹ׳Εͯ͠·͏ͱ ຊ෺ͷόάʹؾ͚ͮͳ͍ https://www.flickr.com/photos/classblog/5136926303

  52. ෆ҆ఆͳςετͷղܾࡦ https://www.flickr.com/photos/classblog/5136926303

  53. ෆ҆ఆͳςετͷղܾࡦ ஍ಓʹςετΛमਖ਼͍ͯ͘͠ ద੾ͳ଴ͪ࣌ؒͷૠೖ ࣦഊͨ͠ςετͷϦτϥΠ https://unsplash.com/

  54. ෆ҆ఆͳςετͷݕग़΍෼ੳΛ ޮ཰Խ͢Δ͜ͱ͸Մೳ http://startupstockphotos.com/

  55. ςετ݁Ռͷूܭ API Λ࡞੒ ςετ࣮ߦຖʹ݁ՌΛ POST ͠ूܭ http://startupstockphotos.com/

  56. ؀ڥԣஅͰࣦഊ͠΍͍͢ςετͷ෼ੳ http://startupstockphotos.com/ ςετϑΝΠϧɾςετέʔε໊ ςετϑΝΠϧɾςετέʔε໊ ςετϑΝΠϧɾςετέʔε໊ ςετϑΝΠϧɾςετέʔε໊ ςετϑΝΠϧɾςετέʔε໊ ςετϑΝΠϧɾςετέʔε໊

  57. ؀ڥԣஅͰࣦഊ͠΍͍͢ςετͷ෼ੳ http://startupstockphotos.com/ ςετϑΝΠϧɾςετέʔε໊ ςετϑΝΠϧɾςετέʔε໊ ςετϑΝΠϧɾςετέʔε໊ ςετϑΝΠϧɾςετέʔε໊ ςετϑΝΠϧɾςετέʔε໊ ςετϑΝΠϧɾςετέʔε໊ 1஍Ҭ x

    3؀ڥ x 2༻్
  58. ؀ڥԣஅͰࣦഊ͠΍͍͢ςετͷ෼ੳ http://startupstockphotos.com/ ςετϑΝΠϧɾςετέʔε໊ ςετϑΝΠϧɾςετέʔε໊ ςετϑΝΠϧɾςετέʔε໊ ςετϑΝΠϧɾςετέʔε໊ ςετϑΝΠϧɾςετέʔε໊ ςετϑΝΠϧɾςετέʔε໊ ෆ҆ఆͳςετ

  59. ؀ڥԣஅͰࣦഊ͠΍͍͢ςετͷ෼ੳ http://startupstockphotos.com/ ςετϑΝΠϧɾςετέʔε໊ ςετϑΝΠϧɾςετέʔε໊ ςετϑΝΠϧɾςετέʔε໊ ςετϑΝΠϧɾςετέʔε໊ ςετϑΝΠϧɾςετέʔε໊ ςετϑΝΠϧɾςετέʔε໊ ࣦഊͨ͠ςετ

  60. ςετͷ҆ఆੑͷධՁ ಥવෆ҆ఆʹͳͬͨςετέʔεΛ Slack ʹ௨஌ http://startupstockphotos.com/ ςετ݁Ռ֬ೝ༻ URL ͱෆ҆ఆͳςετҰཡΛ௨஌

  61. ৽ͨͳ໰୊ #2 ෆద੾ͳฒྻ࣮ߦܭը https://www.flickr.com/photos/ashleymackinnon/7645861006

  62. https://www.flickr.com/photos/ashleymackinnon/7645861006 4 Test Cases, 18 min Node A Test Case

    1 3 min 4 Test Cases, 12 min Node B Test Case 2 5 min Test Case 3 4 min Test Case 4 6 min Test Case 5 3 min Test Case 6 3 min Test Case 7 3 min Test Case 8 3 min
  63. https://www.flickr.com/photos/ashleymackinnon/7645861006 4 Test Cases, 18 min Node A Test Case

    1 3 min 4 Test Cases, 12 min Node B Test Case 2 5 min Test Case 3 4 min Test Case 4 6 min Test Case 5 3 min Test Case 6 3 min Test Case 7 3 min Test Case 8 3 min Waste 6 minutes!!
  64. ෆద੾ͳฒྻ࣮ߦܭը ϚγϯϦιʔεΛ࠷େݶ׆༻Ͱ͖ͳ͍ ࣮ߦ͕࣌ؒ௕͘ͳΔ https://www.flickr.com/photos/ashleymackinnon/7645861006

  65. ςετ݁Ռूܭ API Λར༻ աڈͷςετ࣮ߦ͔࣌ؒΒ ֤ϊʔυͷਪఆςετ࣮ߦ͕࣌ؒۉ౳ʹͳΔ ࣮ߦܭըΛ࡞੒ https://www.flickr.com/photos/archeon/2941655917

  66. https://www.flickr.com/photos/ashleymackinnon/7645861006 4 Test Cases, 15 min Node A Test Case

    1 3 min 4 Test Cases, 15 min Node B Test Case 2 5 min Test Case 3 4 min Test Case 4 6 min Test Case 5 3 min Test Case 6 3 min Test Case 7 3 min Test Case 8 3 min Test Support API
  67. ࠓޙͷ՝୊ #1 σʔλ࡞੒ API ͷॆ࣮ #2 ෼ࢄ࣮ߦϊʔυΛಈతʹ૿΍͢࢓૊Έ ݱঢ়ࣾ಺ Jenkins αʔό

    Ϋϥ΢υԽΛݕ౼ #3 ฒྻ࣮ߦܭըͷվળ Push ܕΑΓ Pull ܕͷΞϓϩʔν https://unsplash.com/
  68. ·ͱΊ େن໛αʔϏεͷϒϥ΢βࣗಈςετΛ֦ॆ ฒྻԽʹΑΔ࣮ߦ࣌ؒͷ୹ॖ ςετ҆ఆԽɾߴ଎ԽͷͨΊಠࣗ API Ͱ ςετ݁Ռͷूܭɾ෼ੳΛ࣮ࢪ https://unsplash.com/