Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
Selenium入門
Search
onozaty
February 12, 2021
Programming
0
32
Selenium入門
社内勉強会でSeleniumについて話した資料です。
onozaty
February 12, 2021
Tweet
Share
More Decks by onozaty
See All by onozaty
リモートワーク中に買って良かったものベスト3
onozaty
0
180
情報を表現するときのポイント
onozaty
0
22
チームで開発するための環境を整える
onozaty
1
200
Selenium入門(2023年版)
onozaty
1
170
40歳過ぎてもエンジニアでいるためにやっていること
onozaty
0
55
Java8から17へ
onozaty
0
18
今からでも遅くないDBマイグレーション - Flyway と SchemaSpy の紹介 -
onozaty
0
190
Redmine issue assign notice plugin の紹介
onozaty
0
160
最近作ったもの
onozaty
0
26
Other Decks in Programming
See All in Programming
データの民主化を支える、透明性のあるデータ利活用への挑戦 2025-06-25 Database Engineering Meetup#7
y_ken
0
360
AIプログラマーDevinは PHPerの夢を見るか?
shinyasaita
1
220
プロダクト志向なエンジニアがもう一歩先の価値を目指すために意識したこと
nealle
0
130
第9回 情シス転職ミートアップ 株式会社IVRy(アイブリー)の紹介
ivry_presentationmaterials
1
320
新メンバーも今日から大活躍!SREが支えるスケールし続ける組織のオンボーディング
honmarkhunt
5
7.2k
PostgreSQLのRow Level SecurityをPHPのORMで扱う Eloquent vs Doctrine #phpcon #track2
77web
2
530
脱Riverpod?fqueryで考える、TanStack Queryライクなアーキテクチャの可能性
ostk0069
0
120
Railsアプリケーションと パフォーマンスチューニング ー 秒間5万リクエストの モバイルオーダーシステムを支える事例 ー Rubyセミナー 大阪
falcon8823
5
1.1k
生成AI時代のコンポーネントライブラリの作り方
touyou
1
210
Node-RED を(HTTP で)つなげる MCP サーバーを作ってみた
highu
0
120
#QiitaBash MCPのセキュリティ
ryosukedtomita
1
1.3k
Hypervel - A Coroutine Framework for Laravel Artisans
albertcht
1
120
Featured
See All Featured
Distributed Sagas: A Protocol for Coordinating Microservices
caitiem20
331
22k
jQuery: Nuts, Bolts and Bling
dougneiner
63
7.8k
Why You Should Never Use an ORM
jnunemaker
PRO
58
9.4k
Java REST API Framework Comparison - PWX 2021
mraible
31
8.7k
Improving Core Web Vitals using Speculation Rules API
sergeychernyshev
18
970
Connecting the Dots Between Site Speed, User Experience & Your Business [WebExpo 2025]
tammyeverts
6
300
The Straight Up "How To Draw Better" Workshop
denniskardys
234
140k
A Modern Web Designer's Workflow
chriscoyier
695
190k
I Don’t Have Time: Getting Over the Fear to Launch Your Podcast
jcasabona
32
2.4k
Sharpening the Axe: The Primacy of Toolmaking
bcantrill
44
2.4k
Site-Speed That Sticks
csswizardry
10
690
Bootstrapping a Software Product
garrettdimon
PRO
307
110k
Transcript
Selenium入門 2021-02-12 社内勉強会 onozaty
Seleniumとは • Webブラウザの操作を自動化するためのフレームワーク • 主にWebアプリケーションのE2Eテストに利用 • ブラウザ操作をプログラムで行うことができる • テスト以外の自動化ツールでも利用 •
単一のAPIで様々なブラウザを同じように操作可能 • 各ブラウザ×各OSの組み合わせで同じことを実行できる Seleniumの公式サイト https://www.selenium.dev/ ドキュメントの日本語訳 https://www.selenium.dev/documentation/ja/
Seleniumの昔と今
Seleniumの昔と今 - Selenium RC 初期(10年以上前)のSelenium 1は、Selenium RC(Remote Control)とい う仕組みを使っていた •
プロキシのような形で、テスト対象のサイトにJavaScriptを埋め込 んで操作するような仕組み • ブラウザのセキュリティに起因する制約あり • アーキテクチャ的に複雑→安定しない要因に ※ Selenium Core、Selenium RCといったキーワードが出てきたら、昔の情報なので要注意
Seleniumの昔と今 - Selenium WebDriver Selenium 2からWebDriverを使うように • WebDriverを使うことで、直接ブラウザを操作できるようになっ た •
Selenium RCの時のようなセキュリティ制限を受けなくなった • シンプルな構成となった→安定するように • 現在ではW3Cで標準化されており、各ブラウザ毎にWebDriverの 実装が用意されている • 主にブラウザベンダが提供している
Seleniumを構成する要素 • Selenium WebDriver • Selenium IDE • Selenium Grid
Selenium WebDriver https://www.selenium.dev/documentation/ja/webdriver/
Selenium WebDriver • WebDriverを使うことで、ブラウザ操作をプログラムで行うことが できる 画像引用元: https://www.selenium.dev/documentation/ja/webdriver/understanding_the_components/ 各プログラミング言語(Java、 Python、C#、Ruby、JavaScriptな ど)のバインディングが提供されて
いる。 PHPのようにSelenium公式にはな くて、他から提供されているもの もあり。 各ブラウザ(Chrome、Firefox、 Edgeなど)に対応したDriverが提供 されている。 Web APIとして要求を受け付けて、 ブラウザを操作する。
Selenium WebDriver - 利用方法 • 実行する際には、各ブラウザ用のDriverを入手しパス等に設定する • ブラウザ毎の入手元の情報は下記にて • https://www.selenium.dev/documentation/en/webdriver/driver_requirements/#quick-
reference
Selenium WebDriver - 利用方法 System.setProperty("webdriver.chrome.driver", "C:¥¥selenium¥¥chromedriver.exe"); WebDriver driver = new
ChromeDriver(); // サイトを開く driver.get("https://selenium.dev"); // id=search-byの要素を選択し、abcといった文字を入力 driver.findElement(By.id("search-by")).click(); driver.findElement(By.id("search-by")).sendKeys("abc"); // id=search-buttonの要素を探してclick driver.findElement(By.id("search-button")).click(); JavaだとシステムプロパティとしてダウンロードしたDriverのパスを設定 WebDriverのインスタンスを生成し、そのインスタンスを通して操作 ※今後出てくるコードは全てJavaでのコード
Selenium WebDriver - ダウンロードの手間 • 各ブラウザのDriverをダウンロードしてきて、パス等に設定するの は結構手間 • ブラウザのバージョンが上がる毎にDriverをダウンロードしてこなければな らない
• 動かないと思ったら、インストールされているブラウザのバージョンと Driverがアンマッチになっているといったことがよくある
Selenium WebDriver - WebDriverManager • WebDriverManagerを使うと、インストールされているブラウザの バージョンに応じたDriverをダウンロードして、システムプロパ ティに設定してくれる • https://github.com/bonigarcia/webdrivermanager
• 下記1行で終わり WebDriverManager.chromedriver().setup();
Selenium WebDriverでのデモ https://github.com/onozaty/selenium-sandbox/tree/main/selenium-junit
WebDriverを使いやすくしたもの • Selenium WebDriver自体は、テスト用というより、ブラウザ操作の ためのもの • コードが冗長になりがち • テストランナーやアサーションは別途用意する必要がある
WebDriverを使いやすくしたもの • WebDriverを内部で使いながら、テストを書きやすくするためのラ イブラリがいくつもある • Selenide https://selenide.org/ • Java •
Geb https://gebish.org/ • Groovy • WebdriverIO https://webdriver.io/ • Node.js
Selenide System.setProperty("webdriver.chrome.driver", "C:¥¥selenium¥¥chromedriver.exe"); WebDriver driver = new ChromeDriver(); driver.get("http://192.168.33.10/"); driver.findElement(By.cssSelector("a[href=¥"/login¥"]")).click();
driver.findElement(By.id("username")).sendKeys("admin"); driver.findElement(By.id("password")).sendKeys("password"); driver.findElement(By.id("login-submit")).click(); assertThat(driver.findElement(By.cssSelector("h2")).getText()) .isEqualTo("title"); Configuration.browser = WebDriverRunner.CHROME; open("http://192.168.33.10/"); $("a[href=¥"/login¥"]").click(); $("#username").sendKeys("admin"); $("#password").sendKeys("password"); $("#login-submit").click(); $("h2").shouldHave(exactText("title")); 上記をSelenideで書くと、下記のように簡潔になる
Selenium IDE https://www.selenium.dev/selenium-ide/
Selenium IDE • Selenium IDEはブラウザ操作の記録、実行が行えるブラウザの拡張 機能 • ChromeとFirefox版がある
Selenium IDE • 昔のSelenium IDEはFirefox版のみで、FirefoxがXUL/XPCOMベースの 拡張機能を廃止したことで、一度死んだ • 今のものは、まったく新しいものとして作られたもの • 当初は旧IDEからかなり機能が落ちるものだったが、コマンドも揃ってきて、
今現在では十分使えるものとなった • コマンド一覧 https://docs.seleniumhq.org/selenium-ide/docs/en/api/commands/
Selenium IDE - 操作方法 • Selenium IDEを起動し、ブラウザ操作をレコーディング • Assertもブラウザ上で右クリックから追加することができる •
for each や if文などの制御構文も書くことができる • コマンドとして直接入力することで複雑な動きも実現 • コマンド一覧 https://docs.seleniumhq.org/selenium-ide/docs/en/api/commands/ • 一連の操作を繰り返し実行できる • ファイル(*.side)としても保存できるので、再度開いて実行ということも可 能
Selenium IDEでのデモ
Selenium IDE - selenium-side-runner • 保存したファイル(*.side)は、selenium-side-runner というコマンド ラインツールでも実行可能 • Node.js
で書かれたツールになっている • https://www.selenium.dev/selenium-ide/docs/en/introduction/command- line-runner
Selenium IDE と WebDriver • Selenium IDEとSelenium WebDriverは全く異なる仕組みとなるが、 Selenium IDEの内容を、WebDriverでのコードとしてエクスポート
することができる • 最初のうちは、IDEからエクスポートした コードを元にすると、WebDriverのコードが 書きやすいかも
Selenium Grid https://www.selenium.dev/documentation/ja/grid/
Selenium Grid • Selenium Gridを使うことで、複数のリモートマシン上でSeleniumを 実行することができる • 異なるブラウザ、異なるOS上でのテストを一元管理しながら、複数のリ モートマシン上で実行できる •
並列で実行することで、テストの時間短縮を行える
Selenium Grid 画像引用元: https://www.selenium.dev/documentation/ja/grid/grid_4/components_of_a_grid/
Selenium以外のもの
Selenium以外のブラウザ自動化ツール • Puppeteer https://github.com/puppeteer/puppeteer • ChromeのDevTools Protocolを使って操作するNode.jsのライブラリ • DevTools Protocolを使うので、WebDriverより高機能なことができる
• ChromeDriverも内部的にはDevTools Protocolを使っているが、WebDriverとして定義さ れている部分しか現状は触れない • 次のSelenium 4でDevToolsをネイティブサポートする予定
Selenium以外のブラウザ自動化ツール • Cypress https://www.cypress.io/ • TestCafe https://devexpress.github.io/testcafe/ • どっちもテストに特化したフレームワーク •
オールインワン、準備が楽、学習コストが低い • プロキシやブラウザの拡張機能使って、ページ上でJavaScriptを実行するよ うな仕組み
おわり ご清聴ありがとうございました