WebPagetest 未填写表格，给出 "Navigation Error"

Question

我是 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 Username" type="text" value=""

密码：

input tabindex="2" aria-required="true" class="success required" id="password" name="password" 占位符="Password" 类型="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"类型="submit"

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

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

Answer 1

IFrame。愚蠢的IFrames。如果您找到我上面的问题的方法，我敢打赌您的页面有 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()

WebPagetest 未填写表格，给出 "Navigation Error"

WebPagetest not filling in forms, gives "Navigation Error"

testing

automated-tests

synthetic

webpagetest