Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
テスト自動化の学習向けデモサイトのご紹介 / automation testing-plactice
Search
Takeshi Kishi
April 16, 2020
Programming
0
760
テスト自動化の学習向けデモサイトのご紹介 / automation testing-plactice
Takeshi Kishi
April 16, 2020
Tweet
Share
More Decks by Takeshi Kishi
See All by Takeshi Kishi
Nihonbashi Test Talk #3_WebDriver BiDiと最新の実装状況 / WebDriver BiDi latest status
takeyaqa
1
310
第23回Ques_タイミーにおけるQAチームの在り方 / QA Team in Timee
takeyaqa
3
990
ユーザーファーストのためのE2Eテスト / E2E testing for users
takeyaqa
0
200
初めてのOSSコントリビューション / my first OSS contribution
takeyaqa
0
76
Other Decks in Programming
See All in Programming
AIエージェント時代における TypeScriptスキーマ駆動開発の新たな役割
bicstone
4
1.5k
プログラミングどうやる? ~テスト駆動開発から学ぶ達人の型~
a_okui
0
190
Local Peer-to-Peer APIはどのように使われていくのか?
hal_spidernight
2
450
CSC305 Lecture 01
javiergs
PRO
1
400
ポスターセッション: 「まっすぐ行って、右!」って言ってラズパイカーを動かしたい 〜生成AI × Raspberry Pi Pico × Gradioの試作メモ〜
komofr
0
950
Web技術を最大限活用してRAW画像を現像する / Developing RAW Images on the Web
ssssota
2
1.2k
Django Ninja による API 開発効率化とリプレースの実践
kashewnuts
0
930
Go言語の特性を活かした公式MCP SDKの設計
hond0413
1
180
Web Components で実現する Hotwire とフロントエンドフレームワークの橋渡し / Bridging with Web Components
da1chi
3
1.8k
そのpreloadは必要?見過ごされたpreloadが技術的負債として爆発した日
mugitti9
2
3k
The Past, Present, and Future of Enterprise Java
ivargrimstad
0
130
AI Coding Meetup #3 - 導入セッション / ai-coding-meetup-3
izumin5210
0
580
Featured
See All Featured
Easily Structure & Communicate Ideas using Wireframe
afnizarnur
194
16k
Testing 201, or: Great Expectations
jmmastey
45
7.7k
Making the Leap to Tech Lead
cromwellryan
135
9.5k
Bootstrapping a Software Product
garrettdimon
PRO
307
110k
Practical Tips for Bootstrapping Information Extraction Pipelines
honnibal
PRO
23
1.5k
Responsive Adventures: Dirty Tricks From The Dark Corners of Front-End
smashingmag
252
21k
Java REST API Framework Comparison - PWX 2021
mraible
33
8.8k
Unsuck your backbone
ammeep
671
58k
Typedesign – Prime Four
hannesfritz
42
2.8k
GraphQLの誤解/rethinking-graphql
sonatard
73
11k
Creating an realtime collaboration tool: Agile Flush - .NET Oxford
marcduiker
32
2.2k
How to Think Like a Performance Engineer
csswizardry
27
2k
Transcript
テスト自動化の学習向けデモサイト のご紹介 Test Automation Meetup #1 2020/04/16
岸健 a.k.a. 竹屋 テストエンジニア » 株式会社ウェブレッジ » テスト自動化研究会(STAR) » Twitter:
@takeya0x86 » GitHub: takeya0x86 2 HELLO!
今回は業務での事例ではなく、 個人での活動についてお話しします。 3
テスト自動化の学習向けデモサイト のご紹介 4 #
まとめ テスト自動化を学習する方向けに、 テスト対象として使えるデモサイトを作成しました! サンプルコードも作成したのであわせてお使いください! サイトのURL https://hotel.testplanisphere.dev/ 5
目次 1. デモサイトの特徴と使い方 2. サンプルコード 3. サイトを作った背景 6
デモサイトの特徴と使い方 7 1.
Place your screenshot here 8 HOTEL PLANISPHERE
どんな人向けか? » 自動テストの学習をしている人 » 社内、セミナーなど自動テストの研修を企画する人 » 自動テストについてのブログ記事や書籍を書く人 » 新しいテスト用ツールを試したい人 9
どんな人向けか? » 自動テストの学習をしている人 » 社内、セミナーなど自動テストの研修を企画する人 » 自動テストについてのブログ記事や書籍を書く人 » 新しいテスト用ツールを試したい人 これらの方々が使いやすい「テスト対象サイト」として作り
ました。 10
サイトの特徴1 » もともとあったデモサイトをアップデートしたもの » http://example.selenium.jp/reserveApp_Renewal/ » ホテルの予約サイトを模した作り » ログイン・会員登録・ホテルの宿泊予約の入力フォームを 用意
» レスポンシブデザインに対応しているためモバイルブラウ ザでも表示可能 11
サイトの特徴2 自動テストツールの使い方を覚えるときに必要な » HTML5で追加されたinput要素(date, rangeなど)を含 めた各種のinput » Ajax、iframe、新規ウィンドウ、ダイアログ などを各画面に配置しています。 12
サイトの特徴3 ログイン情報、会員登録の情報はブラウザのCookieおよび Session Storage、Local Storageに保存されます。 そのため、自分専用のサーバを立ち上げたり、他のユーザの 利用を気にしたりせずに使うことができます。 13
Place your screenshot here 14 HOTEL PLANISPHERE DEMO
サイトの特徴まとめ これらの特徴によって学習する人が、 1. 実際のウェブアプリケーションに近い環境で 2. 自動テストツールの持つ各機能を試すこと ができます。 15
サンプルコード 16 2.
サンプルコード 参考に使えるように実際にデモサイトをテスト対象とした自 動テストのコードを用意しています。 https://github.com/testplanisphere/hotel-example-selenium3-java https://github.com/testplanisphere/hotel-example-webdriverio 現在JavaとJavaScriptの二つのコードがあります。 17
Place your screenshot here 18 HOTEL PLANISPHERE AUTOMATING TESTS DEMO
CI環境 サンプルコードはGitHub ActionsをCI環境として使 い、テスト実行できるよう にしています。 19
ここまでのまとめ » テスト対象のウェブサイト » サンプルコード(2言語) » CI環境(GitHub Actions) 現在これらのリソースが揃っていて利用可能です。 20
サイトを作った背景 21 3.
やることが多い 自動テストは「やる事」「考える事」が多くあります。 » 自動テスト向けのテスト設計 » 日々の運用計画 » 結果フィードバックの方法 » テストコードのメンテナンス
» 自動テストの将来を考える » etc.. etc.. 22
時間がない 自動テストは「やる事」「考える事」が多くあります。 » ツールの使い方を勉強している時間がない!! 23
必要不可欠 とはいえ…… 自動テストはツール抜きでは成り立ちません。 「テスト対象ソフトウェアを自動で操作するソフトウェア」 が絶対に必要です。 24
最初の一歩 そして、自動テストに初めて触れる人にとっては 「ツールを使って自動テストを作って動かす体験」 が最初の入り口になります。 25
モチベーション 初心者の人にも早く先へ進んでもらって、いっしょに自動テストの ことを考えたい。 「ツールの使い方」は検索すれば出てくるけど、「自分たちのプロ ダクトに適したテストの作り方」は自分たちで頭をひねって考えな くてはいけない。早くそういう話をしたい。 だから、 「入り口」で立ち止まったり、つまずいたりして欲しくない。 26
目標 このサイトに来れば自動テストを勉強するために必要なものが揃っ ている。 初心者でも迷わずに進んでいける。 そんなサイトになることを目指して作っています。 27
お願い https://github.com/testplanisphere/hotel-example-site/ GitHubのリポジトリはPublicになっています。 ご意見、改善の提案などをリポジトリのissuesにお寄せください。 28
まとめ テスト自動化を学習する方向けに、 テスト対象として使えるデモサイトを作成しました。 サンプルコードも作成したのであわせてお使いください! サイトのURL https://hotel.testplanisphere.dev/ 29
さいごに サイト名の“Planisphere”は 「星座早見盤」という意味です。 初めて自動テストにふれる人でも、 これがあれば迷わずに「星座」を探 せるようにと名付けました。 30 H. Raab /
CC BY-SA 3.0
Let’s go on a journey AUTOMATING TESTS. 31
ありがとうございました! お問い合わせはこちら: » @takeya0x86 » https://takeya0x86.github.io/ 32 THANKS! » Presentation
template by SlidesCarnival » Photographs by Unsplash