WebPagetest 不填写表格，给出“导航错误”答案

【问题标题】：WebPagetest not filling in forms, gives "Navigation Error"WebPagetest 不填写表格，给出“导航错误”
【发布时间】：2019-02-22 18:00:45
【问题描述】：

我是 WebPagetest (https://www.webpagetest.org/) 的新手，在登录表单时遇到了一些问题。我正在使用脚本，并且可以导航到带有表单的页面，但似乎我没有正确输入任何表单值，也没有提交表单。

这是我的脚本的一个版本：

logData 1
navigate    https://www.example.com/secure/login
setValue    name=username   activation_test
setValue    name=password   password
submitForm  id=signInForm
//clickAndWait  id=signInBtn
//exec  document.getElementsByTagName('html')[0].style.display = 'none';
sleep   5
block   google.com/csi
navigate    https://www.example.com/?jbhp=true

当然，我的第一个想法是确保我的 HTML 元素匹配，但它们看起来没问题...

用户名：

input tabindex="1" aria-required="true" class="success required" id="username" maxlength="64" name="username" placeholder="Email Address or用户名" type="text" value=""

密码：

input tabindex="2" aria-required="true" class="success required" id="password" name="password" placeholder="Password" type="password" 值=""

表格：

form action="#" id="signInForm" method="post" class="form formLarge" novalidate="novalidate"

提交（在表单中验证；仅在 clickAndWait 未注释时使用）：

button tabindex="3" id="signInBtn" class="ancBtn lrg" data-track-click="sign in : sign in" type="submit"

测试的结果页面显示它导航到最终位置，就像没有登录一样。另外，我认为这是结果的一部分：Step_2 （错误：导航错误）。遗憾的是，如果有更好的文档说明具体导致导航错误的原因，我还没有找到。

最后，如果我从使用“submitForm”切换到“clickAndWait”（在上面的示例中已被注释掉），结果的唯一区别是 Step_2 显示的是页面的屏幕截图，而不仅仅是一个橙色块。

【问题讨论】：

标签： testing automated-tests synthetic webpagetest

【解决方案1】：

IFrame。愚蠢的IFrame。如果您在上面找到我的问题的方法，我敢打赌您的页面有 IFrame。就我而言，我的 IFrame 来自与浏览器页面相同的域 - 如果您的 IFrame 不是这种情况，我不确定这是否可行。

要访问 IFrame 中的元素，我不得不忘记“setValue”、“clickAndWait”等。我不得不直接使用 Javascript。脚本化后，它看起来类似于以下示例：

exec document.querySelector("iframe[id=stupidIFrameId]").contentDocument.querySelector("input[id=password]").value = 'password'

execAndWait document.querySelector("iframe[id=stupidIFrameId]").contentDocument.querySelector("button[id=signInButton]").click()

【讨论】：