【WEB UI操作自動化】Seleniumを使ってみよう【Java×Chrome】

気温36度って体温か！
と見えない何かに突っ込みを入れていたのも束の間。
もうすっかり寒くなりましたね。

今回は、Seleniumを使用して、下記を実施しようと思います。
　① 当社WEBサイトのTOPページに遷移
　② TOPページから問い合わせページに遷移
　③ 問い合わせページに内容を入力し、エラーで引っかかるようにする

1. まずSeleniumって何？

SeleniumとはWEB UI操作の自動化フレームワークです。
要するに何が出来るかというと、コードを書いて実行すると、WEBサイトの操作（リンク押下・フォームへの入力等）が自動で実行でき、今までテストのために手でやっていた操作を自動で出来るという優れものです。

2. Seleniumの種類と今回の実施する環境

Seleniumには種類が二つあります。
　① Selenium WebDriver
　② Selenium IDE
①はプログラムを書いて実施するもの。
②はブラウザの拡張機能をインストールして、GUIで操作・実施するものです。
今回は① Selenium WebDriver を使用しようと思います。
また、Selenium WebDriverはさまざまな言語（Java/C#/Ruby等）で実装できるのですが、今回はJavaを選択します。
さらに、ブラウザについてもさまざまなブラウザを使用することが出来るのですが、今回はChromeで実施します。

3. ダウンロード

まず、各公式サイトから下記の二つをダウンロードします。
　① Selenium WebDriver
　② Chrome Driver

① Selenium WebDriver のダウンロード

Selenium WebDriverのダウンロードページ(https://www.seleniumhq.org/download/)を開きます。
画面をスクロールしていくと、「Selenium Client & WebDriver Language Bindings」というタイトルが出てくるので、JavaのWebDriverをダウンロードします。

② Chrome Driver のダウンロード

Chrome Driverのダウンロードページ(https://sites.google.com/a/chromium.org/chromedriver/downloads)を開きます。
Chromeのバージョンごとに使用できるDriverがことなるので、使用するChromeのバージョンにあわせたものを選択します。

そして使用しているPCのOSにあわせたDriverをダウンロードします。

ダウンロードしたファイルは解凍しておきます。

4. 設定

eclipseを使用してプロジェクトを作成します。

上記でダウンロードしたファイルを配置するためにディレクトリを作成します。

作成したディレクトリにダウンロードしたファイルを配置します。

seleniumのライブラリにビルドパスを通します。

設定が完了したのでテストとしてこんなjavaファイルを作成して実行してみます。

import org.openqa.selenium.WebDriver;
import org.openqa.selenium.chrome.ChromeDriver;

public class Test
{
    public static void main(String args[])
    {
        // ChromeDriverのパスを設定
        System.setProperty("webdriver.chrome.driver", "chromeDriver/chromedriver.exe");

        // WebDriverのインスタンスを作成
        WebDriver driver = new ChromeDriver();

        // 開きたいサイトのURLを引数に指定
        driver.get("http://www.chivsp.com/");
    }

}

そして実行すると。。ブラウザが起動され、引数に指定したURLが表示されます。
ChromeのURL欄の下には、自動テストソフトから起動した旨が記載されています。

5. テストの準備

今回Seleniumで出来なきゃいけないことは下記となります。
　① 指定URLのサイトをブラウザで開く。
　② サイト内のリンクまたはボタンを押下する。
　③ サイト内の入力フォームに値を入力する。
①にいてはテストで実施したので、②～③の実施方法を見て行きます。

② サイト内のリンクまたはボタンを押下する。

まずはクリックする対象の要素を取得します。
取得する方法としてはJavaScriptのように、HTMLのID属性やName属性、Class属性などからも取得できますし、
リンクの文字列やXPathからも取得できます。
今回は要素を特定するためのID等は振っていない要素を操作するので、Xpathを使用して実装していきます。

クリックしたい要素はこちらの「お問い合わせ」リンクとなります。

ChromeのディベロッパーツールでXpathを取得します。

要素を取得して、clickするメソッドを呼ぶ記述は下記となります。

driver.findElement(By.xpath("//*[@id='navigation']/ul/li[5]/a")).click();

③ サイト内の入力フォームに値を入力する。

サイトのフォームに値を入力する方法も、上記のクリックする方法と変わりません。
Xpathを取得し、下記のように記述します。

driver.findElement(By.xpath("/html/body/div[1]/div[1]/form/div[1]/div/input")).sendKeys("会社テスト");

5 .いざ実行

上記の基本的な内容を使用し、用意したコードがこちらとなります。

import org.openqa.selenium.By;
import org.openqa.selenium.WebDriver;
import org.openqa.selenium.chrome.ChromeDriver;

public class Test
{
    public static void main(String args[])
    {
        // ChromeDriverのパスを設定
        System.setProperty("webdriver.chrome.driver", "chromeDriver/chromedriver.exe");

        // WebDriverのインスタンスを作成
        WebDriver driver = new ChromeDriver();

        // 開きたいサイトのURLを引数に指定
        driver.get("http://www.chivsp.com/");

        // お問い合わせリンクをクリック
        driver.findElement(By.xpath("//*[@id='navigation']/ul/li[5]/a")).click();

        // お問い合わせボタンをクリック
        driver.findElement(By.xpath("/html/body/div[1]/div/div[3]/p[2]/a")).click();

        // 入力
        driver.findElement(By.xpath("/html/body/div[1]/div[1]/form/div[1]/div/input")).sendKeys("会社テスト");

        // チェックボックスにチェックを入れる
        driver.findElement(By.xpath("//*[@id=\"check\"]")).click();

        // ボタンを押下する。
        driver.findElement(By.xpath("//*[@id=\"submit\"]")).click();
    }
}

そして実行した結果がこちら。

6 . Seleniumって便利！

以上、さわりではありますが、Seleniumを使用してサイトを動かすことが出来ました。
これにJUnitを組み合わせたりすると、テストも出来ますし、画面キャプチャを取得する機能も、Seleniumにはあります。
もちろん、Javaで実行しているのでテストデータの挿入等もできるので、テストする上で実施しなければいけなかったことはほとんどコードで完結することが出来ます。
WEBシステムの同じ機能をずっとメンテナンスする場合等は一度書いておくと楽ですね。

以上、Seleniumを使ってみようでした。

株式会社シベスピ　従業員ブログ

シベスピの社員ブログ。技術・想い・経験沢山書いていきます！