TypeScript + PhantomJSを利用した効率的なテスト実施

システムテスト自動化カンファレンス2017-2
一般公演A 16:00 〜の部

TypeScriptとPhantomJSを利用したテスト自動化について、弊社（アスタミューゼ株式会社）が運用している348サイトを対象にした登録試験自動化の事例を元に説明いたします。

Transcript

1. 5ZQF4DSJQU 1IBOUPN+4Λར༻ͨ͠
   ޮ཰తͳςετ࣮ࢪ
   Ξελϛϡʔθגࣜձࣾ
   ։ൃɾΠϯϑϥ෦ ੢઒ ྒ
   

   View Slide

2. ࣗݾ঺հ
   ໊લ ੢઒ ྒʢʹ͔͠Θ Γΐ͏ʣ
   ۈ຿ઌͳͲ Ξελϛϡʔθגࣜձࣾ
   ։ൃɾΠϯϑϥ෦
   झຯ ञɺ৯͏ɺ৸Δɺ૸Δ
   ݋ಓ
   Ո଒ ࠺ͱଉࢠ
   

   View Slide

3. ࣗݾ঺հ
   ٕज़ +BWBɺ4DBMBɺ1ZUIPOɺ#BTIɺ
   "OTJCMFɺ"TUBEɺ
   "QBDIFɺ.Z42-ɺ1PTUHSF42-ɺ
   ;BCCJYɺ3BCCJU.2ɺ&MBTUJD4FBSDIɺ'MVFOUE FUD
   4BMFTGPSDFDPNɺ4ɺ3PVUF
   ܦྺ ి࿩Λੜۀͱ͢Δ๭άϧʔϓձࣾʹ͍ͨ
   ަ׵ػͷࢼݧΛͨ͠Γ
   ۚ༥ͷγεςϜ࡞ͬͨΓ
   ݚڀॴͰٕज़ݕূͨ͠Γ
   ηΩϡϦςΟ੡඼ͷ։ൃ΍ͬͨΓ
   ɾɾɾ
   

   View Slide

4. ࣗݾ঺հ
   ٕज़ +BWBɺ4DBMBɺ1ZUIPOɺ#BTIɺ
   "OTJCMFɺ"TUBEɺ
   "QBDIFɺ.Z42-ɺ1PTUHSF42-ɺ
   ;BCCJYɺ3BCCJU.2ɺ&MBTUJD4FBSDIɺ'MVFOUE FUD
   4BMFTGPSDFDPNɺ4ɺ3PVUF
   ܦྺ ి࿩Λੜۀͱ͢Δ๭άϧʔϓձࣾʹ͍ͨ
   ަ׵ػͷࢼݧΛͨ͠Γ
   ۚ༥ͷγεςϜ࡞ͬͨΓ
   ݚڀॴͰٕज़ݕূͨ͠Γ
   ηΩϡϦςΟ੡඼ͷ։ൃ΍ͬͨΓ
   ɾɾɾ
   ൧Λ৯͏ͨΊʹԿͰ΋ͨ͠ʂ
   

   View Slide

5. ͦͨ͠Βମॏ̓̔LHʹʂ
   ࣗݾ঺հ
   

   View Slide

6. ࣾձਓʹͳͬͯ̍̏LH૿͑ͨʂ
   ࣗݾ঺հ
   

   View Slide

7. ࣗݾ঺հ
   ʮϩΧϘʯ࢝Ί·ͨ͠ʂ
   

   View Slide

8. ϩΧϘʁ
   • ௿౶࣭ʢϩʔΧʔϘʣμΠΤοτ
   • ʮϘΧϩʯͰ͸͋Γ·ͤΜʮϩΧϘʯͰ͢ʂ
   • ݫີʹ͸ʮϩʔΧʔϘʯͱ͸ҧ͏Β͍͠Ͱ͢
   Ұ೥Ͱ̏LH૫ͤͨʂ
   

   View Slide

9. ࣗݾ঺հ
   ࠓ೥ೖࣾ͠·ͨ͠ʂ
   

   View Slide

10. Ξελϛϡʔθגࣜձࣾͷ࿩
    

    View Slide

11. View Slide

12. View Slide

13. View Slide

14. View Slide

15. View Slide

16. స৬φϏͱ͍͏αʔϏεʹैࣄ
    

    View Slide

17. స৬φϏͷ࿩
    స৬φϏΛ͝ଘ஌Ͱ͔͢ʁ
    

    View Slide

18. స৬φϏͷ࿩
    

    View Slide

