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
ノーコードに学ぶE2Eテスト自動化ベストプラクティス
Search
Nozomi Ito
October 11, 2023
Technology
0
640
ノーコードに学ぶE2Eテスト自動化ベストプラクティス
Frontend Night 〜Webフロントエンドテスト編〜
のLT登壇資料です。
Nozomi Ito
October 11, 2023
Tweet
Share
More Decks by Nozomi Ito
See All by Nozomi Ito
ノーコードE2Eテストで実現する高速開発
nozomiito
0
540
MagicPodで実現するE2Eテスト自動化
nozomiito
0
2.2k
MagicPod開発におけるテスト自動化とCI
nozomiito
0
620
最近のMagicPodまとめ
nozomiito
0
510
テスト自動化スタートアップがエバンジェリストを募集するワケ
nozomiito
0
230
MagicPodが取り組むテスト自動化最前線
nozomiito
0
390
ロケーターを学んでテスト自動化上級者を目指そう
nozomiito
1
5.1k
テスト自動化で起業した10年とテスト自動化普及の歴史を振り返る
nozomiito
4
2.1k
テスト自動化で起業した10年とテスト自動化普及の歴史を振り返る
nozomiito
8
5k
Other Decks in Technology
See All in Technology
新卒1年目が挑む!生成AI × マルチエージェントで実現する次世代オンボーディング / operation-ai-onboarding
cyberagentdevelopers
PRO
1
150
独自ツール開発でスタジオ撮影をDX!「VLS(Virtual LED Studio)」 / dx-studio-vls
cyberagentdevelopers
PRO
1
170
Product Engineer Night #6プロダクトエンジニアを育む仕組み・施策
hacomono
PRO
1
370
一休.comレストランにおけるRustの活用
kymmt90
3
550
Nix入門パラダイム編
asa1984
2
190
ガバメントクラウド単独利用方式におけるIaC活用
techniczna
3
250
プロダクト成長に対応するプラットフォーム戦略:Authleteによる共通認証基盤の移行事例 / Building an authentication platform using Authlete and AWS
kakehashi
1
140
WINTICKETアプリで実現した高可用性と高速リリースを支えるエコシステム / winticket-eco-system
cyberagentdevelopers
PRO
1
190
新R25、乃木坂46 Mobileなどのファンビジネスを支えるマルチテナンシーなプラットフォームの全体像 / cam-multi-cloud
cyberagentdevelopers
PRO
1
120
初心者に Vue.js を 教えるには
tsukuha
5
370
新卒1年目が向き合う生成AI事業の開発を加速させる技術選定 / ai-web-launcher
cyberagentdevelopers
PRO
7
1.5k
Apple/Google/Amazonの決済システムの違いを踏まえた定期購読課金システムの構築 / abema-billing-system
cyberagentdevelopers
PRO
1
210
Featured
See All Featured
We Have a Design System, Now What?
morganepeng
50
7.2k
[RailsConf 2023] Rails as a piece of cake
palkan
51
4.8k
KATA
mclloyd
29
13k
The Straight Up "How To Draw Better" Workshop
denniskardys
232
140k
Unsuck your backbone
ammeep
668
57k
RailsConf 2023
tenderlove
29
880
Designing for Performance
lara
604
68k
Designing Experiences People Love
moore
138
23k
Rails Girls Zürich Keynote
gr2m
93
13k
Creating an realtime collaboration tool: Agile Flush - .NET Oxford
marcduiker
25
1.8k
GraphQLとの向き合い方2022年版
quramy
43
13k
JavaScript: Past, Present, and Future - NDC Porto 2020
reverentgeek
47
5k
Transcript
ノーコードに学ぶE2Eテスト⾃動化 ベストプラクティス 2023.10.11 Frontend Night
About me • 伊藤 望 (Ito Nozomi) • MagicPod CEO
• ⾃動テストツール歴:約13年 • Seleniumコミュニティ主宰 • Twitter:@ito_nozomi
1. MagicPodとは 2. ⾃動テストで変わる開発フロー 3. MagicPod的ベストプラクティス 4. 各種機能紹介 Agenda
1. MagicPodとは 2. ⾃動テストで変わる開発フロー 3. MagicPod的ベストプラクティス 4. 各種機能紹介
MagicPod §Web & モバイルアプリのE2Eテスト⾃動化SasS §ノーコードで簡単にテスト作成 §柔軟性とメンテナンス性が強み (magicpod.com) 1. MagicPodとは
ユーザーさんのブログ記事‧発表 1. MagicPodとは ⾃動テストを社内へ浸透させた話 MagicPodで始める がんばらない回帰試験の⾃動化 スタンバイQAのテスト⾃動化 (MagicPod) MagicPodのWeb APIコールを利⽤した
MailSlurpの⾃動テストTips MagicPodの「履歴機能」による テストケースレビューの効率化 MagicPodの要素検出で検出できなかった 要素を指定する⽅法(XPath編)
Demo(Webサイトテスト) https://www.youtube.com/watch?v=p1lHiyj2dms 1. MagicPodとは
1. MagicPodとは 2. ⾃動テストで変わる開発フロー 3. MagicPod的ベストプラクティス 4. 各種機能紹介
1. 開発⽣産性が向上 2. ⾃動テストで変わる開発フロー • 毎⽇テスト、常にテスト • 問題の早期検出で⽣産性が向上 開発期間 😁
リリース
2. 継続的デリバリーを実現 2. ⾃動テストで変わる開発フロー • 1⽇何回も、好きなタイミングで変更を本番環境にデプロイ • あらゆるレベルのテストを⾃動化する必要がある 本番 デプロイ
本番 デプロイ 本番 デプロイ 本番 デプロイ
Daily Test/Deployを実現した ユーザーが増えている 2. ⾃動テストで変わる開発フロー
2. ⾃動テストで変わる開発フロー 家族アルバム みてねの安定リリースを⽀えるMagicPod活⽤状況
2. ⾃動テストで変わる開発フロー フロントエンド開発における、デプロイ頻度を上げるための テスト設計と仕組みづくりのヒント
2. ⾃動テストで変わる開発フロー 『スタディサプリ 中学講座』における E2E Test の運⽤と計測による改善
2. ⾃動テストで変わる開発フロー ⾼い開発⽣産性を実現するために取り組んだMagicPodの利活⽤
Daily Test実現までの道のり 2. ⾃動テストで変わる開発フロー CIを 定着させる テストを いくつか作る CIにつないで 毎⽇回す
回しながら テストを 増やす
⾼頻度デプロイ実現までの道のり 2. ⾃動テストで変わる開発フロー 各社事例を参考
1. MagicPodとは 2. ⾃動テストで変わる開発フロー 3. MagicPod的ベストプラクティス 4. 各種機能紹介
⼀番実践して欲しい2つのこと 3. MagicPod的ベストプラクティス 1. 毎⽇⾃動実⾏ 2. クラウドで実⾏
1.テストは毎⽇⾃動実⾏ 3. MagicPod的ベストプラクティス • 最新のソースコードを毎⽇ビルド‧デプロイし、テストを実⾏ • ⼿動だと、担当者‧体制が変わった際に実施されなくなりがち • リリース直前だけ実⾏だと、問題が起きた時に時間がなくて放置 しがち
• 毎⽇の変更を随時反映していく⽅がメンテナンス難易度が低い
2.テストはクラウドで実⾏ 3. MagicPod的ベストプラクティス • MagicPodクラウド、BrowserStack、SauceLabsのいずれか • ローカルPCだと、トラブルでテスト実⾏に時間がかかり、⼼理 的ハードルが⾼くなる - モバイル実機の接続トラブル
- MagicPodDesktopバージョンアップのトラブル - マシン環境トラブル
優先順位をつけて⾃動化する 3. MagicPod的ベストプラクティス • 早めに何らかの成果を得ることが、⾃動化定着の近道 • 優先順位をつけて⾃動化することが⼤切 まずは正常系を カバー 運⽤してみて、
課題を洗い出す 異常系は 正常系のあと
テスト間の依存関係を減らす 3. MagicPod的ベストプラクティス • 分かりにくいエラーが減る • 失敗切り分けの難易度が下がる • 実現しやすいよう、MagicPod側も改善していきたい
共有ステップを積極的に使う 3. MagicPod的ベストプラクティス • 画⾯が⼤きく変わった時のメンテナンスが楽 • ⾃動修復は(現状)あらゆるケースに有効ではない
ロケーターについて学ぶ 3. MagicPod的ベストプラクティス • ロケーター編集できると、画⾯変更により強いテストが作れる • ⽂法について学べるコンテンツ - https://qiita.com/rllllho/items/cb1187cec0fb17fc650a -
http://blog.bangboo.com/sub/xpath.html • MagicPod側のコンテンツ‧機能も強化したい
テストしやすいアプリケーションにする 3. MagicPod的ベストプラクティス • 変わりにくいユニークIDをUI要素に付与する • テスト環境では⾃動テストしやすい設定にする - WebViewデバッグ有効化 -
⾃動化しにくい機能を迂回する⽅法を⽤意 • データを取得‧操作できるWeb APIを⽤意 - データのクリア - 初期データのセットアップ - 内部IDの取得
1. MagicPodとは 2. ⾃動テストで変わる開発フロー 3. MagicPod的ベストプラクティス 4. 各種機能紹介
クロスブラウザ‧マルチ端末 4. 各種機能紹介 • 作ったテストをさまざまなブラウザ‧端末で実⾏ • 並列実⾏もサポート
Visual Regression Test 4. 各種機能紹介 • 画⾯キャプチャが期待値と⼀致するかチェック • デザイン崩れバグなどの検出が可能
UI変更があった場合のテスト⾃動修復 4. 各種機能紹介
CI連携 4. 各種機能紹介 • Jenkins、GitHub Actions、 CircleCI、 Bitriseほか
各種メンテナンス⽀援機能 4. 各種機能紹介 UI定義共有 共有ステップ データ駆動テスト 変数 条件分岐 履歴管理
ありがとうございました!