![Selenide
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で書くと、下記のように簡潔になる](https://image.slidesharecdn.com/selenium2023-230918053745-5a95bfd8/85/Selenium-2023-15-320.jpg)
More Related Content
What's hot (20)
Similar to 厂别濒别苍颈耻尘入门(2023年版) (20)
More from onozaty (20)
Recently uploaded (8)
![ElasticsearchでSPLADEする [Search Engineering Tech Talk 2025 Winter]](https://cdn.slidesharecdn.com/ss_thumbnails/searchtech-250228102455-ddc5ce09-thumbnail.jpg?width=560&fit=bounds)
厂别濒别苍颈耻尘入门(2023年版)
- 3. Seleniumとは ? Webブラウザの操作を自動化するためのフレームワーク ? 主にWebアプリケーションのE2Eテストに利用 ? ブラウザ操作をプログラムで行うことができる ? テスト以外の自動化ツールでも利用 ? 単一のAPIで様々なブラウザを同じように操作可能 ? 各ブラウザ×各OSの組み合わせで同じことを実行できる Seleniumの公式サイト https://www.selenium.dev/ ドキュメントの日本語訳 https://www.selenium.dev/documentation/ja/
- 4. 厂别濒别苍颈耻尘の昔と今
- 5. 厂别濒别苍颈耻尘の昔と今 - Selenium RC 初期(10年以上前)のSelenium 1は、Selenium RC(Remote Control)とい う仕組みを使っていた ? プロキシのような形で、テスト対象のサイトにJavaScriptを埋め込 んで操作するような仕組み ? ブラウザのセキュリティに起因する制約あり ? アーキテクチャ的に複雑→安定しない要因に ※ Selenium Core、Selenium RCといったキーワードが出てきたら、昔の情報なので要注意
- 6. 厂别濒别苍颈耻尘の昔と今 - Selenium WebDriver Selenium 2からWebDriverを使うように ? WebDriverを使うことで、直接ブラウザを操作できるようになっ た ? Selenium RCの時のようなセキュリティ制限を受けなくなった ? シンプルな構成となった→安定するように ? 現在ではW3Cで標準化されており、各ブラウザ毎にWebDriverの 実装が用意されている ? 主にブラウザベンダが提供している
- 7. Seleniumを構成する要素 ? Selenium WebDriver ? Selenium IDE ? Selenium Grid
- 9. Selenium WebDriver ? WebDriverを使うことで、ブラウザ操作をプログラムで行うことが できる 画像引用元: https://www.selenium.dev/ja/documentation/overview/components/ 各プログラミング言語(Java、Python、C#、Ruby、 JavaScriptなど)のバインディングが提供されている。 PHPのようにSelenium公式にはなくて、他から提供さ れているものもあり。 各ブラウザ(Chrome、Firefox、Edgeなど) に対応したDriverが提供されている。 Web APIとして要求を受け付けて、 ブラウザを操作する。
- 10. Selenium WebDriver - 利用方法 昔は各種ブラウザに対応したDriverを入手し、それをパスとして指定 する必要があったが、Selenium 4.6(2022年11月リリース)でSelenium ManagerというツールがSelenium本体に同梱され、Selenium Manager が自動で対応するブラウザのDriverをダウンロードしてくれるように なった。 ? https://www.selenium.dev/ja/documentation/selenium_manager/ ? 手動でのダウンロードが不要に ? ブラウザのバージョンが上がる毎に、対応するDriverのバージョンもあ がって、動かなくなるということが以前は良く発生していた ? WebDriverManager(Java)など、同じようなことをやってくれるラ イブラリもいくつかあったが、それも当然いらなくなる
- 11. Selenium WebDriver - 利用方法 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(); WebDriverのインスタンスを生成し、そのインスタンスを通して操作 ※今後出てくるコードは全てJavaでのコード
- 13. WebDriverを使いやすくしたもの ? Selenium WebDriver自体は、テスト用というより、ブラウザ操作の ためのもの ? コードが冗長になりがち ? テストランナーやアサーションは別途用意する必要がある
- 14. WebDriverを使いやすくしたもの ? WebDriverを内部で使いながら、テストを書きやすくするためのラ イブラリがいくつもある ? Selenide https://selenide.org/ ? Java ? WebdriverIO https://webdriver.io/ ? Node.js
- 15. Selenide 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で書くと、下記のように簡潔になる
- 17. Selenium IDE ? Selenium IDEはブラウザ操作の記録、実行が行えるブラウザの拡張 機能 ? ChromeとFirefox版がある
- 18. Selenium IDE ? 昔のSelenium IDEはFirefox版のみで、FirefoxがXUL/XPCOMベースの 拡張機能を廃止したことで、一度死んだ ? 今のものは、まったく新しいものとして作られたもの ? 当初は旧IDEからかなり機能が落ちるものだったが、コマンドも揃ってきて、 今現在では十分使えるものとなった ? コマンド一覧 https://docs.seleniumhq.org/selenium-ide/docs/en/api/commands/
- 19. Selenium IDE - 操作方法 ? Selenium IDEを起動し、ブラウザ操作をレコーディング ? Assertもブラウザ上で右クリックから追加することができる ? for each や if文などの制御構文も書くことができる ? コマンドとして直接入力することで複雑な動きも実現 ? コマンド一覧 https://docs.seleniumhq.org/selenium-ide/docs/en/api/commands/ ? 一連の操作を繰り返し実行できる ? ファイル(*.side)としても保存できるので、再度開いて実行ということも可 能
- 20. Selenium IDEでのデモ
- 21. Selenium IDE - selenium-side-runner ? 保存したファイル(*.side)は、selenium-side-runner というコマンド ラインツールでも実行可能 ? Node.js で書かれたツールになっている ? https://www.selenium.dev/selenium-ide/docs/en/introduction/command- line-runner
- 22. Selenium IDE と WebDriver ? Selenium IDEとSelenium WebDriverは全く異なる仕組みとなるが、 Selenium IDEの内容を、WebDriverでのコードとしてエクスポート することができる ? 最初のうちは、IDEからエクスポートした コードを元にすると、WebDriverのコードが 書きやすいかも
- 24. Selenium Grid ? Selenium Gridを使うことで、複数のリモートマシン上でSeleniumを 実行することができる ? 異なるブラウザ、異なるOS上でのテストを一元管理しながら、複数のリ モートマシン上で実行できる ? 並列で実行することで、テストの時間短縮を行える
- 25. Selenium Grid 画像引用元: https://www.selenium.dev/documentation/ja/grid/grid_4/components_of_a_grid/
- 26. 厂别濒别苍颈耻尘以外のもの
- 27. Selenium以外のブラウザ自動化ツール ? Puppeteer https://github.com/puppeteer/puppeteer ? ChromeのDevTools Protocolを使って操作するNode.jsのライブラリ ? DevTools Protocolを使うので、SeleniumのWebDriverより高機能なことが できるメリットが以前はあったが、Seleniumも最近DevTools Protocolを使 えるようになっている ? https://www.selenium.dev/ja/documentation/webdriver/bidirectional/chrome_devtools/ ? DevToolsのRecorderで操作をレコーディングして、Puppeteerのスクリプト としてエクスポートできる
- 28. Selenium以外のブラウザ自動化ツール ? Cypress https://www.cypress.io/ ? TestCafe https://testcafe.io/ ? どっちもテストに特化したフレームワーク ? オールインワン、準備が楽、学習コストが低い ? プロキシやブラウザの拡張機能使って、ページ上でJavaScriptを実行するよ うな仕組み
- 29. Selenium以外のブラウザ自動化ツール ? Playwright https://playwright.dev/ ? テスト用のフレームワーク ? SeleniumやPuppeteerと同様にブラウザ自体を操作する ? Puppeteer と似たAPI ? GoogleにいてPuppeteer作った人が、MicrosoftにいってPlaywrightを作っている ? ブラウザ操作のレコーディングによるコード生成機能 ? Trace Viewer ? テスト実行時の画面状態などをGUI上でトレースできる ? Node.js(JavaScript/TypeScript)だけでなく、Java、Python、.NET(C#等) など にも対応