19. స৬φϏͷ࿩
    ὎ ༷ʑͳۀքɾٕज़ʹಛԽͨ͠స৬αΠτ
    

    View Slide

20. స৬φϏͷ࿩
    ὎ ༷ʑͳۀքɾٕज़ʹಛԽͨ͠స৬αΠτ
    ὎ ໿αΠτ͕ଘࡏ
    

    View Slide

21. స৬φϏͷ࿩
    ὎ ༷ʑͳۀքɾٕज़ʹಛԽͨ͠స৬αΠτ
    ὎ ໿αΠτ͕ଘࡏ
    ὎ ొ࿥ͨ͠Ϣʔβͷస৬Λαϙʔτʂ
    

    View Slide

22. స৬φϏͷ࿩
    ὎ ༷ʑͳۀքɾٕज़ʹಛԽͨ͠స৬αΠτ
    ὎ ໿αΠτ͕ଘࡏ
    ὎ ొ࿥ͨ͠Ϣʔβͷస৬Λαϙʔτʂ
    స৬Λߟ͑ͨΒੋඇʂ
    

    View Slide

23. స৬φϏͷςετͷ࿩
    

    View Slide

24. స৬φϏͷςετͷ࿩
    స৬φϏͷ։ൃ͸
    • νʔϜ͸̒ਓ
    • ෦௕
    • σβΠφ ̍ਓ
    • ϑϩϯτΤϯδχΞ ̍ਓ
    • 4DBMBΤϯδχΞ ̏ਓ
    • ि̍ʙ̏ճϖʔεͷϦϦʔε
    

    View Slide

25. స৬φϏͷςετͷ࿩
    ։ൃ౰ॳ
    • αΠτ਺ ὎গͳΊ
    • ػೳ ὎গͳΊ
    • 1$αΠτ͔͠ͳ͍
    खಈͰࢼݧ
    

    View Slide

26. αΠτͷϞόΠϧରԠ
    αΠτ਺΋ػೳ΋গͳ͍͠
    ·ͩखಈͰ͍͚ͦ͏ʂ
    స৬φϏͷςετͷ࿩
    

    View Slide

27. ొ࿥ϑΥʔϜվम
    ·͍͚ͩΔʂ·͍͚ͩΔʂ
    స৬φϏͷςετͷ࿩
    

    View Slide

28. ొ࿥ϑΥʔϜվम
    ͍͚ͳ͔ͬͨʂ
    స৬φϏͷςετͷ࿩
    

    View Slide

29. ొ࿥ϑΥʔϜվम
    ϞόΠϧαΠτͰ
    Ϣʔβొ࿥͕Ͱ͖ͯͳ͔ͬͨ
    స৬φϏͷςετͷ࿩
    

    View Slide

30. ొ࿥ϑΥʔϜվम
    ϞόΠϧαΠτͰ
    Ϣʔβొ࿥͕Ͱ͖ͯͳ͔ͬͨ
    స৬φϏͷςετͷ࿩
    ϦϦʔεޙʹൃ֮
    

    View Slide

31. Կ͕͍͚ͳ͔ͬͨͷ͔ʁ
    • 1$ͱϞόΠϧͰొ࿥ϑΥʔϜͷϑϩϯτͷ࡞Γ͕ҧ͏
    ὎ ࢼݧ࿙ΕͷݪҼ
    స৬φϏͷςετͷ࿩
    

    View Slide

32. ͲΕ͙Β͍ҧ͏ͷ͔ʁ
    

    View Slide

33. ͲΕ͙Β͍ҧ͏ͷ͔ʁ
    ϑΥʔϜͷܗঢ়΍
    ભҠͷ਺͕શ͘ҧ͏
    

    View Slide

34. Կ͕͍͚ͳ͔ͬͨͷ͔ʁ
    • 1$ͱϞόΠϧͰొ࿥ϑΥʔϜͷϑϩϯτͷ࡞Γ͕ҧ͏
    ὎ ࢼݧ࿙ΕͷݪҼ
    ཁରࡦʂ
    స৬φϏͷςετͷ࿩
    

    View Slide

35. స৬φϏͷςετͷ࿩
    Կ͕͍͚ͳ͔ͬͨͷ͔ʁ
    • 1$ͱϞόΠϧͰొ࿥ϑΥʔϜͷϑϩϯτͷ࡞Γ͕ҧ͏
    ὎ ࢼݧ࿙ΕͷݪҼ
    ࣗಈςετಋೖ
    

    View Slide

36. స৬φϏͷςετͷ࿩
    είʔϓ͸ʁ
    • ࠷௿ݶͷϢʔβϏϦςΟ֬อ
    Ϣʔβొ࿥ॲཧ
    

    View Slide

