Slide 1
Slide 1 text
テスト自動化の学習向けデモサイト
のご紹介
Test Automation Meetup #1
2020/04/16
Slide 2
Slide 2 text
岸健 a.k.a. 竹屋
テストエンジニア
» 株式会社ウェブレッジ
» テスト自動化研究会（STAR）
» Twitter: @takeya0x86
» GitHub: takeya0x86
2
HELLO!
Slide 3
Slide 3 text
今回は業務での事例ではなく、
個人での活動についてお話しします。
3
Slide 4
Slide 4 text
テスト自動化の学習向けデモサイト
のご紹介
4
#
Slide 5
Slide 5 text
まとめ
テスト自動化を学習する方向けに、
テスト対象として使えるデモサイトを作成しました！
サンプルコードも作成したのであわせてお使いください！
サイトのURL
https://hotel.testplanisphere.dev/
5
Slide 6
Slide 6 text
目次
1. デモサイトの特徴と使い方
2. サンプルコード
3. サイトを作った背景
6
Slide 7
Slide 7 text
デモサイトの特徴と使い方
7
1.
Slide 8
Slide 8 text
Place your screenshot here
8
HOTEL PLANISPHERE
Slide 9
Slide 9 text
どんな人向けか？
» 自動テストの学習をしている人
» 社内、セミナーなど自動テストの研修を企画する人
» 自動テストについてのブログ記事や書籍を書く人
» 新しいテスト用ツールを試したい人
9
Slide 10
Slide 10 text
どんな人向けか？
» 自動テストの学習をしている人
» 社内、セミナーなど自動テストの研修を企画する人
» 自動テストについてのブログ記事や書籍を書く人
» 新しいテスト用ツールを試したい人
これらの方々が使いやすい「テスト対象サイト」として作り
ました。
10
Slide 11
Slide 11 text
サイトの特徴１
» もともとあったデモサイトをアップデートしたもの
» http://example.selenium.jp/reserveApp_Renewal/
» ホテルの予約サイトを模した作り
» ログイン・会員登録・ホテルの宿泊予約の入力フォームを
用意
» レスポンシブデザインに対応しているためモバイルブラウ
ザでも表示可能
11
Slide 12
Slide 12 text
サイトの特徴２
自動テストツールの使い方を覚えるときに必要な
» HTML5で追加されたinput要素（date, rangeなど）を含
めた各種のinput
» Ajax、iframe、新規ウィンドウ、ダイアログ
などを各画面に配置しています。
12
Slide 13
Slide 13 text
サイトの特徴３
ログイン情報、会員登録の情報はブラウザのCookieおよび
Session Storage、Local Storageに保存されます。
そのため、自分専用のサーバを立ち上げたり、他のユーザの
利用を気にしたりせずに使うことができます。
13
Slide 14
Slide 14 text
Place your screenshot here
14
HOTEL PLANISPHERE
DEMO
Slide 15
Slide 15 text
サイトの特徴まとめ
これらの特徴によって学習する人が、
1. 実際のウェブアプリケーションに近い環境で
2. 自動テストツールの持つ各機能を試すこと
ができます。
15
Slide 16
Slide 16 text
サンプルコード
16
2.
Slide 17
Slide 17 text
サンプルコード
参考に使えるように実際にデモサイトをテスト対象とした自
動テストのコードを用意しています。
https://github.com/testplanisphere/hotel-example-selenium3-java
https://github.com/testplanisphere/hotel-example-webdriverio
現在JavaとJavaScriptの二つのコードがあります。
17
Slide 18
Slide 18 text
Place your screenshot here
18
HOTEL PLANISPHERE
AUTOMATING TESTS
DEMO
Slide 19
Slide 19 text
CI環境
サンプルコードはGitHub
ActionsをCI環境として使
い、テスト実行できるよう
にしています。
19
Slide 20
Slide 20 text
ここまでのまとめ
» テスト対象のウェブサイト
» サンプルコード（2言語）
» CI環境（GitHub Actions）
現在これらのリソースが揃っていて利用可能です。
20
Slide 21
Slide 21 text
サイトを作った背景
21
3.
Slide 22
Slide 22 text
やることが多い
自動テストは「やる事」「考える事」が多くあります。
» 自動テスト向けのテスト設計
» 日々の運用計画
» 結果フィードバックの方法
» テストコードのメンテナンス
» 自動テストの将来を考える
» etc.. etc..
22
Slide 23
Slide 23 text
時間がない
自動テストは「やる事」「考える事」が多くあります。
» ツールの使い方を勉強している時間がない！！
23
Slide 24
Slide 24 text
必要不可欠
とはいえ……
自動テストはツール抜きでは成り立ちません。
「テスト対象ソフトウェアを自動で操作するソフトウェア」
が絶対に必要です。
24
Slide 25
Slide 25 text
最初の一歩
そして、自動テストに初めて触れる人にとっては
「ツールを使って自動テストを作って動かす体験」
が最初の入り口になります。
25
Slide 26
Slide 26 text
モチベーション
初心者の人にも早く先へ進んでもらって、いっしょに自動テストの
ことを考えたい。
「ツールの使い方」は検索すれば出てくるけど、「自分たちのプロ
ダクトに適したテストの作り方」は自分たちで頭をひねって考えな
くてはいけない。早くそういう話をしたい。
だから、
「入り口」で立ち止まったり、つまずいたりして欲しくない。
26
Slide 27
Slide 27 text
目標
このサイトに来れば自動テストを勉強するために必要なものが揃っ
ている。
初心者でも迷わずに進んでいける。
そんなサイトになることを目指して作っています。
27
Slide 28
Slide 28 text
お願い
https://github.com/testplanisphere/hotel-example-site/
GitHubのリポジトリはPublicになっています。
ご意見、改善の提案などをリポジトリのissuesにお寄せください。
28
Slide 29
Slide 29 text
まとめ
テスト自動化を学習する方向けに、
テスト対象として使えるデモサイトを作成しました。
サンプルコードも作成したのであわせてお使いください！
サイトのURL
https://hotel.testplanisphere.dev/
29
Slide 30
Slide 30 text
さいごに
サイト名の“Planisphere”は
「星座早見盤」という意味です。
初めて自動テストにふれる人でも、
これがあれば迷わずに「星座」を探
せるようにと名付けました。
30
H. Raab / CC BY-SA 3.0
Slide 31
Slide 31 text
Let’s go on a journey
AUTOMATING TESTS.
31
Slide 32
Slide 32 text
ありがとうございました！
お問い合わせはこちら：
» @takeya0x86
» https://takeya0x86.github.io/
32
THANKS!
» Presentation template by SlidesCarnival
» Photographs by Unsplash