如何使用 webkeys() 在 webview 中插入文本并使用 Espresso 触发 onChange 事件

Question

我有一个包含输入字段和下方按钮的 webview（webview 是第 3 方代码） 当我在手机上打开视图时，只要我在字段中插入一个数字， 按钮改变颜色并启用。

输入字段是

 <input type="tel" name="input" id="input" class="inputbox"  autocomplete="off" placeholder="number" value="">

当我使用 Espresso 运行自动测试时，我可以将文本放入字段中，但按钮未启用

 onWebView().withElement(findElement(Locator.ID, "input"))
            .perform(clearElement())
            .perform(DriverAtoms.webKeys("22222222"))
            .perform(webClick())
            .withElement(findElement(Locator.ID, "continueButton"))
            .perform(webClick());

Firefox 检查器显示 onChange 事件有一个事件侦听器，我想它的侦听器是这个：

            function(e) {
          e.persist();
          var t = /^[0-9\b]+$/;
          d((function(a) {
            return Object(c.a)(Object(c.a)({}, a), {}, Object(M.a)({}, e.target.name, t.test(e.target.value) ? e.target.value : e.target.value.replace(/[^0-9]/g, "")))
          })), e.target.value.replace(/[^0-9]/g, "").length > 0 ? (j(!1), b("primary"), k(""), R("")) : (b("primary disabled"), k("hidden"), R("paddingTop20"))
        }

所以我尝试触发 onchange 没有运气：

   onWebView().forceJavascriptEnabled().withElement(findElement(Locator.ID,    "input"))
            .perform(clearElement())
            .perform(webClick())
            .perform(DriverAtoms.webKeys("22222222"))
            .perform(webClick())
            .perform(SimpleAtom("function(elem) {\n" +
                    "var e = document.createEvent('Event');\n" +
                    "e.initEvent('change', false, true);\n" +
                    "elem.dispatchEvent(e);}"))
            .perform(webClick())
            .withElement(findElement(Locator.ID, "continueButton"))
            .perform(webClick());

如果我使用键盘插入数字 continueButton 启用，我可以单击它并继续输入文本，但使用 webkeys() 不起作用。 如何触发类似于使用键盘的 onChange 事件（或任何需要的事件）并使用 Espresso 执行 webclick()？

Answer 1

我制作了一个 Node.js Web 服务器，并下载了 Android Studio 进行一些测试。这是我根据您的信息测试的 HTML 页面：

var input = document.getElementById("input"),
    button = document.getElementById("continueButton"),
    result = document.getElementById("result"),
    label = document.querySelector('.button_label');

input.addEventListener('input', (event) => {
  button.addEventListener('click', (event) => {
    result.innerHTML = "click success!";
  });
  
  button.classList.remove("disabled");
});

.disabled {
  background-color: red;
}

<form onclick="event.preventDefault();">
  <input type="tel" name="input" id="input" class="inputbox"  autocomplete="off" placeholder="number" value="">
  <button class="disabled" id="continueButton"><span class="button_label">number</span><i class="spinner"></i></button>
</form>

<p type="text" name="result" id="result"></p>

我使用了您的 Espresso 测试，并且 它们都对我很好。 也可以使用的简单版本：

onWebView().withElement(findElement(Locator.ID, "input"))
               .perform(DriverAtoms.webKeys("22222222"))
               .withElement(findElement(Locator.ID, "continueButton"))
               .perform(webClick());

对我来说，你的代码很好。它适用于我的本地计算机。

现在，如果没有第三方 webview 来准确重现问题，就很难进行调试。也许它来自不好的事件。 webKeys 可能会触发 webapp 未侦听的错误事件。此外，在您第二次尝试手动触发事件时，您可能不应该使用change 事件，因为change 不会被键盘触发，您的情况就是这种情况。

另一种解释可能是您没有选择要点击的好元素：.button_label 而不是continueButton？事实上，如果您将我的示例中的 button.addEventListener 替换为 label.addEventListener，则 Espresso 测试将不再起作用，但如果您使用键盘手动进行，它将起作用。

为了进行更多调查，我需要在 webview 中加载页面的 URL。

小提示，您的触发事件方式已被弃用。你应该使用构造函数：

var event = new Event('change');
input.dispatchEvent(event);