ブロックチェーン・AI・システム開発の株式会社INDETAIL

Laravel Dusk でレガシーサイトのブラウザテストをやってみる

2017.12.15
tacck


INDETAIL Advent Calendar 2017 の 15日目の記事です。

ここ二年ほど社内で自分の関わるプロジェクトでは、PHPのフレームワークであるLaravelを積極的に推進しているtacckです。
そのLaravelですが、5.4からブラウザテストとしてLaravel Duskというものが追加されました。

もともとPHPUnitをベースにViewのテストもできていましたが、Laravel Duskの導入によってヘッドレスブラウザを使ったViewのテストが可能となりました。

これによって、

MVC テストコード配置ディレクトリ
Model tests/Unit/
Controller tests/Feature/
View tests/Browser/

と、テストの種類・配置も整理されるようになったかな、と感じています。

さて、このLaravel Duskですが、ヘッドレスブラウザを使ったテストなので、自分がLaravelで開発しているサイト 以外 もテスト可能です。
つまり、画面遷移のチェックを目視でやっているような(いわゆるレガシーな)既存サイトに対して、後付けながらテストを行なうことが可能となります。

今回は、既存サイトへのテスト作成の導入として、Jenkinsのログイン画面のテストを行なってみたいと思います。

環境

ホスト

こちらで、テストコードを実装します。

環境 バージョン
macOS 10.13.1
Vagrant 2.0.1
VirtualBox 5.2.2
Docker 17.09.0-ce-mac35
Kitematic 0.17.2

実行サーバ

上記のホスト内に、Vagrant/VirtualBoxでサーバを構築します。
構築は、こちらのVagrantfileを使います。

環境 バージョン
CentOS 7.1
PHP 7.1.12
Google Chrome 63.0.3239.84-1
Laravel 5.5

Jenkinsサーバ

上記のホスト内に、Dockerを使ってJenkinsのコンテナを起動します。

環境 バージョン
Jenkins 2.60.3

テストする

Jenkinsサーバ起動

テスト対象となるJenkinsサーバを起動しておきます。
起動には、Kitematicを使うと楽なのでこちらを使っています。

20171215001

起動すると利用するポート番号が確定するので、そちらを確認しておきます。
(今回は"32769")

20171215002

また、初回起動時の諸々は各自済ませ、ユーザーがログイン可能な状態にしておきます。
(詳細は、専門の記事にお任せいたします。)

ログインするユーザーは、下記としておきます。

項目 設定値
ユーザー名 admin
パスワード adminpass

実行サーバ起動

実行サーバを起動します。
こちらは、Vagrantを使うことで特に難なく進められます。

注意点として、私はVagrantのpluginであるvagrant-vbguestを利用しており、初回のvagrant upではディレクトリマウントがうまくいきませんでした。
そのため、続けてvagrant reloadを実行しています。
以降は、vagrant upのみでうまくディレクトリマウントできるようになります。

テストコード実装

続けて、Laravel Duskを有効にします。

基本これだけでテストを始められるのですが、ブラウザが「日本語モード」で起動してくれないと日本語での表示テストができません。
(今回のJenkinsのように、国際化対応されているサイトの場合。)

そこで、テスト中はブラウザが日本語モードで起動されるように修正します。

追加したのは35行目です。(34行目の後ろにカンマも入れています。)

さて、準備も整ったので、ログインテストを実装してみます。
これもartisanでファイルを作ります。

作ったファイルを、下記のように実装します。

見ればおおよそ想像がつくと思いますが、流れとしては、

  • /loginへ遷移し
  • セレクタに応じてvalueで値を格納し
  • スクリーンショットを撮影し
  • 「ログイン」という文字のあるボタンを押し
  • /へ遷移したか検証し
  • 最後にスクリーンショットを撮影する

となっています。

テスト実行

実行前に、少し準備をします。

まずは、テスト対象のURLの設定です。
今回はVagrant内から見て、ホストのマシンで動いているので、下記のように.envファイル内のAPP_URLを修正します。
ポート番号は、先にKitematicの画面で確認しておいたものにします。

また、サンプルで生成された不要なテストファイルを削除しておきます。

では、実行してみます。
これもお約束のartisanです。

実行結果は、成功となりました!
スナップショットも撮っているので、そちらも確認しましょう。

login.png

login_success.png

ちゃんとログインして、画面遷移していることも確認できました!

まとめ

いかがでしょうか。ブラウザテストは導入のコストが高く思われがちで、なかなか現場に定着しづらいと思います。
もし普段の開発にLaravelを利用しているのであれば、その延長でブラウザテストまでできるようになるので、だいぶ導入しやすくなるのではないでしょうか。

最低限、ページ遷移やリンク切れの有無を定期的にテストしておくだけでもミスを早めに検知することができるようになります。
これ以外の方法でも良いので、テストは簡単なことから積極的に取り入れていきましょう!

tacck Takuya KIHARA

エンジニア (モバイルアプリ、フロントエンド、バックエンド、インフラ) 得意なことは、領域をまたいで考え、開発すること。 ブログでは、主にAnsible、Docker、Raspberry Piのことを書いています。 好きなフィギュアスケートの技は、スプレッド・イーグルです。

「いいね」ボタンを押すと、最新情報をすぐに確認できます。