ギリギリジンジン

なんでもギリギリだ。

selenium.devドキュメントを読む

(一部)日本語版が提供されているのがすばらしい。

www.selenium.dev

  • 冒頭
  • 概要
  • WebDriver
    • 入門
    • ドライバー
    • ブラウザ
    • 待機
    • Web待機
    • Interactions
    • Actions API
    • BiDirectional
    • Support features
  • テストの実践

冒頭

基本

const {Builder} = require('selenium-webdriver');
require("chromedriver");

(async function helloSelenium() {
    let driver = await new Builder().forBrowser('chrome').build();

    await driver.get('https://selenium.dev');

    await driver.quit();
})();

概要

概要 | Selenium

  • Seleniumはたくさんのツールから構成されている
  • ウェブサイトのテスト自動化にはWebDriver API
  • WebDriver APIはブラウザベンダーによって提供されている
  • IDESeleniumのテストケースを開発するためのツール
  • IDEChromeFirefox拡張機能
  • IDEはユーザーの動作を記録する
  • IDESeleniumスクリプトシンタックスを学ぶための優れた方法
  • Gridは複数のブラウザーとOSの組み合わせでテストを実行できる
  • Gridはテストケースの起動の制御はローカル端末で行われ、リモート端末によって自動的に実行される

用語 | Selenium

  • ドライバーは、実際のブラウザを制御します。 ドライバーはブラウザベンダー自身が作成します。一部の人々はドライバーをプロキシと呼んでいます。

部品構成 | Selenium

ドライバーは、ChromeDriver、GeckoDriverなどブラウザー固有のものです。 最低限、WebDriverはドライバーを経由してブラウザーと通信します。 コミュニケーションは双方向です。 ドライバーはブラウザと同じシステムで動きます。簡単な例は直接通信です。

[WebDriver]<--->[Driver]<--->[Browser]

RemoteWebDriverを経由したリモート通信もできます。 RemoteWebDriverは、ドライバーおよびブラウザと同じシステムで実行されます。

[WebDriver]<--(-->[Remote WebDriver]<--->[Driver]<--->[Browser] )

Selenium ServerまたはSelenium Gridを使用してリモート通信を行うこともできます。

[WebDriver]<--->[Selenium Server or Grid]<--(-->[Driver]<--->[Browser] )

どのフレームワークに適しているか | Selenium

WebDriverのジョブは1つです。テストに関することは知りません。

そこでフレームワーク登場です。例えば NUnit for .NET, JUnitfor Java, RSpec for Ruby, Cucumber など。 テストフレームワークは、WebDriverおよびテストの関連手順の実行を担当します。

(TEST FRAMEWORK [WebDriver]<--)-->[Selenium Server or Grid]<--(-->[Driver]<--->[Browser] HOST SYSTEM)

WebDriver

  • WebDriverはブラウザをネイティブに操作します
  • WebDriverは言語バインディングと個々のブラウザ制御コードの実装の両方を参照します

入門

インストール、セットアップは、別記事に譲る。

grgrjnjn.hatenablog.jp

最初のSeleniumスクリプトを書く

8つの基本コンポーネント

  1. ドライバーインスタンスでセッションを開始
  2. ブラウザ上で操作
  3. ブラウザに関する情報をリクエス
  4. 待ち時間の設定
  5. 要素を検索するためのコマンドを送信
  6. 要素に対してアクションを実行
  7. 要素に関する情報をリクエス
  8. セッションを終了
ドライバーインスタンスでセッションを開始

詳細は ドライバーセッション | Selenium 参照

driver = await new Builder().forBrowser('chrome').build();
ブラウザ上で操作

ブラウザー ナビゲーション | Selenium (get / back / forward / refresh)

await driver.get('https://www.selenium.dev/selenium/web/web-form.html');
ブラウザに関する情報をリクエス

Browser interactions | Selenium

ウィンドウハンドル、ブラウザのサイズ/位置、クッキー、アラートなど、要求できるブラウザに関する情報の種類はたくさんあります。

let title = await driver.getTitle();
待ち時間の設定

ブラウザの現在の状態とコードを同期させることはSeleniumの最大の課題の1つであり、それをうまく行うことは高度なトピックです。

基本的には、要素を見つけようとする前にその要素がページ上にあることを確認し、それと対話しようとする前に要素が対話可能な状態にあることを確認したいのです。

暗黙の待機が最善の解決策であることはほとんどありませんが、ここで示すのが最も簡単なので、プレースホルダとして使用することにします。

詳細は 待機 | Selenium 参照

await driver.manage().setTimeouts({ implicit: 500 });
要素を検索するためのコマンドを送信

ほとんどのSeleniumセッションのコマンドの大部分は要素に関連しており、最初に要素を見つけることなく、コマンド操作することはできません。

詳細は Web要素 | Selenium 参照

let textBox = await driver.findElement(By.name('my-text'));
let submitButton = await driver.findElement(By.css('button'));
要素に対してアクションを実行

要素に対して行うアクションはほんの一握りですが、頻繁に使用することになります。

await textBox.sendKeys('Selenium');
await submitButton.click();
要素に関する情報をリクエス

要素には、要求できる多くの情報が格納されています。

詳細は Web要素に関する情報 | Selenium 参照

let value = await message.getText();
セッションを終了

ドライバプロセスが終了し、デフォルトでブラウザも終了します。

after(async () => await driver.quit());

すべてをまとめる

// firstScript.spec.js
const { By, Builder } = require('selenium-webdriver');
const { suite } = require('selenium-webdriver/testing');
const assert = require("assert");

suite(function(env) {
    describe('First script', function() {
        let driver;

        before(async function() {
            driver = await new Builder().forBrowser('chrome').build();
        });

        after(async () => await driver.quit());

        it('First Selenium script', async function() {
            await driver.get('https://www.selenium.dev/selenium/web/web-form.html');

            let title = await driver.getTitle();
            assert.equal("Web form", title);

            await driver.manage().setTimeouts({ implicit: 500 });

            let textBox = await driver.findElement(By.name('my-text'));
            let submitButton = await driver.findElement(By.css('button'));

            await textBox.sendKeys('Selenium');
            await submitButton.click();

            let message = await driver.findElement(By.id('message'));
            let value = await message.getText();
            assert.equal("Received!", value);
        });

    });
});

テスト実行

テストフレームワークmochaをインストールして実行。

$ npm install mocha
$ node firstScript.spec.js
$ npx mocha --no-timeouts firstScript.spec.js

npxの説明は npxコマンドとは? 何ができるのか? を参照。

ドライバー

ドライバーセッション | Selenium

セッションの開始と停止は、ブラウザーを開いたり閉じたりするためのものです。

セッションの作成
セッションの終了

ブラウザーオプション

Command executors Command Listeners Browser Service Remote WebDriver

ブラウザ

待機

Web待機

Interactions

Actions API

BiDirectional

Support features

IDE

Grid

コンポーネントを理解する

Selenium 詳細