Link
Embed
Share
Beginning
This slide
Copy link URL
Copy link URL
Copy iframe embed code
Copy iframe embed code
Copy javascript embed code
Copy javascript embed code
Share
Tweet
Share
Tweet
Slide 1
Slide 1 text
ノーコードに学ぶE2Eテスト⾃動化 ベストプラクティス 2023.10.11 Frontend Night
Slide 2
Slide 2 text
About me • 伊藤 望 (Ito Nozomi) • MagicPod CEO • ⾃動テストツール歴:約13年 • Seleniumコミュニティ主宰 • Twitter:@ito_nozomi
Slide 3
Slide 3 text
1. MagicPodとは 2. ⾃動テストで変わる開発フロー 3. MagicPod的ベストプラクティス 4. 各種機能紹介 Agenda
Slide 4
Slide 4 text
1. MagicPodとは 2. ⾃動テストで変わる開発フロー 3. MagicPod的ベストプラクティス 4. 各種機能紹介
Slide 5
Slide 5 text
MagicPod §Web & モバイルアプリのE2Eテスト⾃動化SasS §ノーコードで簡単にテスト作成 §柔軟性とメンテナンス性が強み (magicpod.com) 1. MagicPodとは
Slide 6
Slide 6 text
ユーザーさんのブログ記事‧発表 1. MagicPodとは ⾃動テストを社内へ浸透させた話 MagicPodで始める がんばらない回帰試験の⾃動化 スタンバイQAのテスト⾃動化 (MagicPod) MagicPodのWeb APIコールを利⽤した MailSlurpの⾃動テストTips MagicPodの「履歴機能」による テストケースレビューの効率化 MagicPodの要素検出で検出できなかった 要素を指定する⽅法(XPath編)
Slide 7
Slide 7 text
Demo(Webサイトテスト) https://www.youtube.com/watch?v=p1lHiyj2dms 1. MagicPodとは
Slide 8
Slide 8 text
1. MagicPodとは 2. ⾃動テストで変わる開発フロー 3. MagicPod的ベストプラクティス 4. 各種機能紹介
Slide 9
Slide 9 text
1. 開発⽣産性が向上 2. ⾃動テストで変わる開発フロー • 毎⽇テスト、常にテスト • 問題の早期検出で⽣産性が向上 開発期間 😁 リリース
Slide 10
Slide 10 text
2. 継続的デリバリーを実現 2. ⾃動テストで変わる開発フロー • 1⽇何回も、好きなタイミングで変更を本番環境にデプロイ • あらゆるレベルのテストを⾃動化する必要がある 本番 デプロイ 本番 デプロイ 本番 デプロイ 本番 デプロイ
Slide 11
Slide 11 text
Daily Test/Deployを実現した ユーザーが増えている 2. ⾃動テストで変わる開発フロー
Slide 12
Slide 12 text
2. ⾃動テストで変わる開発フロー 家族アルバム みてねの安定リリースを⽀えるMagicPod活⽤状況
Slide 13
Slide 13 text
2. ⾃動テストで変わる開発フロー フロントエンド開発における、デプロイ頻度を上げるための テスト設計と仕組みづくりのヒント
Slide 14
Slide 14 text
2. ⾃動テストで変わる開発フロー 『スタディサプリ 中学講座』における E2E Test の運⽤と計測による改善
Slide 15
Slide 15 text
2. ⾃動テストで変わる開発フロー ⾼い開発⽣産性を実現するために取り組んだMagicPodの利活⽤
Slide 16
Slide 16 text
Daily Test実現までの道のり 2. ⾃動テストで変わる開発フロー CIを 定着させる テストを いくつか作る CIにつないで 毎⽇回す 回しながら テストを 増やす
Slide 17
Slide 17 text
⾼頻度デプロイ実現までの道のり 2. ⾃動テストで変わる開発フロー 各社事例を参考
Slide 18
Slide 18 text
1. MagicPodとは 2. ⾃動テストで変わる開発フロー 3. MagicPod的ベストプラクティス 4. 各種機能紹介
Slide 19
Slide 19 text
⼀番実践して欲しい2つのこと 3. MagicPod的ベストプラクティス 1. 毎⽇⾃動実⾏ 2. クラウドで実⾏
Slide 20
Slide 20 text
1.テストは毎⽇⾃動実⾏ 3. MagicPod的ベストプラクティス • 最新のソースコードを毎⽇ビルド‧デプロイし、テストを実⾏ • ⼿動だと、担当者‧体制が変わった際に実施されなくなりがち • リリース直前だけ実⾏だと、問題が起きた時に時間がなくて放置 しがち • 毎⽇の変更を随時反映していく⽅がメンテナンス難易度が低い
Slide 21
Slide 21 text
2.テストはクラウドで実⾏ 3. MagicPod的ベストプラクティス • MagicPodクラウド、BrowserStack、SauceLabsのいずれか • ローカルPCだと、トラブルでテスト実⾏に時間がかかり、⼼理 的ハードルが⾼くなる - モバイル実機の接続トラブル - MagicPodDesktopバージョンアップのトラブル - マシン環境トラブル
Slide 22
Slide 22 text
優先順位をつけて⾃動化する 3. MagicPod的ベストプラクティス • 早めに何らかの成果を得ることが、⾃動化定着の近道 • 優先順位をつけて⾃動化することが⼤切 まずは正常系を カバー 運⽤してみて、 課題を洗い出す 異常系は 正常系のあと
Slide 23
Slide 23 text
テスト間の依存関係を減らす 3. MagicPod的ベストプラクティス • 分かりにくいエラーが減る • 失敗切り分けの難易度が下がる • 実現しやすいよう、MagicPod側も改善していきたい
Slide 24
Slide 24 text
共有ステップを積極的に使う 3. MagicPod的ベストプラクティス • 画⾯が⼤きく変わった時のメンテナンスが楽 • ⾃動修復は(現状)あらゆるケースに有効ではない
Slide 25
Slide 25 text
ロケーターについて学ぶ 3. MagicPod的ベストプラクティス • ロケーター編集できると、画⾯変更により強いテストが作れる • ⽂法について学べるコンテンツ - https://qiita.com/rllllho/items/cb1187cec0fb17fc650a - http://blog.bangboo.com/sub/xpath.html • MagicPod側のコンテンツ‧機能も強化したい
Slide 26
Slide 26 text
テストしやすいアプリケーションにする 3. MagicPod的ベストプラクティス • 変わりにくいユニークIDをUI要素に付与する • テスト環境では⾃動テストしやすい設定にする - WebViewデバッグ有効化 - ⾃動化しにくい機能を迂回する⽅法を⽤意 • データを取得‧操作できるWeb APIを⽤意 - データのクリア - 初期データのセットアップ - 内部IDの取得
Slide 27
Slide 27 text
1. MagicPodとは 2. ⾃動テストで変わる開発フロー 3. MagicPod的ベストプラクティス 4. 各種機能紹介
Slide 28
Slide 28 text
クロスブラウザ‧マルチ端末 4. 各種機能紹介 • 作ったテストをさまざまなブラウザ‧端末で実⾏ • 並列実⾏もサポート
Slide 29
Slide 29 text
Visual Regression Test 4. 各種機能紹介 • 画⾯キャプチャが期待値と⼀致するかチェック • デザイン崩れバグなどの検出が可能
Slide 30
Slide 30 text
UI変更があった場合のテスト⾃動修復 4. 各種機能紹介
Slide 31
Slide 31 text
CI連携 4. 各種機能紹介 • Jenkins、GitHub Actions、 CircleCI、 Bitriseほか
Slide 32
Slide 32 text
各種メンテナンス⽀援機能 4. 各種機能紹介 UI定義共有 共有ステップ データ駆動テスト 変数 条件分岐 履歴管理
Slide 33
Slide 33 text
ありがとうございました!