js webdriverで指定した要素にマウスオーバーする方法

Question

前提・実現したいこと

javascriptで作成したWebアプリのUIテストを、selenium、mocha、ヘッドレスモードのfirefox　を使って作成しています。
マウスオーバーでtdの背景色が変わることをテストしたいのですがうまくいきません。

発生している問題・エラーメッセージ

driver.actions(...).mouseMove is not a function

該当のソースコード

var chai = require("chai");
const fs = require('fs');
const { Builder, By, Key, promise, until } = require('selenium-webdriver');
const {promisify} = require('util');
const firefox = require('selenium-webdriver/firefox')
promise.USE_PROMISE_MANAGER = false;
const assert = chai.assert;

const WAIT_FOR_TIMEOUT = 2500; /* ms */
const VIEW_WIDTH = 1024; /* px */
const VIEW_HEIGHT = 1100; /* px */

before(async function() {  
        var firefoxOptions = new firefox.Options();
        firefoxOptions.setBinary('C:/Program Files/Mozilla Firefox/firefox');
        firefoxOptions.headless();
        driver = new Builder().forBrowser('firefox').setFirefoxOptions(firefoxOptions).build();
        process.on("unhandledRejection", console.dir);
        driver.manage().window().setRect({width: VIEW_WIDTH, height: VIEW_HEIGHT});
});

it("マウスオーバーで背景色が変わること", async function() {
        var el = await driver.findElement(By.id("ID"));
        await driver.actions().mouseMove(el).perform();
}

試したこと

上記のエラーメッセージで色々と調べては見ましたが解決方法を見つけることが出来ませんでした。
よろしくお願いいたします。

Comments

[m.ts10806]

>By.id("ID")
上記でエレメントはきちんと見つけられていますか？

[m.ts10806]

あ、違いますね。その前ですね。

[nezuko]

By.id("ID")で要素は見つけられていました。
その前というのはどの部分のことでしょうか？？

[m.ts10806]

mouseMove()の引数であるelがnullだからかなと思ってましたが、
そもそもその前のdriver.actions()にmouseMove()関数がないって言われてるので、それより前の話だったなと。
driverがちゃんと読めているかというところから確認する必要がありそうです

[nezuko]

なるほど、ありがとうございます。
質問では省略しているのですが、他のテスト項目では問題なく動いているのでdriveはちゃんと読めている、という認識でいました。
ソースコードにその辺りも追加させていただきました。

[m.ts10806]

あぁ、やっぱり。スコープの問題かなと思います。
ちょっとこのコードすぐ試せる環境にない（のとJavaScriptでselenium使ったことがない）ので
絶対的にこれというのは言えませんが、before()内でdriver がnewされているのでit()内では未定義なんじゃないかなと。
before()とあるのでおそらく先に実行されるものとは思いますが、グローバルにdriverの変数宣言を置いておくとどうなりますか？

[nezuko]

度々恐れ入ります。
グローバル宣言に変更してみましたが、同じエラーでした…。

[m.ts10806]

なるほど・・
としたら一個一個確認していくしかないですね。
driver
driver.actions()
までちゃんと取れているか

[nezuko]

driver.actions()までは大丈夫そうでした。.mouseMove(el)を付けるとエラーになりますね…。

Answer 1

解決しました！ご丁寧にありがとうございました。

const actions = driver.actions();
var el = await driver.findElement(By.id("ID"));
await actions.move({origin: el}).perform();

参考
https://stackoverflow.com/questions/51465187/nodejs-selenium-webdriver-cant-move-mouse-to-a-required-position

https://seleniumhq.github.io/selenium/docs/api/javascript/module/selenium-webdriver/lib/input_exports_Actions.html