読者です 読者をやめる 読者になる 読者になる

Rails Webook

自社のECを開発している会社で働いています。Rails情報やサービスを成長させる方法を書いていきます

RubyでSeleniumを使ってサクッとスタンドアローンなブラウザテストを作成する

テスト

f:id:nipe880324:20150420015630j:plain
Photo by Flickr: Simon & His Camera's Photostream

RubyでSeleniumを使ってスタンドアローンなブラウザテストをする方法を説明します。
テスティングフレームワークにはRSpec、SeleniumにアクセスするためにCapybaraをつかうことで簡単にテストがかけます。

メリットとして、スタンドアローンなので、ブラウザでテスト対象のページが開ければ、他の要素のサーバーのプログラミング言語やサーバーの配置場所など制約がなくテストを作成できます。

動作環境

  • Mac OSX 10 Yosemite
  • Ruby 2.2.0
  • selenium-webdriver 2.45
  • chromedriver 2.15
  • rspec 3.2.0
  • capybara 2.4.4


1. 必要なgemをインストールする

まず、Gemfileを作成します。

# Gemfile
source "https://rubygems.org"

gem "selenium-webdriver"
gem "capybara"
gem "rspec"
gem "pry-byebug"


次に、gemをインストールします。

bundle install


2. ブラウザをインストールする

今回の環境は、Macで実施しているので、Safariはデフォルトで入っています。
FirefoxやChromeでテストをしたい場合は、次の手順を実施する必要があります。

Chrome
  1. WebからChromeをインストールします。
  2. chromedriverをダウンロード(一番新しいバージョンを選択)し、PATHに通る場所(/usr/binなど)に配置する
Firefox
  1. Firefoxをインストールする


3. テストコードを記載する

RSpecでテストコードを書きます。メインは、ブラウザの操作用のDSLのCapybaraで記載します。
参考:RSpec3 / Capybara / Capybara-Webkit チートシート - Rails Webook

# github_spec.rb

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

# RSpecにCapybaraのDSLを設定
RSpec.configure do |config|
  config.include Capybara::DSL
end

# Capybaraにseleniumを使うように設定
Capybara.default_driver = :selenium
Capybara.app_host = 'https://github.com/'


describe "GitHub" do

  before do
    visit '/'
  end

  it "トップページが表示されること" do
    expect(page).to have_content('Build software better, together.')
  end

  it "ログイン画面が表示できること" do
    click_link "Sign in"
    expect(current_path).to eq '/login'
  end

  it "ログインできること" do
    click_link "Sign in"

    # テキストフィールドに入力し、ボタンをクリック(id, name, value属性などを指定できる)
    fill_in 'login_field', with: 'GitHubのユーザ名'
    fill_in 'password',    with: 'GitHubのパスワード'
    click_button "Sign in"

    expect(current_path).to eq '/'
  end
end


テストを実行します。すると、firefoxが開きテストが実行されます。

rpsec github_spec.rb


もしテストがうまくいかない場合は、うまく行かない箇所の周辺でbinding.pryを記載することでデバッグができるので、周辺のコードを実行してみて想定通りの動作になっているか確認するとよいと思います。

以上です。