Selenium × PHP でテスト自動化!【環境構築編】


はじめに

みなさんこんにちは、プロダクト開発本部の亀梨です。
普段はXmediaOneというメディアプランニング・広告運用管理・トラッキング・マーケティング分析を行う
統合プラットフォームの開発を担当しています。

テスト自動化の背景

わたくしが担当するXmediaOneでは品質担保のために①コードベース(ScalaTest)の単体テスト②人力での端末操作の単体テスト・シナリオテストを行っていますが、高い品質を維持しようとすると②の工数・負荷が高くなり日々の業務を圧迫しています。
そこで、Seleniumを使ってテスト自動化することで工数削減→さらなる品質強化のためにテストカバレッジ向上をしていこうということになりました。

今回はSelenium導入にあたっての環境構築の手順を紹介したいと思います。
PCはMacでPHPプリインストール済みであることを前提としています。

環境構築の手順

それではさっそく始めていきましょー。

0. テストを実行するディレクトリを作成する

適当なディレクトリを作ります。

1. selenium-serverのインストール

Homebrew経由でインストール

2. 各ブラウザ用ドライバのインストール

SeleniumServer標準ではSafariに対応済み それ以外(ChromeとかFirefox)にはドライバが必要

Selenium Google Chrome Driver

ChromeDriver – WebDriver for Chrome
downloads zip file

Selenium Firefox Driver

ここから最新版をダウンロードする。
本記事執筆時点だとv0.20.1の「 geckodriver-v0.20.1-macos.tar.gz」をダウンロード。
ダウンロードしたらファイルを解凍する。

各ドライバをダウンロードしたらファイルを移動

ダウンロードしたドライバをカレントディレクトリに移動する

3. PHPでWebブラウザを操作するために必要なライブラリ「facebook-webdriver」のダウンロード

Composerのダウンロード

ComposerはPHPのパッケージ管理ツールです。

facebook-webdriverのインストール

Facebookさんが作ってくれたツールです。少し時間がかかります。

4. ここでディレクトリ構成を確認

以下のようになっていれば成功です。

5. Selenium Server の起動

バックグラウンドで起動

以下コマンドを実行します。

ctrl + c でコマンドプロンプトに戻ったら、jobsコマンドを実行するとバックグラウンドでselenium serverが起動しているのが確認できます。

はい、これで環境構築は完了です。

それでは早速テストコードを実行してみましょう

実際に動作するかを以下のテストコードで試してみましょう。

では実行してみましょう。

実行時の動画はコチラ

はい、無事に実行できてスクリーンショット画像も保存されていますね。テスト実行は終了です。
最後に、Seleniumサーバーを必ず終了させましょう。

以上、環境構築でした

これで準備は整いましたので、これからテストケースをじゃんじゃん書いていきたいと思います。
テストコードの知見が貯まってきたらまた投稿したいと思います。それではまたー。


DACエンジニア採用情報

  関連記事

ゼロからAngularでSPAを作ってみた(1) はじめてのアプリ編

はじめに Single Page Application (SPA)って知っていますか? Webサイトでコンテンツのリンクをクリックした時に妙に表示が早いな〜というとき、実はページを移動するのではなくてページの一部のみを書き換えていたりします。 こういったサイトの作り方を Single Page A …

Charlesを使ってスマホアプリ(iOS)のUAを調べてみた

はじめに ここ最近のスマホアプリには、Webブラウザの機能を実装したものが少なくありません。 (“スマホアプリ内で立ち上がるブラウザ「アプリ内ブラウザ」”の機能は「WebView」というコンポーネントを用いて実装されています。) 昨今のWebサイト、サービス運営に於いて、「通 …

プログラミング初心者がswiftでゲームアプリ的なものを作ってみた。

こんにちは、DAC2年目のkumataです。 普段は素敵な先輩方に囲まれてインフラ周りのお仕事をさせて頂いていますが、 今回は業務とは全く関係ないプログラミングをやってみました。 全く初心者なのですが、swift+Xcodeで簡単にスマホゲーム的なものが作れました。 初心者の目線から作成方法をつらつ …

no image
Angular.jsのvalueとfactoryの違いを考える

次のようなHTMLがあったとする。 [code language=”html”] <!doctype html> <html lang="jp" ng-app="App"> <head> <me …

【HTML5】4ツール出力ファイルサイズ比較

こんにちは、近江です。 前回もHTML5のSwiffyについて書かせて頂きましたが、まだまだHTML5について調査しています。 今回はSwiffyを含めた4つのHTML5系ツールで、同じ素材で同じアニメーションを作成した時のファイルサイズを比較したいと思います。 何故ファイルサイズの比較をするかと言 …

最強のSQLクライアント(GUIツール)「TeamSQL」を使ってみた!

はじめに みなさんこんにちは、プロダクト開発本部の亀梨です。 普段はXmediaOneというメディアプランニング・広告運用管理・トラッキング・マーケティング分析を行う 統合プラットフォームの開発を担当しています。 エンジニアの皆さん、SQLクライアント(GUIツール)って何使ってます? わたくしはこ …

【クラウド初心者向け】Google Cloud Platform(GCP)でWebサイトを公開してみよう!

はじめに みなさんこんにちは、プロダクト開発本部の亀梨です。 普段はXmediaOneというメディアプランニング・広告運用管理・トラッキング・マーケティング分析を行う 統合プラットフォームの開発を担当しています。 背景 わたくしは最近プライベートで開発したWebサービスをインターネット上に公開しまし …

Treasure Data で集計した結果を Google Spreadsheet に出力する

同じチームのメンバーが書いた記事に便乗します。 【入門編】TreasureDataでサイトのアクセス解析をしてみた~第2弾!~ で紹介しております 曜日・時間帯別のセッション数 のヒートマップを毎週 Google Spreadsheet に出力し、さらにそのヒートマップを自動的に Slack に通知 …

ゼロからAngularでSPAを作ってみた(3) CI: 継続的インテグレーション編

前回までのおさらいと今回やること 前々回(はじめてのアプリ編)と前回(デプロイ・公開編)で、作成した Angular のチャットアプリを Web に公開するところまでいきました。 でも、デプロイするのに、毎回決まったコマンドを打つのって面倒ですよね。 今回は GitHub でソースコードを管理して、 …

Burpの使い方!

こんにちは、第二ソリューション開発部の谷口です。 受託開発の部署で開発を担当してます。 APIを扱う機会が多く、今回は通信内容を確認するためのローカルプロキシツール「Burp」について書かせて頂きます。 Burpとは Webアプリケーション開発時の検証において、Webサーバとブラウザ間の通信内容を確 …