Seleniumを使ってリリース時の動作確認を自動化したい

Python, Selenium

はじめに

はじめまして。
システム開発推進部第2Gの山本です。
フロントエンドやバックエンドの開発を主に行っております。
今回は、Webブラウザの動作確認をSeleniumを用いて自動化する方法について、簡単にご紹介したいと思います。
なお、今回の環境はWindowsを使用していますが、MacやLinuxの場合、一部手順が異なる可能性がありますので、あらかじめご了承ください。

課題背景

私が担当しているサービスのAKB48グループ映像倉庫の開発は、数名のチーム体制で進行しており、リリース時には動作確認結果をSlackで共有しています。
リリース内容は多岐にわたりますが、中には軽微かつ定期的な更新作業が発生するものもあります。その中の一つが、WebTOPページのキャンペーンバナーの掲載作業です。
これを手作業で確認する場合、各OS（PC、Android、iOS）ごとにスクリーンショットを撮影し、Slackに報告する必要があります。確認内容は毎回同じで、作業自体は簡単ですが、定期的に発生するため、時間がかかり、少し煩雑に感じることがありました。
そこで、この確認作業を自動化することを試みました。

Seleniumとは

Seleniumは、WEBブラウザの操作を自動化するためのオープンソースのツールです。
ブラウザをプログラムで操作し、Webページのテストや操作を行うことができます。
具体的には、以下のようなことが可能です。

  • Webページのテスト自動化
    ボタンのクリックやフォームへの入力など、ユーザーの操作を自動化。

  • Webデータのスクレイピング
    ページ上のデータの取得や、動的に生成される要素の解析。

  • ブラウザの動作シミュレーション
    各種ブラウザ（Chrome、Firefox、Safariなど）での動作確認。

開発環境の準備

Seleniumを用いた自動化スクリプトを実行するための開発環境を構築していきます。

  1. Pythonのインストール
    まず、Pythonがインストールされているか確認します。
    python --version

    もしPythonがインストールされていない場合、Pythonの公式サイトから最新版をダウンロードし、インストールしてください。

  2. Seleniumのインストール
    PythonでSeleniumを使用するためには、Seleniumライブラリをインストールする必要があります。
    以下のコマンドでインストールできます。
    pip install selenium

  3. ChromeDriverのインストール
    SeleniumでChromeブラウザを操作するには、ChromeDriverが必要です。
    ChromeDriverの公式サイトから、現在使用しているChromeのバージョンに対応したドライバをダウンロードします。
    ダウンロードしたZIPファイルを解凍し、任意のディレクトリに配置します。
    今回はD:/selenium/chromedriver-win64/chromedriver.exeに配置しています。

Seleniumの基本構文について

Seleniumの基本的な操作構文を簡単に紹介します。

  • ブラウザの起動
from selenium import webdriver
 
driver = webdriver.Chrome(executable_path='path_to_chromedriver')
driver.get('https://example.com')

webdriver.Chrome()でChromeブラウザを起動し、get()で指定したURLにアクセスします。

  • 要素の取得と操作
element = driver.find_element(By.ID, 'element_id')
element.click()

find_element()で指定された条件でWebページ上の要素を取得し、click()でその要素をクリックします。

  • ページのスクリーンショット
driver.save_screenshot('screenshot.png')

指定したパスにページ全体のスクリーンショットを保存します。

  • ブラウザの終了
driver.quit()

開いているブラウザをすべて閉じます。

今回作成したスクリプトの詳細

今回作成したスクリプトの全体の流れとスクリプトについて記載いたします。

スクリプト全体の流れ

  1. 各デバイス（PC、Android、iOS）ごとにユーザーエージェントを設定
  2. 各デバイスごとに指定したURLにアクセスし、ページのスクリーンショットを取得
  3. 指定したキャンペーンバナーリンクがページ内に存在するかを確認
  4. キャンペーンバナーリンクが存在すればクリックし、遷移先のステータスコードを確認

