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

はじめに 2

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

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

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

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

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

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

Selenium

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

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

Selenium - WebDriver

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

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

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

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

WebDriver - デモ 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

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()

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()

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")

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

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

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

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

Datadog

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

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

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

Datadog Syntheticモニタリング - Browser Test

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

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

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

Browser Test - デモ

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

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

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

まとめ 38

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

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

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

Q&A 42