kkAyatakaのメモ帳。

誰かの役に立つかもしれない備忘録。

Seleniumを使用してChromeをコントロールする

SeleniumChromeでHTMLをコントロールしてみる。使用環境はNode.js。

環境

セットアップ

  • 作業用に適当にフォルダを準備
  • npm install selenium-webdriverselenium-webdriverをインストール
  • ChromeDriverをダウンロードして、パスが通っているところに置く/パスを通す
    • 案外悩ましい...
      • Home: C:\Users\kkAyataka\.bin
      • C: C:\ChromeDriver
      • npm: C:\Users\kkAyataka\AppData\Roaming\npm
  • npm install -g lite-serverで簡易のWebサーバーを用意する
    • この辺はお好み。

HTML

操作対象のHTML。#buttonをクリックすると#stageのテキストが変わるというもの。 Selenium#buttonをクリックし、#stageの内容を読んでみる。

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
  </head>
  <script>
    function onLoad() {
      const btn = document.getElementById('button');
      const stage = document.getElementById('stage');

      // #buttonで#stageの内容を書き換える
      btn.addEventListener('click', (e) => {
        stage.innerHTML = 'Hello';
      });
    }
  </script>
  <body onload="onLoad()">
    <h1>Hello, World</h1>
    <button type="button" id="button">Button</button>
    <div id="stage" >Initial</div>
  </body>
</html>

main.js(Seleniumを用いたNode.jsアプリ)

リファレンス等いろいろ参照して、以下で動いたよ、というサンプル。

const webdriver = require('selenium-webdriver');

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

// lite-serverで動かしているURL(ポート)を指定
driver.get('http://localhost:3000/');

// DOMオブジェクト
const btn = driver.findElement(webdriver.By.css('#button'));
const stage = driver.findElement(webdriver.By.css('#stage'));

stage.getText() // #stageのテキストを取得
.then((r) => {
  console.log(r); // Initial

  return btn.click(); // #buttonのクリック
})
.then(() => stage.getText()) // もう一回Get
.then((r) => {
  console.log(r); // Hello
})
.then(() => {
  driver.quit();
});

実行

とりあえず、lite-serverを動かして...

$ lite-server .

Node.jsを実行する。クリック前のテキストと、クリック後のテキストがコンソールに表示される。 動作的にはウェブブラウザ(Chrome)が立ち上がって、コードの通りに動作して閉じる。 一瞬で動いてしまうけど、一応目視でも確認できる。

$ node main.js

DevTools listening on ws://127.0.0.1:57609/devtools/browser/8137a479-55b0-4422-81cc-405fcec17c6b
Initial
Hello

参考