読者です 読者をやめる 読者になる 読者になる

Knowlbo 開発者ブログ

株式会社Knowlboの開発者ブログです。

Selenium WebDriver で Web アプリのテストを自動化中

開発部の本橋です。

ブラウザ自動化ツールの Selenium WebDriver を使って Web アプリケーションのテスト自動化を試しています。

今回は弊社 Web サイトを例として、Python3 を使って Google Chrome を操作してみます。

の前に Selenium WebDriver とは

Selenium

一言で言えば Web ブラウザ自動化ツールです。以前提供されていた Selenium RC のアーキテクチャはすでに非推奨となり、現在は Selenium WebDriver の開発が活発に行われています。

Selenium WebDriver は W3C で WebDriver として標準化されています。

W3C WebDriver

Selenium WebDriver の Python バインディング

Selenium WebDriver は様々なプログラミング言語で利用できますが、今回は Python3 を使いました。ドキュメントはこちらを参考に。

https://seleniumhq.github.io/selenium/docs/api/py/api.html

環境構築

必要なものをインストールします。Mac で Homebrew を使うことを想定しています。

  • Python3 をインストール
    • Homebrew なら brew install python3
  • Google Chrome をインストール
    • Homebrew なら brew cask install google-chrome
  • ChromeDriver をインストール
    • Homebrew なら brew install chromedriver
  • selenium の Python バインディングをインストール
    • pip なら sudo pip3 install selenium

Selenium WebDriver 基本

アサーションはひとまず置いといて、Selenium WebDriver を使ってみます。

www.google.co.jp で「株式会社Knowlbo」を検索し、トップページから会社案内ページへ遷移してみます。

# selenium_test.py

from selenium import webdriver
from selenium.webdriver.common.by import By
from selenium.webdriver.common.keys import Keys
from selenium.webdriver.support.ui import WebDriverWait
from selenium.webdriver.support import expected_conditions as EC

driver = webdriver.Chrome()

# Google で Knowlbo を検索
driver.get('https://www.google.co.jp')
elem = driver.find_element(By.NAME, 'q')
elem.send_keys('株式会社Knowlbo')
elem.send_keys(Keys.RETURN)

# www.knowlbo.co.jp へのリンクが表示されるまで待ち、遷移
WebDriverWait(driver, 10) \
    .until(EC.presence_of_element_located((By.PARTIAL_LINK_TEXT, '株式会社ナルボ'))) \
    .click()

# www.knowlbo.co.jp のページが表示されるまで待ち、会社案内ページに遷移
WebDriverWait(driver, 10) \
    .until(EC.title_contains('株式会社ナルボ'))
driver.find_element(By.LINK_TEXT, '会社案内') \
    .click()
$ python3 selenium_test.py

unittest モジュールと組み合わせる

次は unittest モジュールを使ってアサーションしてみます。(www.google.co.jp からの遷移は省略します。)

# selenium_test3.py

import unittest
from selenium import webdriver
from selenium.webdriver.common.by import By
from selenium.webdriver.common.keys import Keys
from selenium.webdriver.support.ui import WebDriverWait
from selenium.webdriver.support import expected_conditions as EC

class WedDriverTest(unittest.TestCase):
    def _to_knowlbo(self):
        # トップページへ遷移
        driver.get('https://www.knowlbo.co.jp')
        WebDriverWait(driver, 10) \
            .until(EC.title_contains('株式会社ナルボ'))

    def setUp(self):
        self._to_knowlbo()

    def test_company_page_link(self):
        # トップページに会社案内のリンクが表示されることのアサーション
        elem = driver.find_element(By.LINK_TEXT, '会社案内')
        self.assertIsNotNone(elem, 'トップページに会社案内のリンクが表示されること')

    def test_company_page_content(self):
        # 会社案内ページへ遷移
        driver.find_element(By.LINK_TEXT, '会社案内') \
            .click()
        WebDriverWait(driver, 10) \
            .until(EC.title_contains('会社案内'))

        # 会社案内ページの内容のアサーション
        elem = driver.find_element(By.CSS_SELECTOR, '.page-title')
        self.assertEqual(elem.text, '会社案内', '会社案内ページが表示されること')

    def tearDown(self):
        pass

if __name__ == '__main__':
    driver = webdriver.Chrome()
    unittest.main()
$ python3 selenium_test2.py
..
----------------------------------------------------------------------
Ran 2 tests in 11.026s

OK

gif

Chrome を自動操作している gif 動画を取ってみました。イメージ伝わりますかね。

f:id:knowlbodev:20170421162117g:plain

WebDriver は動作に Web ブラウザが必要なのでCIと組み合わせるのは厳しい気がしますが、この調子でどんどん自動化していけたらいいなと思います。