作成したスクリプト
from selenium import webdriver
from selenium.webdriver.chrome.service import Service
from selenium.webdriver.chrome.options import Options
from selenium.webdriver.common.by import By
import requests
import os
 
# ChromeDriverのパス設定
chromeDriverPath = 'D:/selenium/chromedriver-win64/chromedriver.exe'
 
# スクリーンショット保存用ディレクトリ
saveDirectory = 'D:/selenium/script/output'
 
# アクセスするURL
url = 'https://akb48group-eizo.jp'
 
# チェックするキャンペーンリンク
campaignLink = '/campaign/20240920'
 
# デバイスごとのユーザーエージェント設定
devices = {
    'pc': {
        'userAgent': 'Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/58.0.3029.110 Safari/537.3',
        'width': 1920,
        'height': 1080
    },
    'android': {
        'userAgent': 'Mozilla/5.0 (Linux; Android 13; Pixel 7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/114.0.5735.130 Mobile Safari/537.36',
        'width': 412,
        'height': 915
    },
    'ios': {
        'userAgent': 'Mozilla/5.0 (iPhone; CPU iPhone OS 14_0 like Mac OS X) AppleWebKit/605.1.15 (KHTML, like Gecko) Version/14.0 Mobile/15E148 Safari/604.1',
        'width': 390,
        'height': 844
    }
}
 
# 各デバイスごとの操作
for device, config in devices.items():
    chromeOptions = Options()
    chromeOptions.add_argument(f"user-agent={config['userAgent']}")
    service = Service(executable_path=chromeDriverPath)
    driver = webdriver.Chrome(service=service, options=chromeOptions)
 
    driver.get(url)
 
    driver.set_window_size(config['width'], config['height'])
 
    try:
        element = driver.find_element(By.XPATH, f"//a[@href='{campaignLink}']")
        print(f"href='{campaignLink}' が見つかりました: {element.get_attribute('href')}")
 
        driver.execute_script("arguments[0].scrollIntoView(true);", element)
 
        savePath = os.path.join(saveDirectory, f'{device}_screenshot.png')
        driver.save_screenshot(savePath)
        print(f'{url} のスクリーンショットを {savePath} に保存しました。')
 
        element.click()
        currentUrl = driver.current_url
        response = requests.get(currentUrl)
 
        if response.status_code == 200:
            print(f"{currentUrl} に正常に遷移しました。")
        else:
            print(f"{currentUrl} ステータスコード: {response.status_code}")
    except Exception as e:
        print(f"href='{campaignLink}' が見つかりませんでした: {e}")
 
driver.quit()

スクリプトの解説

  • ユーザーエージェントの設定
devices = {
    'pc': {
        'userAgent': 'Mozilla/5.0 ..',
        'width': 1920,
        'height': 1080
    },
    'android': {
        'userAgent': 'Mozilla/5.0 ..',
        'width': 412,
        'height': 915
    },
    'ios': {
        'userAgent': 'Mozilla/5.0 ..',
        'width': 390,
        'height': 844
    }
}
chromeOptions = Options()
chromeOptions.add_argument(f"user-agent={config['userAgent']}")
service = Service(executable_path=chromeDriverPath)
driver = webdriver.Chrome(service=service, options=chromeOptions)

各デバイス動作をまとめて確認することを目的としてますので、デバイスごとに異なるユーザーエージェントを設定し、異なるデバイスでのアクセスをシミュレーションしています。
webdriver.Chrome()を呼び出すことで、ブラウザのインスタンスを生成し、設定されたユーザーエージェントでのブラウザ操作が可能になります。

  • デバイスごとのブラウザのウィンドウサイズを設定
driver.set_window_size(config['width'], config['height'])

set_window_size()を使ってブラウザのウィンドウサイズ（幅と高さ）をピクセル単位で設定ができます。

  • 要素の検索と操作
element = driver.find_element(By.XPATH, f"//a[@href='{campaignLink}']")

find_element()メソッドを使って、指定されたリンクをページ内から検索します。
指定したリンクが見つかれば、その要素を操作できます。

  • スクロールとスクリーンショットの取得
