参照すべき公式情報
ライブラリのインストール
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」？