Zenn
🪢

【Selenium IDE】関数が紐づいたフォームにtypeすると2回実行されてしまう

2024/01/22に公開
HTML
JavaScript
Selenium
tech

概要

標記のような問題に遭遇したので、検証結果と（完全ではありませんが）対処法について記します。ただ、検索しても他に類似の事例が見つからなかったので、私の環境の問題なのかもしれません。誤りなどお気づきの方いらしたらご教示ください。

動作環境

  • Windows 11
  • Google Chorme 120
  • Selenium IDE 3.17.2

問題

HTMLのinput要素やtextarea要素に対してchangeイベントが発生したときにコールバック関数を呼び出す例を考えます。

<!DOCTYPE html>
<html>
<head>
    <script>
        document.addEventListener("DOMContentLoaded", () => {
            const inputField = document.getElementById("input");
            inputField.addEventListener("change", () => {
                console.group("Input Change");
                console.log(inputField.value);
                console.groupEnd();
            });
        });
    </script>
</head>
<body>
    <input id="input">
</body>
</html>

しかし、Selenium IDEのtypeコマンドでテキスト入力を実行すると、コールバック関数が2回目実行されてしまいます。しかも、1回目は空の文字列になっています。

ここでは記載しませんが、addEventListener()メソッドではなくonchange属性を使って関数を呼び出すように書き換えても同じ結果でした。

対処法

もともと入力フォームに値が入っていない場合は、send keysコマンドが使えます。typeコマンドの代わりにsend keysコマンドを使うと、関数は1回しか呼ばれませんでした。

ただし、すでにフォームに値が入っている場合、typeコマンドでは値が上書きされますが、send keysコマンドでは上書きされずに文字列が連結されるかたちになってしまいます。

この場合、一度空の文字列が入力されても問題ない仕様にしておくしかないのかなと思っています😿

Discussion