driver.execute_script("arguments[0].scrollIntoView(true);", element)
savePath = os.path.join(saveDirectory, f'{device}_screenshot.png')
driver.save_screenshot(savePath)

スクリーンショットを取得する前に、対象の要素が画面内に表示されている必要があります。
scrollIntoView()を使って対象要素までスクロールし、要素が見えるようになってからスクリーンショットを撮ります。

  • リンクのクリックとステータスコードの確認
element.click()
currentUrl = driver.current_url
response = requests.get(currentUrl)
if response.status_code == 200:
    print(f"{currentUrl} に正常に遷移しました。")
else:
    print(f"{currentUrl} ステータスコード: {response.status_code}")

click()メソッドで要素をクリックし、遷移先のページのURLを取得しています。
そのURLに対してリクエストを送信し、ステータスコードを確認しています。

動画キャプチャを取りたい場合

今回は確認したいページのスクリーンショットを取っておりますが、
動画キャプチャを取りたいという場合は、ffmpegを使えば実現可能です。
ffmpegのインストールが別途必要となります。
import subprocess
import signal
 
ffmpegCommand = [
    'ffmpeg',
    '-f', 'gdigrab',
    '-framerate', '30',
    '-i', 'desktop',
    '-pix_fmt', 'yuv420p',
    video.mp4
]
ffmpegProcess = subprocess.Popen(ffmpegCommand)
ffmpegProcess.send_signal(signal.CTRL_C_EVENT)
ffmpegProcess.wait()

出力結果
> python test.py
DevTools listening on ws://127.0.0.1:54850/devtools/browser/58b0e9df-00fa-4509-8b6e-8152821b7979
href='/campaign/20240920' が見つかりました: https://akb48group-eizo.jp/campaign/20240920
https://akb48group-eizo.jp/home のスクリーンショットを D:/selenium/script/output/pc_screenshot.png  に保存しました。
https://akb48group-eizo.jp/campaign/20240920 に正常に遷移しました。
 
DevTools listening on ws://127.0.0.1:54878/devtools/browser/8fd7bbfd-58a4-473f-aaaf-40048b11fcf6
href='/campaign/20240920' が見つかりました: https://akb48group-eizo.jp/campaign/20240920
https://akb48group-eizo.jp/home のスクリーンショットを D:/selenium/script/output/android_screenshot.png に保存しました。
https://akb48group-eizo.jp/campaign/20240920 に正常に遷移しました。
 
DevTools listening on ws://127.0.0.1:54912/devtools/browser/8a5c8828-dfe2-418a-ba43-f386ad308b8e
href='/campaign/20240920' が見つかりました: https://akb48group-eizo.jp/campaign/20240920
https://akb48group-eizo.jp/home のスクリーンショットを D:/selenium/script/output/ios_screenshot.png に保存しました。
https://akb48group-eizo.jp/campaign/20240920 に正常に遷移しました。

PC Android iOS
pc_screenshot.png android_screenshot.png ios_screenshot.png

このように、各デバイスごとに動作確認ができ、スクリーンショットが出力されることが確認できました。
TOPページのキャンペーンバナーの有無とリンクの遷移のみを確認していますが、ページごとに検証項目を追加すれば、デグレードの有無も自動的にチェックできるようになるのではと思います。

おわりに

Seleniumを用いることで、定期的なWebページの確認作業を自動化でき、作業効率が向上できました。
スマートフォンでの確認は実機を使ったほうが良いとは思いますが、素早く動作確認を行う場合はSeleniumが便利だと思います。
今回はSlackとの連携によるスクリーンショットの自動送信までは実装しませんでしたが、こちらの実装ができれば、動作確認結果の共有も自動化でき、さらに効率化が期待できると思います。
今回の記事では、Seleniumを用いてWebブラウザの動作確認を自動化する方法を紹介しましたが、少しでも参考になれば幸いです。
最後まで読んでいただき、ありがとうございました。

Python, Selenium