SeleniumとWebDriverでWebサイトのテストコードをRspecで書く

SeleniumとWebDriverでWebサイトのテストコードをRspecで書く

スポンサーリンク

概要

テストコードを書いて動かしてみる。テストコードと設定ファイルはHost側にあるが、テストに必要なライブラリはコンテナ内にインストールされ、Host側の環境を汚すことはない。

コンテナを起動する

下記はMacでDocker Machineを使った起動の例。-vオプションでhost側のディレクトリをコンテナの/testにマウントしているのがミソ。こうすることで、host側で自分の好きなエディタを使ってテストコードを書くと、コンテナ側の/testディレクトリにそれが反映される。

% docker `docker-machine config マシン名` run -P -v ~/study/site_prism:/test -d se-ruby
27e22a6003db962d1e148f52b09c3b0426a3a5c316ce745ff9fee78c14ce7c75
% docker `docker-machine config マシン名` ps
CONTAINER ID        IMAGE               COMMAND                  CREATED             STATUS              PORTS                   NAMES
27e22a6003db        se-ruby             "/bin/sh -c '/etc/ini"   9 seconds ago       Up 9 seconds        0.0.0.0:32771->22/tcp   angry_spence
% docker-machine ip マシン名
192.168.99.100
%

出力されるコンテナIDとか、ポート番号とか、環境によって異なってくるので、そこは適宜読み替えてほしい。

Firefoxを動かしてみる

テストコードを書く前に、環境のチェックを行っておく。Terminalから

% ssh -X docker@192.168.99.100 -p 32771

と入力して、コンテナにログインする。192.168.99.100というのは、上で確認したIPアドレス。32771は、上のpsオプションで表示されたポート番号。XオプションはX Windowのプロトコルを転送するという指定。
パスワードはDockerfileにも書いてあるけど、docker。今回はお試しなので、多少のことは目をつぶる。

ログインできたら、おもむろにfirefoxと入力。これでFirefoxが表示されれば、準備完了。Firefoxは終了しておく。

RSpecでブラウザテストを書いてみる

コンテナにログインした状態で、テストコードのひな形を作る。Rubyではお約束のbundlerを使って、RSpecでテストを書いていくための準備を行う。

$ cd /test
$ bundle init
$ echo 'gem "rspec"' >> Gemfile
$ echo 'gem "selenium-webdriver"' >> Gemfile
$ echo 'gem "capybara"' >> Gemfile
$ bundle install

必要なライブラリがインストールされて、バージョン情報がGemfile.lockに書き出される。これで準備はOK。テストを書いてみる。test1_spec.rb として作ったテストはこれ。

#! ruby
# -*- mode:ruby; coding:utf-8 -*-

require 'capybara/rspec'
require 'selenium-webdriver'

RSpec.configure do |config|
  config.include Capybara::DSL
end

Capybara.default_driver = :selenium
Capybara.app_host = 'https://www.google.co.jp/'

describe "Google" do

  before do
    visit '/'
  end
  
  # Top Pageにいるかどうか、画面右上のGmailという文字列で確認
  it "Top page" do
    expect(page).to have_content("Gmail")
  end
  
  # 'google'で検索を行い、検索結果ページに"Google ニュース"の文字列があるかどうかを確認
  it "Search Google Page" do
    fill_in('lst-ib', with: 'google');
    click_on 'Google 検索'
    expect(page).to have_content("Google ニュース")
  end
end

Host側とディレクトリを共有しているので、わざわざコンテナ内で慣れないエディタを使って書くことはない。Host側で入力したら、コンテナ内で

$ cat /test/test1_spec.rb

とやって一応確認しておく。

では、テストを実行してみよう。/test ディレクトリにいることを確認してから

$ bundle exec rspec test1_spec.rb

と入力する。Firefoxが立ち上がって、googleと入力されて検索ボタンが押されて結果画面が表示されれば、OK。

ここまでのまとめ

Host側で自分の好きなエディタでテストコードを書いて、コンテナで実行させた。Host側にあるのはテストコードと設定ファイルだけで、テストに必要なライブラリはHost側にはインストールされていない。これで、環境を気にせずにテストコードを試してみることができるようになった。

スポンサーリンク

シェアする

  • このエントリーをはてなブックマークに追加
  • Evernoteに保存Evernoteに保存

フォローする

この記事へのコメント

Loading Facebook Comments ...

No Trackbacks.