37. స৬φϏͷςετͷ࿩
    ͯ͞ɺԿͰ࡞Ζ͏ʁ
    1IBOUPN+4
    

    View Slide

38. 1IBOUPN+4ͱ͸Կ͔
    • 8FCςετΛ͢ΔͨΊͷπʔϧ
    • ྨࣅπʔϧ
    • 4FMFOJVN
    • ςετέʔε͸+BWB4DSJQUͰهࡌ͢Δ
    ὎ $BTQFS+4ͱ͍͏ϥούʔ͕͋Δ
    

    View Slide

39. ग़དྷ্͕ͬͨ΋ͷ
    $*αʔό
    HJUαʔό
    APサーバ
    ᶃϦΫΤετ
    ᶄμ΢ϯϩʔυ ᶅςετ࣮ߦ
    

    View Slide

40. ग़དྷ্͕ͬͨ΋ͷ
    本番
    APサーバ
    ステージング
    APサーバ
    $*αʔό
    HJUαʔό
    ˞
    +FOLJOTΩοΫ ˞
    ఆظ࣮ߦ
    

    View Slide

41. స৬φϏͷςετͷ࿩
    ࣗಈςετΛೖΕͯΈͯ
    • Ϣʔβొ࿥ॲཧͷ඼্࣭͕͕ͬͨ
    • ࢼݧ͸4MBDL͔Β࣮ߦͰ͖ΔͷͰ୭Ͱ΋ࢼݧͰ͖ΔΑ͏ʹͳͬͨ
    • ো֐ൃੜ࣌ʹ࠷௿ݶͷαʔϏεੜଘ֬ೝ͕Ͱ͖ΔΑ͏ʹͳͬͨ
    • ొ࿥ϑΥʔϜͷো֐ʹૣ͘ؾͮ͘Α͏ʹͳͬͨ
    

    View Slide

42. స৬φϏͷςετͷ࿩
    ࣗಈςετΛೖΕͯΈͯ
    • Ϣʔβొ࿥ॲཧͷ඼্࣭͕͕ͬͨ
    • ো֐ൃੜ࣌ʹ࠷௿ݶͷαʔϏεੜଘ֬ೝ͕Ͱ͖ΔΑ͏ʹͳͬͨ
    • ొ࿥ϑΥʔϜͷো֐ʹૣ͘ؾͮ͘Α͏ʹͳͬͨ
    • ࢼݧ͸4MBDL͔Β࣮ߦͰ͖ΔͷͰ୭Ͱ΋ࢼݧͰ͖ΔΑ͏ʹͳͬͨ
    Ұ݅མணʂ
    

    View Slide

43. ͨ͠Α͏ʹࢥ͚͑ͨͲɾɾɾ
    స৬φϏͷςετͷ࿩
    

    View Slide

44. • ొ࿥ϑΥʔϜ·Ͱͷܦ࿏ʢண஍࣌ͷύϥϝʔλόϦΤʔγϣϯʣ͕૿Ճ
    • αʔϏε֦ॆʹΑΔొ࿥όϦΤʔγϣϯʢࣅͯඇͳΔϑΥʔϜʣͷ૿Ճ
    • αΠτ਺ʢҰؾʹ̐̌̌ۙ͘·Ͱʣ૿Ճ
    ςετίʔυΛߏ଄Խ͍ͯ͠ͳ͔ͬͨͨΊ
    ϝϯςφϯείετ૿Ճ
    స৬φϏͷςετͷ࿩
    

    View Slide

45. ΋͜͠ͷ··์ஔͨ͠Βɾɾɾ
    • ςετͷϝϯςφϯε͕௥͍͔ͭͳ͘ͳΔ
    • ࢑ఆతʹखಈͷςετ͕૿͑Δ
    స৬φϏͷςετͷ࿩
    

    View Slide

46. ΋͜͠ͷ··์ஔͨ͠Βɾɾɾ
    • ςετͷϝϯςφϯε͕௥͍͔ͭͳ͘ͳΔ
    • ࢑ఆతʹखಈͷςετ͕૿͑Δ
    ։ൃ΋පΉ͚Ͳ
    ࠷ऴ֬ೝ͍ͯ͠Δ෦௕͸࣮֬ʹࢮ͵
    స৬φϏͷςετͷ࿩
    

    View Slide

47. ͞Βʹ
    స৬φϏͷςετͷ࿩
    

    View Slide

