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

Question

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

 <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);