Selenium with PhantomJS：表单正在验证但未提交
Selenium with PhantomJS: Form being validated but not submitted
我在通过 Selenium Webdriver 的 PhantomJS API 提交表单时遇到一个奇怪的问题。单击提交按钮后，表单得到验证（用户名和密码是否太短或空白等），但最终并未提交。也就是说，如果我提交了一个无效的表单，并查看屏幕截图，就会有警报通知。如果我提交有效表格，则什么也不会发生。页面上的 JS 应该验证表单，然后在单击提交按钮时提交它。
一对rule-outs。我在提交按钮上尝试了 .click() 和 .submit()，这是一个按钮元素。我还在表单本身和表单中的任意元素（如密码）上尝试了 .submit()，这是 Selenium 允许的。
事实上，如果我使用的是 Firefox 而不是 PhantomJS，那么相同的代码也能正常工作。不过，我宁愿不切换，因为 Firefox 速度较慢并且给我带来无法预测的连接问题。
我的规格：我在 Ubuntu 14.04 LTS (GNU/Linux 3.17.1-elastic x86_64) 上通过 Python 2.7 使用 Selenium 1.43 版和 PhantomJS 1.98 .
代码如下。首先是我的硒代码。然后是表单的 html。然后是站点的 login.js 源代码。我认为在 js 中发生的是由于某种原因 .validate 函数中的 invalidHandler 是 运行，但 submitHandler 不是？在此先感谢您的关注。
# enter username and password up here first
submitEl = self.find_element_by_css_selector("button[type='submit']")
submitEl.click()
self.save_screenshot('login_submission.png')
Edit2："self" 是继承自 Webdriver.PhantomJS class 的 driver object。现在的形式 html:
<form class="form-login" action="" name="login" method="POST">
<div class="errorHandler alert alert-danger no-display">
<i class="fa fa-remove-sign"></i> You have some form errors. Please check below.
</div>
<fieldset>
<div class="form-group">
<span class="input-icon">
<input type="text" class="form-control" name="username" placeholder="Username">
<i class="fa fa-user"></i> </span>
</div>
<div class="form-group form-actions">
<span class="input-icon">
<input type="password" class="form-control password" name="password" placeholder="Password">
<i class="fa fa-lock"></i>
<a class="forgot" href="forgot.php">
I forgot my password
</a> </span>
</div>
<div class="form-group">
<img src="captcha/captcha.php" alt="captcha" />
<span class="input-icon" style="width:200px; float: right;">
<input type="text" class="form-control" name="captcha">
<i class="fa fa-key"></i> </span>
</div>
<div class="form-actions" ><div class="slideExpandUp">
<label for="remember" class="checkbox-inline">
<input type="checkbox" class="grey remember" id="remember" name="remember">
Keep me signed in
</label>
<button type="submit" class="btn btn-bricky pull-right" name="submit">
Login <i class="fa fa-arrow-circle-right"></i>
</button></div>
</div>
<div class="new-account">
Don't have an account yet?
<a href="register.php" class="register">
Create an account
</a>
</div>
</fieldset>
</form>
login.js
var Login = function () {
var runSetDefaultValidation = function () {
$.validator.setDefaults({
errorElement: "span", // contain the error msg in a small tag
errorClass: 'help-block',
errorPlacement: function (error, element) { // render error placement for each input type
if (element.attr("type") == "radio" || element.attr("type") == "checkbox") { // for chosen elements, need to insert the error after the chosen container
error.insertAfter($(element).closest('.form-group').children('div').children().last());
} else if (element.attr("name") == "card_expiry_mm" || element.attr("name") == "card_expiry_yyyy") {
error.appendTo($(element).closest('.form-group').children('div'));
} else {
error.insertAfter(element);
// for other inputs, just perform default behavior
}
},
ignore: ':hidden',
highlight: function (element) {
$(element).closest('.help-block').removeClass('valid');
// display OK icon
$(element).closest('.form-group').removeClass('has-success').addClass('has-error').find('.symbol').removeClass('ok').addClass('required');
// add the Bootstrap error class to the control group
},
unhighlight: function (element) { // revert the change done by hightlight
$(element).closest('.form-group').removeClass('has-error');
// set error class to the control group
},
success: function (label, element) {
label.addClass('help-block valid');
// mark the current input as valid and display OK icon
$(element).closest('.form-group').removeClass('has-error');
},
highlight: function (element) {
$(element).closest('.help-block').removeClass('valid');
// display OK icon
$(element).closest('.form-group').addClass('has-error');
// add the Bootstrap error class to the control group
},
unhighlight: function (element) { // revert the change done by hightlight
$(element).closest('.form-group').removeClass('has-error');
// set error class to the control group
}
});
};
var runLoginValidator = function () {
var form = $('.form-login');
var errorHandler = $('.errorHandler', form);
form.validate({
rules: {
username: {
minlength: 2,
required: true
},
password: {
minlength: 6,
required: true
}
},
submitHandler: function (form) {
errorHandler.hide();
form.submit();
},
invalidHandler: function (event, validator) { //display error alert on form submit
errorHandler.show();
}
});
};
return {
//main function to initiate template pages
init: function () {
runSetDefaultValidation();
runLoginValidator();
}
};
}();
编辑：修复了标题
PhantomJS 日志文件输出，按要求：
PhantomJS is launching GhostDriver...
[INFO - 2015-01-27T16:58:04.367Z] GhostDriver - Main - running on port 48152
[INFO - 2015-01-27T16:58:05.366Z] Session [a9641420-a645-11e4-95fd-c78c9ec356b6] - page.settings - {"XSSAuditingEnabled":false,"javascriptCanCloseWindows":true,"javascriptCanOpenWindows":true,"javascriptEnabled":true,"loadImages":true,"localToRemoteUrlAccessEnabled":false,"userAgent":"Mozilla/5.0 (Windows NT 5.1; rv:31.0) Gecko/20100101 Firefox/31.0","webSecurityEnabled":true}
[INFO - 2015-01-27T16:58:05.366Z] Session [a9641420-a645-11e4-95fd-c78c9ec356b6] - page.customHeaders: - {}
[INFO - 2015-01-27T16:58:05.366Z] Session [a9641420-a645-11e4-95fd-c78c9ec356b6] - Session.negotiatedCapabilities - {"browserName":"phantomjs","version":"1.9.8","driverName":"ghostdriver","driverVersion":"1.1.0","platform":"linux-unknown-64bit","javascriptEnabled":true,"takesScreenshot":true,"handlesAlerts":false,"databaseEnabled":false,"locationContextEnabled":false,"applicationCacheEnabled":false,"browserConnectionEnabled":false,"cssSelectorsEnabled":true,"webStorageEnabled":false,"rotatable":false,"acceptSslCerts":false,"nativeEvents":true,"proxy":{"proxyType":"direct"},"phantomjs.page.settings.userAgent":"Mozilla/5.0 (Windows NT 5.1; rv:31.0) Gecko/20100101 Firefox/31.0"}
[INFO - 2015-01-27T16:58:05.366Z] SessionManagerReqHand - _postNewSessionCommand - New Session Created: a9641420-a645-11e4-95fd-c78c9ec356b6
[ERROR - 2015-01-27T16:59:08.083Z] WebElementLocator - _handleLocateCommand - Element(s) NOT Found: GAVE UP. Search Stop Time: 1422377948079
最后的 ERROR 不是我的问题的一部分，但更多的是这里的书挡。当抓取算法查找本应在登录后显示的页面上的 link 时，就会发生这种情况。由于我们没有成功提交登录表单，因此 link 自然不存在。
我不确定我的哪些更改导致了突破，但我可以说我添加了以下代码。编辑：其中只有两个是新的。删除了一个。
webdriver.DesiredCapabilities.PHANTOMJS["phantomjs.page.settings.localToRemoteUrlAccessEnabled"] = True
webdriver.DesiredCapabilities.PHANTOMJS["phantomjs.page.settings.browserConnectionEnabled"] = True
我提交了表单本身，而不是单击按钮（我之前也尝试过，在更改上述配置之前）。
formEl = self.find_element_by_css_selector("form[name='login']")
formEl.submit()
我在通过 Selenium Webdriver 的 PhantomJS API 提交表单时遇到一个奇怪的问题。单击提交按钮后，表单得到验证（用户名和密码是否太短或空白等），但最终并未提交。也就是说，如果我提交了一个无效的表单，并查看屏幕截图，就会有警报通知。如果我提交有效表格，则什么也不会发生。页面上的 JS 应该验证表单，然后在单击提交按钮时提交它。
一对rule-outs。我在提交按钮上尝试了 .click() 和 .submit()，这是一个按钮元素。我还在表单本身和表单中的任意元素（如密码）上尝试了 .submit()，这是 Selenium 允许的。
事实上，如果我使用的是 Firefox 而不是 PhantomJS，那么相同的代码也能正常工作。不过，我宁愿不切换，因为 Firefox 速度较慢并且给我带来无法预测的连接问题。
我的规格：我在 Ubuntu 14.04 LTS (GNU/Linux 3.17.1-elastic x86_64) 上通过 Python 2.7 使用 Selenium 1.43 版和 PhantomJS 1.98 .
代码如下。首先是我的硒代码。然后是表单的 html。然后是站点的 login.js 源代码。我认为在 js 中发生的是由于某种原因 .validate 函数中的 invalidHandler 是 运行，但 submitHandler 不是？在此先感谢您的关注。
# enter username and password up here first
submitEl = self.find_element_by_css_selector("button[type='submit']")
submitEl.click()
self.save_screenshot('login_submission.png')
Edit2："self" 是继承自 Webdriver.PhantomJS class 的 driver object。现在的形式 html:
<form class="form-login" action="" name="login" method="POST">
<div class="errorHandler alert alert-danger no-display">
<i class="fa fa-remove-sign"></i> You have some form errors. Please check below.
</div>
<fieldset>
<div class="form-group">
<span class="input-icon">
<input type="text" class="form-control" name="username" placeholder="Username">
<i class="fa fa-user"></i> </span>
</div>
<div class="form-group form-actions">
<span class="input-icon">
<input type="password" class="form-control password" name="password" placeholder="Password">
<i class="fa fa-lock"></i>
<a class="forgot" href="forgot.php">
I forgot my password
</a> </span>
</div>
<div class="form-group">
<img src="captcha/captcha.php" alt="captcha" />
<span class="input-icon" style="width:200px; float: right;">
<input type="text" class="form-control" name="captcha">
<i class="fa fa-key"></i> </span>
</div>
<div class="form-actions" ><div class="slideExpandUp">
<label for="remember" class="checkbox-inline">
<input type="checkbox" class="grey remember" id="remember" name="remember">
Keep me signed in
</label>
<button type="submit" class="btn btn-bricky pull-right" name="submit">
Login <i class="fa fa-arrow-circle-right"></i>
</button></div>
</div>
<div class="new-account">
Don't have an account yet?
<a href="register.php" class="register">
Create an account
</a>
</div>
</fieldset>
</form>
login.js
var Login = function () {
var runSetDefaultValidation = function () {
$.validator.setDefaults({
errorElement: "span", // contain the error msg in a small tag
errorClass: 'help-block',
errorPlacement: function (error, element) { // render error placement for each input type
if (element.attr("type") == "radio" || element.attr("type") == "checkbox") { // for chosen elements, need to insert the error after the chosen container
error.insertAfter($(element).closest('.form-group').children('div').children().last());
} else if (element.attr("name") == "card_expiry_mm" || element.attr("name") == "card_expiry_yyyy") {
error.appendTo($(element).closest('.form-group').children('div'));
} else {
error.insertAfter(element);
// for other inputs, just perform default behavior
}
},
ignore: ':hidden',
highlight: function (element) {
$(element).closest('.help-block').removeClass('valid');
// display OK icon
$(element).closest('.form-group').removeClass('has-success').addClass('has-error').find('.symbol').removeClass('ok').addClass('required');
// add the Bootstrap error class to the control group
},
unhighlight: function (element) { // revert the change done by hightlight
$(element).closest('.form-group').removeClass('has-error');
// set error class to the control group
},
success: function (label, element) {
label.addClass('help-block valid');
// mark the current input as valid and display OK icon
$(element).closest('.form-group').removeClass('has-error');
},
highlight: function (element) {
$(element).closest('.help-block').removeClass('valid');
// display OK icon
$(element).closest('.form-group').addClass('has-error');
// add the Bootstrap error class to the control group
},
unhighlight: function (element) { // revert the change done by hightlight
$(element).closest('.form-group').removeClass('has-error');
// set error class to the control group
}
});
};
var runLoginValidator = function () {
var form = $('.form-login');
var errorHandler = $('.errorHandler', form);
form.validate({
rules: {
username: {
minlength: 2,
required: true
},
password: {
minlength: 6,
required: true
}
},
submitHandler: function (form) {
errorHandler.hide();
form.submit();
},
invalidHandler: function (event, validator) { //display error alert on form submit
errorHandler.show();
}
});
};
return {
//main function to initiate template pages
init: function () {
runSetDefaultValidation();
runLoginValidator();
}
};
}();
编辑：修复了标题
PhantomJS 日志文件输出，按要求：
PhantomJS is launching GhostDriver...
[INFO - 2015-01-27T16:58:04.367Z] GhostDriver - Main - running on port 48152
[INFO - 2015-01-27T16:58:05.366Z] Session [a9641420-a645-11e4-95fd-c78c9ec356b6] - page.settings - {"XSSAuditingEnabled":false,"javascriptCanCloseWindows":true,"javascriptCanOpenWindows":true,"javascriptEnabled":true,"loadImages":true,"localToRemoteUrlAccessEnabled":false,"userAgent":"Mozilla/5.0 (Windows NT 5.1; rv:31.0) Gecko/20100101 Firefox/31.0","webSecurityEnabled":true}
[INFO - 2015-01-27T16:58:05.366Z] Session [a9641420-a645-11e4-95fd-c78c9ec356b6] - page.customHeaders: - {}
[INFO - 2015-01-27T16:58:05.366Z] Session [a9641420-a645-11e4-95fd-c78c9ec356b6] - Session.negotiatedCapabilities - {"browserName":"phantomjs","version":"1.9.8","driverName":"ghostdriver","driverVersion":"1.1.0","platform":"linux-unknown-64bit","javascriptEnabled":true,"takesScreenshot":true,"handlesAlerts":false,"databaseEnabled":false,"locationContextEnabled":false,"applicationCacheEnabled":false,"browserConnectionEnabled":false,"cssSelectorsEnabled":true,"webStorageEnabled":false,"rotatable":false,"acceptSslCerts":false,"nativeEvents":true,"proxy":{"proxyType":"direct"},"phantomjs.page.settings.userAgent":"Mozilla/5.0 (Windows NT 5.1; rv:31.0) Gecko/20100101 Firefox/31.0"}
[INFO - 2015-01-27T16:58:05.366Z] SessionManagerReqHand - _postNewSessionCommand - New Session Created: a9641420-a645-11e4-95fd-c78c9ec356b6
[ERROR - 2015-01-27T16:59:08.083Z] WebElementLocator - _handleLocateCommand - Element(s) NOT Found: GAVE UP. Search Stop Time: 1422377948079
最后的 ERROR 不是我的问题的一部分，但更多的是这里的书挡。当抓取算法查找本应在登录后显示的页面上的 link 时，就会发生这种情况。由于我们没有成功提交登录表单，因此 link 自然不存在。
我不确定我的哪些更改导致了突破，但我可以说我添加了以下代码。编辑：其中只有两个是新的。删除了一个。
webdriver.DesiredCapabilities.PHANTOMJS["phantomjs.page.settings.localToRemoteUrlAccessEnabled"] = True
webdriver.DesiredCapabilities.PHANTOMJS["phantomjs.page.settings.browserConnectionEnabled"] = True
我提交了表单本身，而不是单击按钮（我之前也尝试过，在更改上述配置之前）。
formEl = self.find_element_by_css_selector("form[name='login']")
formEl.submit()