48. ৽ϝϯόʔೖࣾ
    γεςϜΛཧղͰ͖͍ͯͳ͍ͷͰόάΛΑ͘ຒΊࠐΉ
    ΋ͪΖΜ+BWB4DSJQUͳΜͯ෼͔Βͳ͍ͷͰϝϯςͰ͖ͳ͍
    า͘ώϡʔϚϯΤϥʔʹରͯ͠
    ߄ͯΔ։ൃνʔϜ
    స৬φϏͷςετͷ࿩
    

    View Slide

49. స৬φϏͷςετͷ࿩
    

    View Slide

50. ৭ʑͱݶքʹͳΓ
    ςετΛݟ௚͢͜ͱʹʂ
    స৬φϏͷςετͷ࿩
    

    View Slide

51. స৬φϏͷςετͷ࿩
    ؍఺
    • طଘͷίʔυΛར༻ʢ։ൃͷϦιʔε͕ݶΒΕ͍ͯΔͨΊʣ
    • ϝϯςφϯείετΛ཈͑Δ
    • ςετίʔυͷߏ଄Խ
    • ՄಡੑΛ্͛Δ
    • ୭Ͱ΋ϝϯςͰ͖ΔΑ͏ʹ͢Δ
    • +BWB4DSJQUʹෆ׳ΕͳਓͰ΋Ͱ͖Δ
    

    View Slide

52. స৬φϏͷςετͷ࿩
    ؍఺
    • طଘͷίʔυΛར༻ʢ։ൃͷϦιʔε͕ݶΒΕ͍ͯΔͨΊʣ
    • ϝϯςφϯείετΛ཈͑Δ
    • ςετίʔυͷߏ଄Խ
    • ՄಡੑΛ্͛Δ
    • ୭Ͱ΋ϝϯςͰ͖ΔΑ͏ʹ͢Δ
    • 4DSJQUݴޠʹෆ׳ΕͳਓͰ΋Ͱ͖Δ
    5ZQF4DSJQUʹܾఆʂ
    

    View Slide

53. 5ZQF4DSJQUͷ࿩
    • +BWB4DSJQUΛੜ੒
    • ੩తܕ෇͚ݴޠ
    • .JDSPTPGU͕։ൃ
    • Φʔϓϯιʔε
    • +BWB4DSJQUͰ΋ॻ͚Δ
    

    View Slide

54. 5ZQF4DSJQUͷ࿩
    • +BWB4DSJQU͕Ͱ͖Δ͜ͱʹՃ͑ҎԼ͕Ͱ͖Δ
    • ΠϯλʔϑΣʔε
    • ྻڍܕͷར༻
    • λϓϧܕͷར༻
    • .JYJO
    • δΣωϦοΫ FUD
    

    View Slide

55. 5ZQF4DSJQUʹΑͬͯ΋ͨΒ͞Εͨ΋ͷ
    ొ࿥ςετͷج൫ͱͳΔ
    ந৅Ϋϥε
    ొ࿥ϑΥʔϜ΁ͷ
    ܦ࿏ ・・・
    +BWB4DSJQU
    ίʔυ
    5ZQF4DSJQU
    ίʔυ
    ొ࿥ϑΥʔϜ΁ͷ
    ܦ࿏
    

    View Slide

56. స৬φϏͷςετͷ࿩
    ͜ΕʹΑΓ
    • طଘͷίʔυΛར༻Ͱ͖͍ͯΔ
    • ίʔυͷՄಡੑ্͕͕ͬͨ
    • ௥Ճ࣮૷ɺվमָ͕ʹͳͬͨʂ
    • 4DBMBΤϯδχΞͰ΋࣮૷Ͱ͖ΔΑ͏ʹͳͬͨʂ
    • ԿΑΓɺ੢઒͕ϝϯςͰ͖Δʂ
    

    View Slide

57. స৬φϏͷςετͷ࿩
    ͞Βʹʂ
    • େ఍ͷΤϥʔ͸ίϯύΠϧ࣌ʹݕग़
    ὎͍͍࣮ͪͪߦ͠ͳͯ͘΋Τϥʔ͕ݕग़Ͱ͖ΔͷͰੜ࢈ੑ͕޲্ͨ͠
    

    View Slide

58. ग़དྷ্͕ͬͨ΋ͷʢ#FGPSFʣ
    $*αʔό
    HJUαʔό
    APサーバ
    ᶃϦΫΤετ
    ᶄμ΢ϯϩʔυ ᶅςετ࣮ߦ
    

    View Slide

