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

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

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/