Seleniumを使った
ブラウザテスト(E2Eテスト)
の導入事例
2017­08­03 ピクシブ株式会社 山際
https://supporterz-
seminar.connpass.com/event/61354/
ピクシブ株式会社技術基盤チーム所属
山際康貴twitter: @tamanobi
facebook: KohkiGiwa
仕事: ブラウザテスト(Selenium), 機械学習, 広
告周り開発
好き: LISP, イラスト蒐集, 図書館
興味: 画像処理, 機械学習, クローラー
オススメ: 完全栄養食COMP
(最近グミがリリースされました↑)
今日話すこと
ブラウザテスト
Seleniumの使い方
pixivでのSelenium活用事例
pixiv
pixivはイラストの投稿・閲覧が楽しめる「イラス
トコミュニケーションサービス」です。
投稿ができなくなると致命的
ユーザの投稿によって支えられている
pixivのこれまでのテスト
GitLab+Jenkins(CI)でマージリクエストごとにテス
ト
単体テスト(PHPUnit)
コーディング規約チェック(独自Lint)
投稿を担う関数のテストはできるが、 フロント含
めたテストができない
ブラウザテストのきっかけ
CoffeeScriptをTypeScriptに書き換えていたとき
特定ブラウザ(FF/IE)で投稿ができなくなった
原因はバージョンアップによってjQuery.ready
のタイミング変更
ユーザの問い合わせで発覚
もっと早く気づきたい
手動でチェックするのはイケてない
ブラウザテストを決意
ブラウザテスト
ブラウザを制御してテストを行う
例: ログインできるか?
実際のブラウザに近い挙動でテストが行える
ほかのサービスと併用でいろんなブラウザでテス
トできる
Selenium Grid
BrowserStack/CrossBrowserTesting
Selenium
Selenium
http://www.seleniumhq.org/
Seleniumとは
ブラウザをプログラムから操作するソフトウェア
ライセンス: Apache2
各ブラウザで統一したインタフェースで扱える
http://www.seleniumhq.org/
仲間: モバイルアプリテスト自動化ツールAppinium
デモンストレーション
Twitterからスクレイピングするデモ
デモ用リポジトリ:
https://github.com/tamanobi/capybara-beginner-
with-chrome
Seleniumのコード
ちょっと使いづらい
#! /bin/env ruby
require "selenium-webdriver"
#Firefox browser instantiation
driver = Selenium::WebDriver.for :firefox
#Loading the assertselenium URL
driver.navigate.to "http://www.example.com"
#Clicking on the Follow link present on the assertselenium home
FollowButton = driver.find_element(:link, "Follow")
FollowButton.click
#Asserting whether the registration success message is diaplyed
SuccessMessage = driver.find_element(:css, "p.message")
#Quitting the browser
driver.quit
Seleniumのライブラリ
Ruby: Capybara
おすすめ。pixivで使用
https://github.com/teamcapybara/capybara
PHP: php-webdriver
facebookがメンテナンス
https://github.com/facebook/php-webdriver
Java: Selenide
おすすめ
https://github.com/codeborne/selenide
Capybaraのコード(イメージ)
#! /bin/env ruby
require "capybara"
require "selenium-webdriver"
visit "https://www.pixiv.net"
find("a.signup-form__submit--login").click
within "#container-login form .input-field-group" do
find("input[type="text"]").set(user)
find("input[type="password"]").set(password)
end
submit = find("form button.signup-form__submit")
submit.click
いい感じ
pixivでの運用
pixivでの運用
ログインできるか?/投稿できるか?/予約投稿でき
るか?(プレミアム機能)/etc..
Jenkinsで定期実行
失敗したらSlackへ通知
ブラウザサービス(BrowserStack)を使用
Win7/Win10/macOS
IE/Edge/Safari/Firefox/Chrome
ブラウザサービス
IEのテストをするにはWindowsが必要
safariのテストをするにはmacOSが必要
自前でやるとメンテコストが高い
バージョンアップとかサーバーメンテナンスと
かその人件費とか
そこでブラウザサービス
ブラウザサービス
テスト状態を動画で撮影(デモ)
コード上が設定を書き換えるだけ
設定を変えればOSやブラウザを変更できる
お金がかかる(約$100/month)
並列数の制限がある
メンテナンスとはおさらば
よかったこと/わるかったこと
ユーザの問い合わせよりも早く致命的なエラーに
気づける
テストの属人化がなくなる
コードがマニュアル
開発者がテストケースを変更しやすくない
本体はPHP、テストはRuby。
テストの並列度
ブラウザサービスの並列制限が厳しい
参考資料
Capybaraデモリポジトリ
一休.comのE2Eテスト事情~ギリギリ話せるところ
まで話します~ /cybozu_ikyu_e2e
SelenideによるDSL風E2E自動テスト基盤開発の実
例
設計とか参考になります
おわりに
ピクシブ株式会社の宣伝
ランチ会の紹介
毎週水曜日12:00から、社員+ゲストでランチ会を
やっています。誰でも参加可!
勉強会の紹介
毎週金曜日18:00から、エンジニア勉強会をやって
います。誰でも参加可!発表も可!
連絡お待ちしております
(https://www.facebook.com/KohkiGiwa)
Q&A
Q1.テストケースが更新されない
A1.あなたの変更でFAILしている旨をちゃんと伝え
る
Q2.テストケースの条件が複雑すぎる
A2.きりがないので重要なものだけやると良い
Capybara.register_driver :selenium do |app|
caps = Selenium::WebDriver::Remote::Capabilities.new
caps['browser'] = ENV.fetch('SELENIUM_BROWSER', 'IE')
caps['browser_version'] = ENV.fetch('SELENIUM_BROWSER_VERSION'
caps['os'] = ENV.fetch('SELENIUM_OS', 'Windows')
caps['os_version'] = ENV.fetch('SELENIUM_OS_VERSION', '8.1'
caps['resolution'] = ENV.fetch('SELENIUM_RESOLUTION', '1024x76
caps['browserstack.local'] = false
caps['browserstack.video'] = true
caps['browserstack.debug'] = true
caps['browserstack.networkLogs'] = true
caps['build'] = ENV['BUILD_NUMBER']
client = Selenium::WebDriver::Remote::Http::Default.new
username = ENV['BROWSERSTACK_USER']
authkey = ENV['BROWSERSTACK_PASSWORD']
url = "http://#{username}:#{authkey}@hub.browserstack.com:80/w
Capybara::Selenium::Driver.new(
app,
:browser => :remote,
:url => url,
:desired_capabilities => caps
おわりに
ピクシブ株式会社の宣伝
ランチ会の紹介
毎週水曜日12:00から、社員+ゲストでランチ会を
やっています。誰でも参加可!
勉強会の紹介
毎週金曜日18:00から、エンジニア勉強会をやって
います。誰でも参加可!発表も可!
連絡お待ちしております
(https://www.facebook.com/KohkiGiwa)

Selenium with pixiv