1. tsuruken

    Posted

    tsuruken
Changes in title
+Seleniumで業務のテストを自動化しようと試みた話
Changes in tags
Changes in body
Source | HTML | Preview
@@ -0,0 +1,156 @@
+この記事はチームラボエンジニアリングアドベントカレンダー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設置
+
+[ここから](https://sites.google.com/a/chromium.org/chromedriver/downloads)ダウンロードし、パスの通ったディレクトリに移動します。
+**※ChromeのWebDriverのバージョンは、インストールされているChromeのバージョンと合わせてください。**
+
+```
+// パスの通ったディレクトリに移動する
+mv /usr/local/bin/ ~/Downloads/chromedriver
+```
+
+### selenium-server-standaloneのダウンロード
+[ここから](http://selenium-release.storage.googleapis.com/index.html)ダウンロードして、作業ディレクトリに移動してください。
+これで環境構築は以上です!
+
+# metaタグのテストの例
+2019年11月26日時点で[弊社サイト](https://www.team-lab.com/)の**meta:titleとmeta:description**が下記のようになっているのでそれを仕様とします。
+Seleniumで立ち上げたブラウザで下記のようなmetaタグになっているかをテストします。
+
+
+| meta:title | meta:title |
+| :----------: | :----------: |
+| チームラボ / teamLab | 最新のテクノロジーを活用したシステムやデジタルコンテンツの開発を行うチームラボは、アーティスト、プログラマ、エンジニア、CGアニメーター、数学者、建築家など、デジタル社会の様々な分野のスペシャリストから構成されているウルトラテクノロジスト集団。 |
+
+# 自動化テストのコード
+下記のコード`meta_test.php`を作業ディレクトリ配下に移動します。
+
+
+``` 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'];
+ var_dump('meta:title: ' . ($match_meta_title ? 'OK' : 'NG'));
+ 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'];
+ var_dump ('meta:decription: ' .($match_meta_description ? 'OK' : 'NG'));
+ }
+ catch (Exception $e) {
+ echo "meta:descriptionを取得できませんでした";
+ $driver->close();
+ }
+ $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タグが仕様とあっているかをテストすることができました。
+
+```
+string(14) "meta:title: OK"
+string(19) "meta:decription: OK"
+```
+
+# まとめ
+
+今回はSeleniumを使用してmetaタグのテストを行いましたが、他にもスクショを撮ったり、フォームの入力をしたりなどいろいろなテストが行えます。
+簡単なUIテストであればSeleniumを使用してどんどん自動化したいですね!