如何使用 webkeys() 在 Web 视图中插入文本并通过 Espresso 触发 onChange 事件

Question

我有一个包含输入字段和其下方的按钮的网络视图（网络视图是第 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>

我使用了你们的浓缩咖啡测试，它们都对我来说效果很好。也可以使用的简单版本：

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

对我来说，你的代码很好。它可以在我的本地计算机上运行。

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

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

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

请注意，您触发事件的方式已被弃用。您应该使用构造函数：

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