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

by Naoki Shimizu

Slide 1

Slide 1 text

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

Slide 2

Slide 2 text

ਗ਼ਫ ௚थ (Naoki Shimizu) @deme0607

Slide 3

Slide 3 text

Software Engineer @DeNA 2013೥4݄ೖࣾ (৽ଔ) SWET (Software Engineer in Test) ॴଐ https://unsplash.com/

Slide 4

Slide 4 text

Mission ήʔϜϓϥοτϑΥʔϜͷ඼࣭อূɾ޲্ ։ൃੜ࢈ੑͷ޲্

Slide 5

Slide 5 text

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

Slide 6

Slide 6 text

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

Slide 7

Slide 7 text

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

Slide 8

Slide 8 text

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

Slide 9

Slide 9 text

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

Slide 10

Slide 10 text

NBPF Next Browser Platform ࣍ੈ୅ϒϥ΢βήʔϜϓϥοτϑΥʔϜ OpenID Connect + JavaScript SDK ैདྷͷ Mobage ϓϥοτϑΥʔϜͱ΋࿈ܞ https://unsplash.com/

Slide 11

Slide 11 text

https://unsplash.com/

Slide 12

Slide 12 text

NBPF ʹର͢Δ ϒϥ΢βࣗಈςετΛߏங ։ൃऀʹΑΔϢχοτςετ + SWET ʹΑΔ E2E ςετͷΞϓϩʔν σϓϩΠɾϦϦʔε࣌ͷड͚ೖΕςετ SDK ΍ϓϥοτϑΥʔϜػೳͷਖ਼ৗܥɾҟৗܥςετૢ࡞ΛࣗಈԽ https://unsplash.com/

Slide 13

Slide 13 text

Selenium WebDriver ϒϥ΢βૢ࡞ͷࣗಈԽ RSpec / Capybara ςετϑϨʔϜϫʔΫ (Ruby) Jenkins CI؀ڥ https://unsplash.com/

Slide 14

Slide 14 text

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

Slide 15

Slide 15 text

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

Slide 16

Slide 16 text

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

Slide 17

Slide 17 text

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

Slide 18

Slide 18 text

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

Slide 19

Slide 19 text

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

Slide 20

Slide 20 text

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

Slide 21

Slide 21 text

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

Slide 22

Slide 22 text

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

Slide 23

Slide 23 text

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

Slide 24

Slide 24 text

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

Slide 25

Slide 25 text

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

Slide 26

Slide 26 text

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

Slide 27

Slide 27 text

https://www.ﬂickr.com/photos/danichro/7284517300 Node A Test Set A VM / Container Application DB Node B Test Set B VM / Container Application DB

Slide 28

Slide 28 text

໰୊఺ େن໛αʔϏεͷ؀ڥߏஙίετ͕େ͖͍ ෳ਺αʔϏεͷґଘؔ܎ղফ ؀ڥґଘͷ໰୊ʹςετͰؾ͚ͮͳ͍ ຊ൪؀ڥɾ࣮σʔλͰ͔͠ൃੜ͠ͳ͍໰୊ https://www.ﬂickr.com/photos/danichro/7284517300

Slide 29

Slide 29 text

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

Slide 30

Slide 30 text

ςετຖʹઐ༻ͷςετσʔλΛ࡞੒ Ϣʔβ΍ήʔϜ ID etc ςετσʔλ࡞੒खஈ DB ૢ࡞ αʔϏεͰ API Λ༻ҙ https://unsplash.com/

Slide 31

Slide 31 text

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

Slide 32

Slide 32 text

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

Slide 33

Slide 33 text

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

Slide 34

Slide 34 text

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

Slide 35

Slide 35 text

API ʹΑΔςετσʔλͷ࡞੒ ςετσʔλΛ࡞੒Ͱ͖ΔAPI Λఏڙ Ϣʔβ࡞੒ APIɾήʔϜ࡞੒ API etc. ςετຖʹ API Ͱઐ༻σʔλΛ࡞੒ https://unsplash.com/

Slide 36

Slide 36 text

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

Slide 37

Slide 37 text

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

Slide 38

Slide 38 text

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

Slide 39

Slide 39 text

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

Slide 40

Slide 40 text

NBPF ͷςετฒྻԽ શσʔλιʔεͷ API Ҡߦ͸ະୡ੒ NBPF ϦϦʔε: 2014೥ ϞόήʔϦϦʔε: 2006೥ DB ૢ࡞͸ϦεΫ͕େ͖͍ ਺ઍສϢʔβ͕αʔϏεΛར༻ https://unsplash.com/

Slide 41

Slide 41 text

ςετ࣮ߦ࣌ʹ࡞੒Ͱ͖ͳ͍σʔλ͸ ࣄલʹ४උ ֤ςετ࣮ߦϊʔυʹઐ༻ͷςετσʔλΛ ׂ౰ https://unsplash.com/

Slide 42

Slide 42 text

Service Environment Application DB https://unsplash.com/ Data Set A Data Set B Browser UI

Slide 43

Slide 43 text

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

Slide 44

Slide 44 text

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

Slide 45

Slide 45 text

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

Slide 46

Slide 46 text

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

Slide 47

Slide 47 text

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

Slide 48

Slide 48 text

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

Slide 49

Slide 49 text

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

Slide 50

Slide 50 text

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

Slide 51

Slide 51 text

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

Slide 52

Slide 52 text

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

Slide 53

Slide 53 text

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

Slide 54

Slide 54 text

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

Slide 55

Slide 55 text

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

Slide 56

Slide 56 text

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

Slide 57

Slide 57 text

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

Slide 58

Slide 58 text

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

Slide 59

Slide 59 text

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

Slide 60

Slide 60 text

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

Slide 61

Slide 61 text

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

Slide 62

Slide 62 text

https://www.ﬂickr.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

Slide 63

Slide 63 text

Slide 64

Slide 64 text

ෆద੾ͳฒྻ࣮ߦܭը ϚγϯϦιʔεΛ࠷େݶ׆༻Ͱ͖ͳ͍ ࣮ߦ͕࣌ؒ௕͘ͳΔ https://www.ﬂickr.com/photos/ashleymackinnon/7645861006

Slide 65

Slide 65 text

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

Slide 66

Slide 66 text

https://www.ﬂickr.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

Slide 67

Slide 67 text

ࠓޙͷ՝୊ #1 σʔλ࡞੒ API ͷॆ࣮ #2 ෼ࢄ࣮ߦϊʔυΛಈతʹ૿΍͢࢓૊Έ ݱঢ়ࣾ಺ Jenkins αʔό Ϋϥ΢υԽΛݕ౼ #3 ฒྻ࣮ߦܭըͷվળ Push ܕΑΓ Pull ܕͷΞϓϩʔν https://unsplash.com/

Slide 68

Slide 68 text

·ͱΊ େن໛αʔϏεͷϒϥ΢βࣗಈςετΛ֦ॆ ฒྻԽʹΑΔ࣮ߦ࣌ؒͷ୹ॖ ςετ҆ఆԽɾߴ଎ԽͷͨΊಠࣗ API Ͱ ςετ݁Ռͷूܭɾ෼ੳΛ࣮ࢪ https://unsplash.com/