この記事はチームラボエンジニアリングアドベントカレンダー4日目の記事です！
はじめに
初めまして、チームラボエンジニアリングの鶴本です。
入社して4ヶ月ほど経ち、少しずついろんなことができるようになってきました。
そんな僕が生意気にも業務のテストの自動化をしようと試みたので記事にしました。
何を自動化する？
僕が在籍しているチームでは、弊社が管理しているサイトの保守やバグ改修を主な業務としているのですが、そのサイトのテスト項目にmetaタグが仕様書通りに設定されているかという項目があります。
そのテストは現状、サイトをブラウザで開いてデベロッパーツールを用いて目視で確認するという、やや非効率的なものであるわけです。
そのテストを自動で行うようにします。
どうやって自動化する？
Seleniumの自動化コードをPHPコマンドで実行し、仕様通りにmetaタグが設定されているかどうかをログで出力し確認します。
また今回は、PHPからSeleniumを使用できるphp-webdriverというライブラリを使用します。
環境構築
php-webdriverを動作させるために環境構築の手順を書きます。
作業ディレクトリ作成と移動
mkdir php-selenium
cd php-selenium
Composerバイナリをダウンロード(インストール済みの場合は結構です)
curl -sS https://getcomposer.org/installer | php
php-seleniumインストール
php composer.phar require facebook/webdriver
(結構時間かかります。。。)
ChromeのWebDriver設置
ここからダウンロードし、パスの通ったディレクトリに移動します。
※ChromeのWebDriverのバージョンは、インストールされているChromeのバージョンと合わせてください。
// パスの通ったディレクトリに移動する
mv ~/Downloads/chromedriver /usr/local/bin/
selenium-server-standaloneのダウンロード
ここからダウンロードして、作業ディレクトリに移動してください。
これで環境構築は以上です！
metaタグのテストの例
2019年11月26日時点で弊社サイトのmeta:titleとmeta:descriptionが下記のようになっているのでそれを仕様とします。
Seleniumで立ち上げたブラウザで下記のようなmetaタグになっているかをテストします。
| meta:title | meta:description |
|---|---|
| チームラボ / teamLab | 最新のテクノロジーを活用したシステムやデジタルコンテンツの開発を行うチームラボは、アーティスト、プログラマ、エンジニア、CGアニメーター、数学者、建築家など、デジタル社会の様々な分野のスペシャリストから構成されているウルトラテクノロジスト集団。 |
自動化テストのコード
下記のコードmeta_test.phpを作業ディレクトリ配下に移動します。
<?php
require_once './vendor/autoload.php';
use Facebook\WebDriver\Remote\RemoteWebDriver;
use Facebook\WebDriver\Remote\DesiredCapabilities;
use Facebook\WebDriver\WebDriverBy;
/**
* meta:titleとmeta:descriptionのテストを行う
*/
function start_meta_test() {
// チェックするmetaタグを定義する
$check_list = array(
'meta_title' => 'チームラボ / teamLab',
'meta_description' => '最新のテクノロジーを活用したシステムやデジタルコンテンツの開発を行うチームラボは、アーティスト、プログラマ、エンジニア、CGアニメーター、数学者、建築家など、デジタル社会の様々な分野のスペシャリストから構成されているウルトラテクノロジスト集団。',
);
// server-standalone.jarを実行しているホストのURL
$host = 'http://localhost:4444/wd/hub';
// chromeドライバーを起動する
$driver = RemoteWebDriver::create($host, DesiredCapabilities::chrome());
// 弊社サイトへアクセスする
$driver->get('https://www.team-lab.com/');
// meta:titleが仕様通りか判定する
$match_meta_title = $driver->getTitle() === $check_list['meta_title'];
echo('meta:title: ' . ($match_meta_title ? 'OK' : 'NG')) . "\n";
try {
// xpathから要素取得のWebDriverByクラスのインスタンスを取得する
$description_driver_by = WebDriverBy::xpath('/html/head/meta[4]');
// meta:descriptionを取得する
$meta_description = $driver->findElement($description_driver_by)->getAttribute('content');
// meta:descriptionが仕様通りか判定する
$match_meta_description = $meta_description === $check_list['meta_description'];
echo ('meta:decription: ' .($match_meta_description ? 'OK' : 'NG')) . "\n";
}
catch (Exception $e) {
echo "meta:descriptionを取得できませんでした\n" . $e->getTraceAsString();
}
finally {
$driver->close();
}
}
// テストを開始する
start_meta_test();
テストを実行する
selenium-server-standaloneを立ち上げる
Seleniumを実行するにはselenium-server-standaloneを立ち上げる必要があります。
下記コマンドで立ち上げてください。
java -jar selenium-server-standalone-4.0.0-alpha-2.jar
※selenium-server-standalone-4.0.0-alpha-2.jarはダウンロードしたバージョンに合わせてください。
下記のようなログが出たら立ち上げ成功です。
java -jar selenium-server-standalone-4.0.0-alpha-
2.jar
22:34:07.185 INFO [GridLauncherV3.parse] - Selenium server version: 4.0.0-alpha-2, revision: f148142cf8
22:34:07.251 INFO [GridLauncherV3.lambda$buildLaunchers$3] - Launching a standalone Selenium Server on po
rt 4444
22:34:07.453 INFO [WebDriverServlet.<init>] - Initialising WebDriverServlet
22:34:07.543 INFO [SeleniumServer.boot] - Selenium Server is up and running on port 4444
テスト実行
いよいよテスト実行です。PHPコマンドで実行しましょう。
php meta_test.php
実行するとテスト結果が表示されました。
コマンド一発でサイトのmetaタグが仕様とあっているかをテストすることができました。
meta:title: OK
meta:decription: OK
まとめ
今回はSeleniumを使用してmetaタグのテストを行いましたが、他にもスクショを撮ったり、フォームの入力をしたりなどいろいろなテストが行えます。
簡単なUIテストであればSeleniumを使用してどんどん自動化したいですね！