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

2022技育祭_映写資料①

techtekt
November 18, 2022

 2022技育祭_映写資料①

techtekt

November 18, 2022
Tweet

More Decks by techtekt

Other Decks in Technology

Transcript

  1. UIテスト自動化
    シニアエンジニア
    青木 美穂子

    View full-size slide

  2. はじめに
    2

    View full-size slide

  3. 品質保証とは ソフトウェアにおける品質保証とは、
    ソフトウェアに要求される品質が守
    られていることを確認・保証すること
    3

    View full-size slide

  4. テストとは
    ソフトウェアテストはソフトウェアの品
    質を評価し、運用環境でソフトウェ
    アの故障が発生するリスクを低減す
    る1つの手段
    4

    View full-size slide

  5. 現状の課題
    部内で開発しているサービスの初期
    リリースや、大きな改修後のリリース
    などは外部の会社に品質保証を委
    託している
    →日々の小規模なリリースに関して、
    自分たちで品質を保証する仕組み
    が不足
    5

    View full-size slide

  6. テスト自動化
    ソフトウェアテストにおける設計や実
    行、結果の確認およびレポート作
    成、進捗管理といった一連の工程
    の一部あるいはすべてを自動化す
    ること
    ソフトウェアテストの効率向上や範
    囲拡大、コストの削減や実行時間
    の短縮などを目的とした取り組み
    6

    View full-size slide

  7. UIテスト種別
    • ユニットテスト
    • Jest
    • スナップショットテスト
    • DOMテスト
    • エンドツーエンドテスト
    • Selenium
    • Datadog Browser Test
    7

    View full-size slide

  8. UIテスト種別
    • ユニットテスト
    • Jest
    • スナップショットテスト
    • DOMテスト
    • エンドツーエンドテスト
    • Selenium
    • Datadog Browser Test
    8
    こちらに関して
    自動化にチャレンジ

    View full-size slide

  9. Selenium
    10
    • https://www.selenium.dev/
    • Seleniumはウェブブラウザ上での操作を自動化するためのツール群
    • 2004に誕生
    • OSS (Apache 2.0 license)
    • ツール
    • WebDriver
    • IDE
    • Grid

    View full-size slide

  10. Selenium
    11
    • https://www.selenium.dev/
    • Seleniumはウェブブラウザ上での操作を自動化するためのツール群
    • 2004に誕生
    • OSS (Apache 2.0 license)
    • ツール
    • WebDriver
    • IDE
    • Grid

    View full-size slide

  11. Selenium -
    WebDriver

    View full-size slide

  12. WebDriver
    13
    • Seleniumの中核機能
    • ブラウザベンダーが提供するブラウザ自動化APIを使用してブラウザを
    制御し、実際のユーザーがブラウザを操作しているかのようにテストを
    実行可能
    • シンプルで簡潔なプログラミングインターフェース
    • コンパクトなオブジェクト指向のAPI

    View full-size slide

  13. WebDriver
    14
    Browser Supported OS Maintained by Download Issue Tracker
    Chromium/Chrome Windows/macOS/Linux Google Downloads Issues
    Firefox Windows/macOS/Linux Mozilla Downloads Issues
    Edge Windows/macOS Microsoft Downloads Issues
    Internet Explorer Windows
    Selenium
    Project
    Downloads Issues
    Safari
    macOS High Sierra and
    newer
    Apple Built in Issues

    View full-size slide

  14. WebDriver
    15
    • ライブラリ
    • Java
    • Python
    • C#
    • Ruby
    • JavaScript
    • Kotlin

    View full-size slide

  15. WebDriver - デモ環境
    16
    • Jupyter Notebook (or Jupyter Lab)
    $ brew install python3
    $ pip3 install jupyter
    $ jupyter notebook
    • Selenium
    $ pip3 install selenium
    • WebDriver
    $ pip3 install chromedriver-binary==

    View full-size slide

  16. WebDriver - デモ
    17

    View full-size slide

  17. WebDriver - ブラウザの起動
    from selenium import webdriver
    from selenium.webdriver.chrome.options import Options
    options = Options()
    options.add_argument('--disable-gpu')
    options.add_argument('--disable-extensions')
    options.add_argument('--proxy-server="direct://"')
    options.add_argument('--proxy-bypass-list=*')
    options.add_argument('--start-maximized')
    # options.add_argument(‘--headless’) # ヘッドレスモード
    # ブラウザの起動
    driver = webdriver.Chrome(executable_path= '/Users/mihokoaoki/Library/Python/3.8/lib/python/site-packages/chromedriver_binary/chromedriver’, options=options)
    # ページの表示
    driver.get('https://careerpocket.jp')
    18

    View full-size slide

  18. WebDriver - 要素の表示の待機とクリック
    from selenium.webdriver.support.ui import WebDriverWait
    from selenium.webdriver.support import expected_conditions as EC
    from selenium.webdriver.common.by import By
    # 最長180秒待機
    wait = WebDriverWait(driver, 180)
    # 画像が表示されるまで待機
    logoImg = wait.until(EC.presence_of_element_located((By.XPATH, '//*[@id="__layout"]/div/div/div/div[1]/img’)))
    # リンクが表示されるまで待機
    loginLink = wait.until(EC.presence_of_element_located((By.XPATH, '//*[@id="__layout"]/div/header/div/div/a[2]')))
    # リンクをクリック
    loginLink.click()

    View full-size slide

  19. WebDriver - フォームの入力とサブミット
    # ユーザー名の入力
    userName = wait.until(EC.presence_of_element_located((By.XPATH,
    '//*[@id="__layout"]/div/div/div/div/div/div[3]/div[1]/div/input')))
    userName.send_keys('[email protected]’)
    # パスワードの入力
    password = driver.find_element(By.XPATH,
    '//*[@id="__layout"]/div/div/div/div/div/div[3]/div[2]/div/input')
    password.send_keys('*******’)
    # サブミット
    submitButton = driver.find_element(By.XPATH,
    '//*[@id="__layout"]/div/div/div/div/div/div[6]/button')
    submitButton.click()

    View full-size slide

  20. WebDriver - テキストやスクリーンショットの取得
    # 見出しテキストの取得
    lastColumnHeader = driver.find_element(By.XPATH,
    '//*[@id="__layout"]/div/div/div/div/div[3]/div[12]/a/div[2]/h2')
    lastColumnHeaderText = lastColumnHeader.text
    print(lastColumnHeaderText)
    # スクリーンショットを取る
    driver.save_screenshot('screenshot_columnDetail.png')
    Image("screenshot_columnDetail.png")

    View full-size slide

  21. WebDriver - ブラウザの終了
    # ブラウザを閉じる
    driver.close()
    # ブラウザの終了
    driver.quit()

    View full-size slide

  22. WebDriver - CI/CD
    • 前提
    • WebDriverをヘッドレスモードで起動
    • options.add_argument(‘--headless’)
    1. ipynbをコマンド実行
    $ jupyter nbconvert --execute UI_Test_Automation.ipynb --to notebook
    2. ipynbをpyにエクスポートしてコマンド実行
    $ python3 UI_Test_Automation.py

    View full-size slide

  23. 補足: CI/CDとは
    • 継続的インテグレーション(Continuous Integration)
    • 開発者が行ったコード変更がリポジトリにマージされたタイミングで、その内容をビルドしテスト
    する一連のプロセスを繰り返し行う開発手法
    • 継続的デリバリー(Continuous Delivery)
    • 開発者が行ったコード変更がリポジトリにマージされたタイミングで、その内容をリリースするプ
    ロセスを繰り返し行う開発手法
    CI/CDを開発プロセスに組み込むメリット
    • リリースサイクルの向上
    • バグの早期発見

    View full-size slide

  24. WebDriver感想
    25
    • 品質管理としては以下の管理がしやすい
    • テストケース変更管理(誰が・いつ・どこを)
    • テストケースのバージョン管理&必要に応じてロールバック
    • エクスポート/インポート可能
    • テストケースの作成・メンテナンスするコスト大
    • 例: DOM構造が変わるとテストが失敗する
    • リトライの仕組み等は自力で実装する必要がある
    • 例: ネットワーク状況が悪いとテストが失敗する
    • レイアウト崩れはキャッチできない
    • 実行するインフラを準備する必要がある

    View full-size slide

  25. Datadog
    プレゼンテーションのタイトル 27
    • https://www.datadoghq.com/
    • インフラ&アプリケーション監視サービス

    View full-size slide

  26. Datadog - Syntheticモニタリング
    • APIテストによるエンドポイントのモニタリング
    • Browser Testによるエンドツーエンドテストの記録
    • CI/CDパイプラインからテストをトリガー
    • Datadogプラットフォームとのシームレスな統合

    View full-size slide

  27. Datadog - Syntheticモニタリング
    • APIテストによるエンドポイントのモニタリング
    • Browser Testによるエンドツーエンドテストの記録
    • CI/CDパイプラインからテストをトリガー
    • Datadogプラットフォームとのシームレスな統合

    View full-size slide

  28. Datadog
    Syntheticモニタリング
    - Browser Test

    View full-size slide

  29. Browser Testによるエンドツーエンドテストの記録
    • テストレコーダーによりノーコードで
    エンドツーエンドテストを作成可能
    • 主要なワークフローを監視し、問
    題をタイムリーに解決可能
    • エンドユーザー視点でのスクリーン
    ショット
    • ウォーターフォールの可視化
    • アプリケーションパフォーマンスモニタリ
    ング(APM)バックエンドトレースと
    の統合

    View full-size slide

  30. Browser Testによるエンドツーエンドテストの記録
    • サブテストを作成することで、複数
    のテストに共通のステップを簡単に
    含めることができ、大量のテストシ
    ナリオを効率的に管理することが
    可能

    View full-size slide

  31. Browser Testによるエンドツーエンドテストの記録
    • 影響を与えないUI変更を検出し、
    自動的に更新可能
    • 待機と再試行のメカニズムを組み
    込むことで、メンテナンスコストを軽

    View full-size slide

  32. Browser Test - デモ

    View full-size slide

  33. Browser Test詳細設定
    • 開始URL
    • テスト名
    • タグ
    • ブラウザ&デバイス

    View full-size slide

  34. ロケーション、テスト頻度、アラート設定
    • ロケーション
    • テスト頻度
    • 秒, 分, 時, 日
    • アラート設定
    • リトライ回数
    • アラート表示条件

    View full-size slide

  35. モニター設定
    • モニター名
    • 通知
    • To
    • メッセージ
    • 再通知
    • 優先順位

    View full-size slide

  36. WebDriver感想(再)
    39
    • 品質管理としては以下の管理がしやすい
    • テストケース変更管理(誰が・いつ・どこを)
    • テストケースのバージョン管理&必要に応じてロールバック
    • エクスポート/インポート可能
    • テストケースの作成・メンテナンスするコスト大
    • 例: DOM構造が変わるとテストが失敗する
    • リトライの仕組み等は自力で実装する必要がある
    • 例: ネットワーク状況が悪いとテストが失敗する
    • レイアウト崩れはキャッチできない
    • 実行するインフラを準備する必要がある

    View full-size slide

  37. • 品質管理としては以下の管理が難しい
    • テストケース変更管理(誰が・いつ・どこを)
    • テストケースのバージョン管理&必要に応じてロールバック
    • エクスポート/インポートできない
    • テストケースの作成・メンテナンスするコストは場合による
    • 実行のスケジュール、リトライ、記録は自動
    • モニタリング機能としては優秀、Dashboardが見やすい
    • Selenium IDE/Gridと機能面は類似、
    より使いやすい印象
    40
    Browser Test感想(再)

    View full-size slide

  38. 技術選定する上で考えたほうが良いこと
    41
    • 解決したい課題は何か
    • 技術の将来性・メンテナンス状況
    • スモールスタートできるか(≒導入コスト)
    • 継続できるか(≒メンテナンスコスト)
    • 広げていけるか(≒既存リソースとの親和性)
    • 会社としての規定
    コストが意味するものはお金だけではない、それに必要なインフラ、学習、人材、
    セキュリティ、などなど踏まえて総合的に判断する必要がある

    View full-size slide