59. ग़དྷ্͕ͬͨ΋ͷʢ"GUFSʣ
    $*αʔό
    HJUαʔό
    APサーバ
    ᶃϦΫΤετ
    ᶄμ΢ϯϩʔυ ᶆςετ࣮ߦ
    ᶅίϯύΠϧ
    

    View Slide

60. αΠτ͝ͱʹొ࿥ϑΥʔϜΛग़͠෼͚ͯʂ
    ͦͷޙʙ ͦͷ̍ ʙ
    

    View Slide

61. ࢼݧɺ̐̌̌αΠτ෼͋ΔͰ͕͢ɾɾɾ
    ࠓ·ͰͳΒ
    

    View Slide

62. ࢼݧɺ̐̌̌αΠτ෼͋ΔͰ͕͢ɾɾɾ
    ࠓ·ͰͳΒ
    ࢮ
    

    View Slide

63. Ͱ΋ɺࠓͳΒ
    ͳΜͱ͔଱͑ΒΕΔ
    

    View Slide

64. ొ࿥ϑΥʔϜʹසൟʹվमೖΕΔΑʂ
    ͦͷޙʙ ͦͷ̎ ʙ
    

    View Slide

65. ௥Ճͨ͠ػೳ͕ͪΌΜͱಈ͔͘ʁ
    ొ࿥ϑΥʔϜͷग़͠෼͚͸Ͱ͖͍ͯΔ͔ʁ
    ࠓ·ͰͳΒ
    

    View Slide

66. ௥Ճͨ͠ػೳ͕ͪΌΜͱಈ͔͘ʁ
    ొ࿥ϑΥʔϜͷग़͠෼͚͸Ͱ͖͍ͯΔ͔ʁ
    ࠓ·ͰͳΒ
    ࢮ
    

    View Slide

67. Ͱ΋ɺࠓͳΒ
    ͳΜͱ͔଱͑ΒΕΔ
    

    View Slide

68. ͦͯ͠ԿΑΓ΋
    ෦௕͕ੜ͖ͯΔʂ
    

    View Slide

69. 5ZQF4DSJQUͷޮՌ
    ファイル数 ステップ総数 １ファイルあたりの平均ステップ数
    PhantomJS 22 4678 212
    TypeScript 25 2682 107
    ஔ͖׵͑௚ޙͷεςοϓ਺ൺֱ
    ファイル数 ステップ総数 １ファイルあたりの平均ステップ数
    TypeScript 30 7910 263
    αΠτ͝ͱͷొ࿥ϑΥʔϜग़͠෼͚ద༻ޙͷεςοϓ਺
    

    View Slide

70. 5ZQF4DSJQUʹΑͬͯ΋ͨΒ͞Εͨ΋ͷ
    ファイル数 ステップ総数 １ファイルあたりの平均ステップ数
    PhantomJS 22 4678 212
    TypeScript 25 2682 107
    ஔ͖׵͑௚ޙͷεςοϓ਺ൺֱ
    ファイル数 ステップ総数 １ファイルあたりの平均ステップ数
    TypeScript 30 7910 263
    αΠτ͝ͱͷొ࿥ϑΥʔϜग़͠෼͚ద༻ޙͷεςοϓ਺
    ͍͍ײ͡
    

    View Slide

71. ܾͯ͠ɺ͍͍͜ͱ͹͔ΓͰ͸ͳ͍
    • ࣮૷࣌
    • +BWB4DSJQU͕Τϥʔͳ͘ੜ੒͞Εͯ΋ɺ1IBOUPN+4͕ಈ͘Θ͚Ͱ͸ͳ͍
    • શମ
    • 1IBOUPN+4ͷ։ൃ͕ࢭ·͍ͬͯΔ
    5ZQF4DSJQU 1IBOUPNF+4ͷσϝϦοτ
    

    View Slide

72. ࠓޙͷ՝୊
    • 4FMFOJVN΋͘͠͸)FBEMFTT$ISPNFͷಋೖͱஔ͖׵͑
    • ࣗಈςετͷ֦ॆ
    • ొ࿥ϑΥʔϜҎ֎ͷػೳ
    

    View Slide

73. ฐࣾͰҰॹʹಇ͖·ͤΜ͔ʁ
    ΤϯδχΞɾσβΠφ࠾༻αΠτ
    IUUQSFDSVJUBTUBNVTFDPKQ
    BTUBNVTF -BCʢ։ൃϒϩάʣ
    IUUQMBCBTUBNVTFDPKQ
    

    View Slide

74. ͝ਗ਼ௌ͋Γ͕ͱ͏͍͟͝·ͨ͠
    

    View Slide