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
TestCaféでE2Eテスト!
Search
Azusa Okamoto
May 28, 2022
Programming
0
130
TestCaféでE2Eテスト!
Azusa Okamoto
May 28, 2022
Tweet
Share
More Decks by Azusa Okamoto
See All by Azusa Okamoto
ちゃんとSvelte, Hello Worldした!
azunyan
0
23
最近取り組んでいることについて喋ってみる
azunyan
0
3
フロントエンドエンジニアが関数型プログラミングに出会った話
azunyan
0
58
TECH WOMAN KANSAIの 取り組みと今後~2024年の振り返りと2025年へ~
azunyan
0
54
Go初心者が開発やってみた!
azunyan
1
520
デブサミウーマン2023 アウトプットって何が良いの?
azunyan
0
1.1k
個人的に楽しかった実装2022
azunyan
0
120
vanilla-extractを使ってみた!with React
azunyan
1
800
Next.js・microCMSで ポートフォリオサイトを作りかえて学んだこと
azunyan
0
2.1k
Other Decks in Programming
See All in Programming
マテリアルって何者?RealityKitで扱うマテリアル入門
nao_randd
0
130
Devinで実践する!AIエージェントと協働する開発組織の作り方
masahiro_nishimi
6
1.3k
#QiitaBash TDDでAIに設計イメージを伝える
ryosukedtomita
2
510
Reactive Thinking with Signals, Resource API, and httpResource @Devm.io Angular 20 Launch Party
manfredsteyer
PRO
0
110
AIにコードを生成するコードを作らせて、再現性を担保しよう! / Let AI generate code to ensure reproducibility
yamachu
5
5.2k
MLOps Japan 勉強会 #52 - 特徴量を言語を越えて一貫して管理する, 『特徴量ドリブン』な MLOps の実現への試み
taniiicom
2
310
Duke on CRaC with Jakarta EE
ivargrimstad
1
530
AIコーディングの本質は“コード“ではなく“構造“だった / The essence of AI coding is not “code” but "structure
seike460
PRO
2
660
OpenTelemetryで始めるベンダーフリーなobservability / Vendor-free observability starting with OpenTelemetry
seike460
PRO
0
150
医療系ソフトウェアのAI駆動開発
koukimiura
1
160
CQRS/ESのクラスとシステムフロー ~ RailsでフルスクラッチでCQRSESを組んで みたことから得た学び~
suzukimar
0
170
CRUD から CQRS へ ~ 分離が可能にする柔軟性
tkawae
0
200
Featured
See All Featured
How to train your dragon (web standard)
notwaldorf
91
6k
How GitHub (no longer) Works
holman
314
140k
4 Signs Your Business is Dying
shpigford
183
22k
Documentation Writing (for coders)
carmenintech
71
4.8k
How STYLIGHT went responsive
nonsquared
100
5.6k
How to Ace a Technical Interview
jacobian
276
23k
Rebuilding a faster, lazier Slack
samanthasiow
81
9k
Principles of Awesome APIs and How to Build Them.
keavy
126
17k
The Illustrated Children's Guide to Kubernetes
chrisshort
48
50k
Facilitating Awesome Meetings
lara
54
6.4k
Imperfection Machines: The Place of Print at Facebook
scottboms
267
13k
What's in a price? How to price your products and services
michaelherold
245
12k
Transcript
TestCaféでE2Eテスト! あずにゃん 20220528_とにかくほめる!マウントなしのLT会
自己紹介 ・フロントエンドエンジニア ・気づけば、2年目... 【言語】 JavaScript, TypeScript 【FW・ライブラリ】 React, Vue.js @azunyan_eng
今日お話しすること 1. E2Eテストとは? 2. TestCaféとは? 3. 主な使い方 4. 実践! 5.
感想や学び 6. 参考資料
1. E2Eテストとは? 2. TestCaféとは? 3. 主な使い方 4. 実践! 5. 感想や学び
6. 参考資料
E2Eテストとは? システム全体をテストする。 ユーザが利用する時のように、ブラウザ操作をしながら テスト。
1. E2Eテストとは? 3. 主な使い方 4. 実践! 5. 感想や学び 6. 参考資料
2. TestCaféとは?
TestCaféとは? ・E2Eテスト自動化フレームワーク。 ・JavaScript/TypeScriptで記述。 ・複数のブラウザに対応 ・複数のブラウザで同時実行できる。
TestCaféとは? const const homeTab = ( ). ( ). (
); = . ( ). ( ); . ( . ). ( ); tabs homeTab tabs Selector find nth child nth expect eql '#root' 'div' 'a' 'Home' 2 0 awaitt innerText (例)
手動でポチポチ...。 手動の操作不要! TestCaféなし TestCaféあり
1. E2Eテストとは? 2. TestCaféとは? 4. 実践! 5. 感想や学び 6. 参考資料
3. 主な使い方
主な使い方 ①要素関係(取り出してくるなど...) ②テスト関係
innerText value 要素のテキストを取得。 input要素のテキストを 取得。
(例) // innerText // value const const = . (
). ; = . ( ). ; pageTitle pageContents inputForm form $ formName child find 'h1' `input[name=" "]` innerText value { }
getStyleProperty() 要素が持つ、指定したCSSのプロパティの値を取得。
(例) // 背景色を取ってくる。 const = . ( ); activeBG homeTab
getStyleProperty 'background-color'
hasAttribute() その要素が指定した属性を持っているかどうかを返す。
(例) const = . ( ); btnWithDisabled submitBtn hasAttribute 'disabled'
click() 要素をクリックする。
click() (例) const const = ( ). ( ). (
); = . ( ). ( ); . ( ); navTabs formTab navTabs formTab Selector find nth child nth click '#root' 'div' 'a' 2 1 await t
typeText() テキストを入力する。
click() (例) const true . await inputForm form inputForm =
( ); find typeText `input[name="name"]` 'テスト花子' . ( , , : ); t { } replace
eql() notEql() 値が合っているか。 値が異なっているか。
click() (例) // クラス名で指定することも可能 // await t.expect(対象要素).eql(想定している結果); const const =
( ). ( ); = . ( ). ; . ( ). ( ); modal modalText modal modalText Selector child child expect eql '.test-modal' 'div' 'p' 'Modalが出現!!' innerText t await
ok() notOk() 値がtrueであるか。 値がfalseであるか。
click() (例) // ok() // notOk() await await . (
. ( )). (); . ( . ( )). (); t t expect hasAttribute ok expect hasAttribute notOk submitBtn submitBtn 'disabled' 'disabled'
takeScreenshot() スクリーンショットを撮影。 指定したパスに保存される。
click() (例) await . ( : , : ); t
takeScreenshot { 'result/checkHomeTabContents.png' } path fullPage true
1. E2Eテストとは? 2. TestCaféとは? 3. 主な使い方 5. 感想や学び 6. 参考資料
4. 実践!
実践! 表示されている内容や要素が持つ属性などを利用して、 テストしていく!
実践! 〜主なテスト内容〜 ・Homeタブが表示されているか。
実践! 〜主なテスト内容〜 ・Formタブが表示されているか。 ・初期状態で、送信ボタンが無効になっているか。 ・初期値が合っているか。 ・フォームに入力できるか。 ・フォーム入力後、送信ボタンが有効になっているか。
実践! 〜主なテスト内容〜 ・Buttonsタブが表示されているか。 ・モーダルが表示されるか。 ・モーダルを消すことができるか。
動かしてみる!!
1. E2Eテストとは? 2. TestCaféとは? 3. 主な使い方 4. 実践! 6. 参考資料
5. 感想や学び
感想や学び ・「現状」だけでなく、「今後」のことも考慮して要素 を指定! ・色関係や改行ありテキスト判定において、制約がある のになかなか気がつけずて手間取った。 ・画面仕様をじっくり見る機会になり、プロジェクトに 途中から参画しても仕様把握に繋がって助かった!
感想や学び ・コマンドを実行すると、ブラウザが立ち上がって、自 動でテストできるのは便利! ・テストコード作成初心者でも、メソッドを組み合わせ ていくことで問題なく扱えた!
1. E2Eテストとは? 2. TestCaféとは? 3. 主な使い方 4. 実践! 5. 感想や学び
6. 参考資料
参考資料 TestCafé公式ドキュメント
ご清聴ありがとう ございました!