Jenkinsで上でSeleniumテストを実行する(PHPUnit and Selenium WebDriver)

Published: 2016年12月11日 by tomsato

概要

JenkinsでSeleniumのテストを自動実行できるようする

Jenkinsで行うということで画面が無いことからJenkinsサーバに仮想ディスプレイ(Xvfb)を入れてテストを行うことになる

JenkinsやSelenium単体についてどういったものかはそれぞれ以下にまとめてあるので参考にしてほしい

Selenium入門の入門

PHPUnitとSelenium WebDriverを使ってヘッドレスにブラウザテストを行う

Jenkins入門の入門

Jenkinsサーバセットアップ

セットアップ環境

$ cat /etc/redhat-release
CentOS release 6.8 (Final)

jenkinsインストール

// Jenkins を動かすためには、Java 6 以上があらかじめインストールされている必要がある
$ sudo yum install -y wget java
 
// yum リポジトリの追加
//   CentOS / RedHat のパッケージ管理機能 yum を利用して Jenkins をインストールする
//   公式に yum リポジトリを提供してくれていますので、そのリポジトリを利用します
$ sudo wget -O /etc/yum.repos.d/jenkins.repo http://pkg.jenkins-ci.org/redhat/jenkins.repo
$ sudo rpm --import http://pkg.jenkins-ci.org/redhat/jenkins-ci.org.key
 
// リポジトリの追加ができたら、yumでインストール
$ sudo yum install -y jenkins
 
// Jnekinsの起動
$ sudo service jenkins start
Starting Jenkins  

以下のURLにアクセスするとJenkinの画面が見れる
http://(Jenkinsを導入したホスト名):8080/

パスワードを聞かれた場合

ユーザ:admin
パスワード:以下のコマンドで確認
$ sudo cat /var/lib/jenkins/secrets/initialAdminPassword

Seleniumを使うための準備

まずはXvfbをインストール

FirefoxをGUI環境がないサーバーでも起動させるための仮想フレームバッファであるXvfbをインストール
$ sudo yum -y install xorg-x11-server-Xvfb

そのあとにJenkins画面とっぷから
「Jenkinsの管理」→「プラグイン管理」で「Xvfb plugin」をインストールする

Xvfb pluginの設定をするために「Jenkinsの管理」→「Global Tool Configuration」

  • 「Name」→ DefaultXvfb(なんでもいい)
  • 他は空欄

xvfb

次に今回はFirefoxのブラウザを使ってテストを行うのでFirefoxをインストールする

$ sudo yum -y install firefox

phpを入れる

$ sudo yum install -y epel-release
$ sudo rpm -Uvh http://rpms.famillecollet.com/enterprise/remi-release-6.rpm
$ sudo yum install -y --enablerepo=remi,remi-php56 php php-devel php-mbstring php-pdo php-gd php-xml
$ sudo yum install -y ipa-pgothic-fonts.noarch

composerを使ってPHPUnitなどを入れるのでcomposerも入れる

$ sudo bash -c "curl -sS https://getcomposer.org/installer | php"
$ sudo mv composer.phar /usr/local/bin/composer

Jenkinsのジョブを作成する

「新規ジョブ作成」から

以下の項目を入れるようにする

  • Gitのソースコード → https://github.com/tomsato/selenium-test
    • PHPUnitで書いたSeleniumテストのサンプルプログラムを書いている
  • 「ビルド環境」で「Start Xvfb before the build, and shut it down after.」にチェックを入れる
  • 「Delete workspace before build starts」にチェックを入れる
  • 「ビルド環境」でシェルの実行を選択して以下のシェルを羅列していく <pre class="brush: bash; title: ; notranslate" title="">/usr/local/bin/composer install /usr/local/bin/composer selenium-setup /usr/local/bin/composer selenium-redy & sleep 3 /usr/local/bin/composer selenium-start

</pre>

  • 「ビルド後の処理」で「成果物を保存を選択」保存するファイルを「*png」をする
    • Seleniumテスト内で画面キャプチャをした時にJenkins上で確認できるようになる

ここまで設定してジョブを実行するとJenkins上でSeleniumが実行できる!!

補足:画面キャプチャを確認する

Seleniumのテストコードの中で画面キャプチャを取ることができる

日本語が文字化けしないように日本語フォントをインストールする

$ sudo yum groupinstall "Japanese Support"

ジョブの実行後成果物としてキャプチャが見れることを確認する

jenkins01

コメントを書く

※ Emailは公開されません

※ コメントは承認されると下記に表示されます

コメント一覧

最近の投稿

社内ツールなどの超小規模なAPIをGolangで実装する際にフレームワークを使うべきかを、実際にnet/httpを使った実装とフレームワークを使った実装を比較することでどれだけ優位性があるかを見ていきたいと思います。今回はフレームワークにはシンプルで使いやすそうなEchoを使うことにします。

vue-pdfを使ってNuxt.jsで作成しているアプリケーションに pdfスライドを表示させるサンプルを作成しました README.md通りに実装してもうまくいかないところがあったのでそのあたり含めてまとめます

Vue.js / Nuxt.jsにおけるログインの実装方法をまとめる Auth0やNuxt.jsのAuth Moduleとmiddlewareについて調べつつサンプルを作成することで理解を深める

コンポーネント設計について考える Atomic DesignやPresentational Component, Container Componentについてまとめつつ 自分だったらVue.js / Nuxt.jsでどういうコンポーネント設計にするかについてまとめます

Netlify Formsを使ってブログサイトにコメント機能を追加する方法を調べたので紹介 Netlify FormsはNetlifyに標準機能として用意されているフォーム機能 サーバレスなので別途コメント用にサーバを用意する必要がなくHTMLを埋め込むだけで準備できる

カテゴリ一覧

タグ一覧