ギリギリジンジン

なんでもギリギリだ。

Selenium+Node.js

参照すべき公式情報

ライブラリのインストール

Seleniumライブラリのインストール | Selenium

$ npm init
$ npm install selenium-webdriver

ドライバーのインストール

ブラウザーのドライバーをインストールする | Selenium

クイックリファレンスの表からChromeのドライバーのダウンロードサイトへ遷移する。 使用しているChromeのバージョンが「バージョン: 107.0.5304.87（Official Build） （64 ビット）」なので、「If you are using Chrome version 107, please download ChromeDriver 107.0.5304.62」のリンクからchromedriver_linux64.zipをダウンロード、展開して、chromedriverファイルを得る。

PATHに設定する必要があるのだけど、どこに置くのがいいのだろう？ .bashrcの設定しなくても使えるように /usr/local/binにでも置いておこうか。 chromedriverが起動すればOK。

$ sudo cp ~/Downloads/chromedriver_linux64/chromedriver /usr/local/bin/
$ ls -l /usr/local/bin/chromedriver 
-rwxr-xr-x 1 root root 14454968 11月  3 17:59 /usr/local/bin/chromedriver
$ chromedriver
Starting ChromeDriver 107.0.5304.62 (1eec40d3a5764881c92085aaee66d25075c159aa-refs/branch-heads/5304@{#942}) on port 9515
Only local connections are allowed.
Please see https://chromedriver.chromium.org/security-considerations for suggestions on keeping ChromeDriver safe.
ChromeDriver was started successfully.
(Ctrl+C)

ブラウザの起動

browser_launch.jsを作成。

const {Builder} = require('selenium-webdriver');
const driver = new Builder().forBrowser('chrome').build();
$ node browser_launch.js

非推奨ながら、chromedriverのパスを指定して起動する方法。browser_launch2.jsを作成。4行目のパスはchromedriverを置いた場所を指定。

const {Builder} = require('selenium-webdriver');
const chrome = require('selenium-webdriver/chrome');
const service = new chrome.ServiceBuilder('/usr/local/bin/chromedriver');
const driver = new Builder().forBrowser('chrome').setChromeService(service).build();

$ node browser_launch2.js

※ここ修正する

最初に書くスクリプトはこちらのほうが適切

冒頭は以下のように修正可能

(async () => {

最初のSeleniumスクリプトfirstScript.spec.jsを書く

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

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

実行はエラーになる。 下記を参考に実行。

javascript - after function on selenium test is not defined - Stack Overflow

$ npx mocha --no-timeouts firstScript.spec.js
[INFO] Searching for WebDriver executables installed on the current system...
[INFO] ... located chrome
[INFO] ... located firefox
[INFO] Running tests against [chrome, firefox]


  [chrome]
    First script
      ✔ First Selenium script (1317ms)

  [firefox]
    First script
      ✔ First Selenium script (1025ms)


  2 passing (4s)

これはどこから辿ったのだっけ？こちらも参考になりそう。

developer.mozilla.org

この記事では、Selenium/WebDriver や selenium-webdriver for Node のようなテストライブラリーを使って、自動化環境のインストールとテストを実行する方法を教えます。

google_test.js

const webdriver = require('selenium-webdriver');
const By = webdriver.By;
const until = webdriver.until;

const driver = new webdriver.Builder()
  .forBrowser('chrome')
  .build();

driver.get('http://www.google.com');

driver.findElement(By.name('q')).sendKeys('webdriver');

driver.sleep(1000).then(() => {
  driver.findElement(By.name('q')).sendKeys(webdriver.Key.TAB);
});

driver.findElement(By.name('btnK')).click();

driver.sleep(2000).then(() => {
  driver.getTitle().then((title) => {
    if (title === 'webdriver - Google Search') {
      console.log('Test passed');
    } else {
      console.log('Test failed');
    }
    driver.quit();
  });
});

ローカルファイルを開くとき

driver.get('file:///Users/chrismills/git/learning-area/tools-testing/cross-browser-testing/accessibility/fake-div-buttons.html');

ロギング

selenium-webdriver/lib/logging.Logger

selenium/logging_test.js at trunk · SeleniumHQ/selenium · GitHub

Logging - ChromeDriver - WebDriver for Chrome

selenium-webdriver/lib/logging

パフォーマンステストに使いたいというのが1つの目的だったが、お勧めしません？

パフォーマンステスト | Selenium

通常、SeleniumとWebDriverを使用したパフォーマンステストはお勧めしません。

Selenium Webdriver ページの読み込み時間の計測 - Qiita

SeleniumのexecuteScriptを利用して、ページのwindowオブジェクトに直接アクセスして読み込み時間を取得した。windowオグジェクトは、Performanceに関するAPIを持っていて詳しくは以下を参照。

BiDirectional APIには、Performanceに関するドキュメントがなかったので、Chrome DevTools Protocolを使って

Chrome DevTools Protocol | Selenium

こんなサイトも

パフォーマンスの測定 - ウェブ開発を学ぶ | MDN

これは大注目（あとで読む）

ChromeDriver - WebDriver for Chrome - Performance Log

検証用にログを出力。キーワード「webdriver.logging」？