SlideShare a Scribd company logo
1 of 24
Download to read offline
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)

More Related Content

Similar to Selenium with pixiv

20170710 hifive-test-meetup
20170710 hifive-test-meetup20170710 hifive-test-meetup
20170710 hifive-test-meetupNaoya Kojima
 
20131201 テスト自動化カンファレンスLT「激しいUI変更との戦い」
20131201 テスト自動化カンファレンスLT「激しいUI変更との戦い」20131201 テスト自動化カンファレンスLT「激しいUI変更との戦い」
20131201 テスト自動化カンファレンスLT「激しいUI変更との戦い」Hiroko Tamagawa
 
エンタープライズ開発でのSelenium活用事例
エンタープライズ開発でのSelenium活用事例エンタープライズ開発でのSelenium活用事例
エンタープライズ開発でのSelenium活用事例isaac-otao
 
20170704 Pitaliumの新機能
20170704 Pitaliumの新機能20170704 Pitaliumの新機能
20170704 Pitaliumの新機能Osamu Shimoda
 
JavaScript Unit Test Why? What? How?
JavaScript Unit Test Why? What? How?JavaScript Unit Test Why? What? How?
JavaScript Unit Test Why? What? How?Teppei Sato
 
Selenium WebDriver + python で E2Eテスト自動化
Selenium WebDriver + python で E2Eテスト自動化Selenium WebDriver + python で E2Eテスト自動化
Selenium WebDriver + python で E2Eテスト自動化JustSystems Corporation
 

Similar to Selenium with pixiv (8)

20170710 hifive-test-meetup
20170710 hifive-test-meetup20170710 hifive-test-meetup
20170710 hifive-test-meetup
 
20131201 テスト自動化カンファレンスLT「激しいUI変更との戦い」
20131201 テスト自動化カンファレンスLT「激しいUI変更との戦い」20131201 テスト自動化カンファレンスLT「激しいUI変更との戦い」
20131201 テスト自動化カンファレンスLT「激しいUI変更との戦い」
 
エンタープライズ開発でのSelenium活用事例
エンタープライズ開発でのSelenium活用事例エンタープライズ開発でのSelenium活用事例
エンタープライズ開発でのSelenium活用事例
 
20170704 Pitaliumの新機能
20170704 Pitaliumの新機能20170704 Pitaliumの新機能
20170704 Pitaliumの新機能
 
JavaScript Unit Test Why? What? How?
JavaScript Unit Test Why? What? How?JavaScript Unit Test Why? What? How?
JavaScript Unit Test Why? What? How?
 
burikaigi2023
burikaigi2023burikaigi2023
burikaigi2023
 
Ja sst東北2013
Ja sst東北2013Ja sst東北2013
Ja sst東北2013
 
Selenium WebDriver + python で E2Eテスト自動化
Selenium WebDriver + python で E2Eテスト自動化Selenium WebDriver + python で E2Eテスト自動化
Selenium WebDriver + python で E2Eテスト自動化
 

Selenium with pixiv