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

ありがとうございました!