$30 off During Our Annual Pro Sale. View Details »

2022技育祭_映写資料①

techtekt
November 18, 2022

 2022技育祭_映写資料①

techtekt

November 18, 2022
Tweet

More Decks by techtekt

Other Decks in Technology

Transcript

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

  2. はじめに 2

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

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

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

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

  7. UIテスト種別 • ユニットテスト • Jest • スナップショットテスト • DOMテスト •

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

    エンドツーエンドテスト • Selenium • Datadog Browser Test 8 こちらに関して 自動化にチャレンジ
  9. Selenium

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

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

    (Apache 2.0 license) • ツール • WebDriver • IDE • Grid
  12. Selenium - WebDriver

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

    • コンパクトなオブジェクト指向のAPI
  14. 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
  15. WebDriver 15 • ライブラリ • Java • Python • C#

    • Ruby • JavaScript • Kotlin
  16. WebDriver - デモ環境 16 • Jupyter Notebook (or Jupyter Lab)

    $ brew install python3 $ pip3 install jupyter $ jupyter notebook • Selenium $ pip3 install selenium • WebDriver $ pip3 install chromedriver-binary==<version>
  17. WebDriver - デモ 17

  18. 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
  19. 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()
  20. 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('mihoko.aoki@x-factory.jp’)

    # パスワードの入力 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()
  21. 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")
  22. WebDriver - ブラウザの終了 # ブラウザを閉じる driver.close() # ブラウザの終了 driver.quit()

  23. 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
  24. 補足: CI/CDとは • 継続的インテグレーション(Continuous Integration) • 開発者が行ったコード変更がリポジトリにマージされたタイミングで、その内容をビルドしテスト する一連のプロセスを繰り返し行う開発手法 • 継続的デリバリー(Continuous

    Delivery) • 開発者が行ったコード変更がリポジトリにマージされたタイミングで、その内容をリリースするプ ロセスを繰り返し行う開発手法 CI/CDを開発プロセスに組み込むメリット • リリースサイクルの向上 • バグの早期発見
  25. WebDriver感想 25 • 品質管理としては以下の管理がしやすい • テストケース変更管理(誰が・いつ・どこを) • テストケースのバージョン管理&必要に応じてロールバック • エクスポート/インポート可能

    • テストケースの作成・メンテナンスするコスト大 • 例: DOM構造が変わるとテストが失敗する • リトライの仕組み等は自力で実装する必要がある • 例: ネットワーク状況が悪いとテストが失敗する • レイアウト崩れはキャッチできない • 実行するインフラを準備する必要がある
  26. Datadog

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

  28. Datadog - Syntheticモニタリング • APIテストによるエンドポイントのモニタリング • Browser Testによるエンドツーエンドテストの記録 • CI/CDパイプラインからテストをトリガー

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

    • Datadogプラットフォームとのシームレスな統合
  30. Datadog Syntheticモニタリング - Browser Test

  31. Browser Testによるエンドツーエンドテストの記録 • テストレコーダーによりノーコードで エンドツーエンドテストを作成可能 • 主要なワークフローを監視し、問 題をタイムリーに解決可能 • エンドユーザー視点でのスクリーン

    ショット • ウォーターフォールの可視化 • アプリケーションパフォーマンスモニタリ ング(APM)バックエンドトレースと の統合
  32. Browser Testによるエンドツーエンドテストの記録 • サブテストを作成することで、複数 のテストに共通のステップを簡単に 含めることができ、大量のテストシ ナリオを効率的に管理することが 可能

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

  34. Browser Test - デモ

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

  36. ロケーション、テスト頻度、アラート設定 • ロケーション • テスト頻度 • 秒, 分, 時, 日

    • アラート設定 • リトライ回数 • アラート表示条件
  37. モニター設定 • モニター名 • 通知 • To • メッセージ •

    再通知 • 優先順位
  38. まとめ 38

  39. WebDriver感想(再) 39 • 品質管理としては以下の管理がしやすい • テストケース変更管理(誰が・いつ・どこを) • テストケースのバージョン管理&必要に応じてロールバック • エクスポート/インポート可能

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

    • 実行のスケジュール、リトライ、記録は自動 • モニタリング機能としては優秀、Dashboardが見やすい • Selenium IDE/Gridと機能面は類似、 より使いやすい印象 40 Browser Test感想(再)
  41. 技術選定する上で考えたほうが良いこと 41 • 解決したい課題は何か • 技術の将来性・メンテナンス状況 • スモールスタートできるか(≒導入コスト) • 継続できるか(≒メンテナンスコスト)

    • 広げていけるか(≒既存リソースとの親和性) • 会社としての規定 コストが意味するものはお金だけではない、それに必要なインフラ、学習、人材、 セキュリティ、などなど踏まえて総合的に判断する必要がある
  42. Q&A 42