Upgrade to Pro — share decks privately, control downloads, hide ads and more …

ノーコードに学ぶE2Eテスト自動化ベストプラクティス

Nozomi Ito
October 11, 2023

 ノーコードに学ぶE2Eテスト自動化ベストプラクティス

Nozomi Ito

October 11, 2023
Tweet

More Decks by Nozomi Ito

Other Decks in Technology

Transcript

  1. ノーコードに学ぶE2Eテスト⾃動化
    ベストプラクティス
    2023.10.11
    Frontend Night

    View full-size slide

  2. About me
    • 伊藤 望 (Ito Nozomi)
    • MagicPod CEO
    • ⾃動テストツール歴:約13年
    • Seleniumコミュニティ主宰
    • Twitter:@ito_nozomi

    View full-size slide

  3. 1. MagicPodとは
    2. ⾃動テストで変わる開発フロー
    3. MagicPod的ベストプラクティス
    4. 各種機能紹介
    Agenda

    View full-size slide

  4. 1. MagicPodとは
    2. ⾃動テストで変わる開発フロー
    3. MagicPod的ベストプラクティス
    4. 各種機能紹介

    View full-size slide

  5. MagicPod
    §Web & モバイルアプリのE2Eテスト⾃動化SasS
    §ノーコードで簡単にテスト作成
    §柔軟性とメンテナンス性が強み
    (magicpod.com)
    1. MagicPodとは

    View full-size slide

  6. ユーザーさんのブログ記事‧発表
    1. MagicPodとは
    ⾃動テストを社内へ浸透させた話
    MagicPodで始める
    がんばらない回帰試験の⾃動化
    スタンバイQAのテスト⾃動化
    (MagicPod)
    MagicPodのWeb APIコールを利⽤した
    MailSlurpの⾃動テストTips
    MagicPodの「履歴機能」による
    テストケースレビューの効率化
    MagicPodの要素検出で検出できなかった
    要素を指定する⽅法(XPath編)

    View full-size slide

  7. Demo(Webサイトテスト)
    https://www.youtube.com/watch?v=p1lHiyj2dms
    1. MagicPodとは

    View full-size slide

  8. 1. MagicPodとは
    2. ⾃動テストで変わる開発フロー
    3. MagicPod的ベストプラクティス
    4. 各種機能紹介

    View full-size slide

  9. 1. 開発⽣産性が向上
    2. ⾃動テストで変わる開発フロー
    • 毎⽇テスト、常にテスト
    • 問題の早期検出で⽣産性が向上
    開発期間
    😁
    リリース

    View full-size slide

  10. 2. 継続的デリバリーを実現
    2. ⾃動テストで変わる開発フロー
    • 1⽇何回も、好きなタイミングで変更を本番環境にデプロイ
    • あらゆるレベルのテストを⾃動化する必要がある
    本番
    デプロイ
    本番
    デプロイ
    本番
    デプロイ
    本番
    デプロイ

    View full-size slide

  11. Daily Test/Deployを実現した
    ユーザーが増えている
    2. ⾃動テストで変わる開発フロー

    View full-size slide

  12. 2. ⾃動テストで変わる開発フロー
    家族アルバム みてねの安定リリースを⽀えるMagicPod活⽤状況

    View full-size slide

  13. 2. ⾃動テストで変わる開発フロー
    フロントエンド開発における、デプロイ頻度を上げるための
    テスト設計と仕組みづくりのヒント

    View full-size slide

  14. 2. ⾃動テストで変わる開発フロー
    『スタディサプリ 中学講座』における E2E Test の運⽤と計測による改善

    View full-size slide

  15. 2. ⾃動テストで変わる開発フロー
    ⾼い開発⽣産性を実現するために取り組んだMagicPodの利活⽤

    View full-size slide

  16. Daily Test実現までの道のり
    2. ⾃動テストで変わる開発フロー
    CIを
    定着させる
    テストを
    いくつか作る
    CIにつないで
    毎⽇回す
    回しながら
    テストを
    増やす

    View full-size slide

  17. ⾼頻度デプロイ実現までの道のり
    2. ⾃動テストで変わる開発フロー
    各社事例を参考

    View full-size slide

  18. 1. MagicPodとは
    2. ⾃動テストで変わる開発フロー
    3. MagicPod的ベストプラクティス
    4. 各種機能紹介

    View full-size slide

  19. ⼀番実践して欲しい2つのこと
    3. MagicPod的ベストプラクティス
    1. 毎⽇⾃動実⾏
    2. クラウドで実⾏

    View full-size slide

  20. 1.テストは毎⽇⾃動実⾏
    3. MagicPod的ベストプラクティス
    • 最新のソースコードを毎⽇ビルド‧デプロイし、テストを実⾏
    • ⼿動だと、担当者‧体制が変わった際に実施されなくなりがち
    • リリース直前だけ実⾏だと、問題が起きた時に時間がなくて放置
    しがち
    • 毎⽇の変更を随時反映していく⽅がメンテナンス難易度が低い

    View full-size slide

  21. 2.テストはクラウドで実⾏
    3. MagicPod的ベストプラクティス
    • MagicPodクラウド、BrowserStack、SauceLabsのいずれか
    • ローカルPCだと、トラブルでテスト実⾏に時間がかかり、⼼理
    的ハードルが⾼くなる
    - モバイル実機の接続トラブル
    - MagicPodDesktopバージョンアップのトラブル
    - マシン環境トラブル

    View full-size slide

  22. 優先順位をつけて⾃動化する
    3. MagicPod的ベストプラクティス
    • 早めに何らかの成果を得ることが、⾃動化定着の近道
    • 優先順位をつけて⾃動化することが⼤切
    まずは正常系を
    カバー
    運⽤してみて、
    課題を洗い出す
    異常系は
    正常系のあと

    View full-size slide

  23. テスト間の依存関係を減らす
    3. MagicPod的ベストプラクティス
    • 分かりにくいエラーが減る
    • 失敗切り分けの難易度が下がる
    • 実現しやすいよう、MagicPod側も改善していきたい

    View full-size slide

  24. 共有ステップを積極的に使う
    3. MagicPod的ベストプラクティス
    • 画⾯が⼤きく変わった時のメンテナンスが楽
    • ⾃動修復は(現状)あらゆるケースに有効ではない

    View full-size slide

  25. ロケーターについて学ぶ
    3. MagicPod的ベストプラクティス
    • ロケーター編集できると、画⾯変更により強いテストが作れる
    • ⽂法について学べるコンテンツ
    - https://qiita.com/rllllho/items/cb1187cec0fb17fc650a
    - http://blog.bangboo.com/sub/xpath.html
    • MagicPod側のコンテンツ‧機能も強化したい

    View full-size slide

  26. テストしやすいアプリケーションにする
    3. MagicPod的ベストプラクティス
    • 変わりにくいユニークIDをUI要素に付与する
    • テスト環境では⾃動テストしやすい設定にする
    - WebViewデバッグ有効化
    - ⾃動化しにくい機能を迂回する⽅法を⽤意
    • データを取得‧操作できるWeb APIを⽤意
    - データのクリア
    - 初期データのセットアップ
    - 内部IDの取得

    View full-size slide

  27. 1. MagicPodとは
    2. ⾃動テストで変わる開発フロー
    3. MagicPod的ベストプラクティス
    4. 各種機能紹介

    View full-size slide

  28. クロスブラウザ‧マルチ端末
    4. 各種機能紹介
    • 作ったテストをさまざまなブラウザ‧端末で実⾏
    • 並列実⾏もサポート

    View full-size slide

  29. Visual Regression Test
    4. 各種機能紹介
    • 画⾯キャプチャが期待値と⼀致するかチェック
    • デザイン崩れバグなどの検出が可能

    View full-size slide

  30. UI変更があった場合のテスト⾃動修復
    4. 各種機能紹介

    View full-size slide

  31. CI連携
    4. 各種機能紹介
    • Jenkins、GitHub Actions、 CircleCI、 Bitriseほか

    View full-size slide

  32. 各種メンテナンス⽀援機能
    4. 各種機能紹介
    UI定義共有
    共有ステップ データ駆動テスト
    変数
    条件分岐 履歴管理

    View full-size slide

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

    View full-size slide