测试选项卡导航顺序
Testing tab navigation order
在我们的一个测试中,我们需要确保表单中的选项卡键盘导航以正确的顺序执行。
问题:使用量角器检查选项卡导航顺序的常规方法是什么?
目前,我们正在通过对表单中存在的尽可能多的输入字段重复以下步骤来解决此问题(代码如下):
- 检查当前聚焦元素的
ID
(使用getId()
) - 向当前关注的元素发送
TAB
密钥
以下是示例规范:
it("should navigate with tab correctly", function () {
var regCodePage = new RegCodePage();
browser.wait(protractor.ExpectedConditions.visibilityOf(regCodePage.title), 10000);
// registration code field has focus by default
expect(regCodePage.registrationCode.getId()).toEqual(browser.driver.switchTo().activeElement().getId());
// focus moved to Remember Registration Code
regCodePage.registrationCode.sendKeys(protractor.Key.TAB);
expect(regCodePage.rememberRegistrationCode.getId()).toEqual(browser.driver.switchTo().activeElement().getId());
// focus moved to Request Code
regCodePage.rememberRegistrationCode.sendKeys(protractor.Key.TAB);
expect(regCodePage.requestCode.getId()).toEqual(browser.driver.switchTo().activeElement().getId());
// focus moved to Cancel
regCodePage.requestCode.sendKeys(protractor.Key.TAB);
expect(regCodePage.cancelButton.getId()).toEqual(browser.driver.switchTo().activeElement().getId());
// focus moved back to the input
regCodePage.cancelButton.sendKeys(protractor.Key.TAB);
expect(regCodePage.registrationCode.getId()).toEqual(browser.driver.switchTo().activeElement().getId());
});
其中regCodePage
是页面对象:
var RegCodePage = function () {
this.title = element(by.css("div.modal-header b.login-modal-title"));
this.registrationCode = element(by.id("regCode"));
this.rememberRegistrationCode = element(by.id("rememberRegCode"));
this.requestCode = element(by.id("forgotCode"));
this.errorMessage = element(by.css("div.auth-reg-code-block div#message"));
this.sendRegCode = element(by.id("sendRegCode"));
this.cancelButton = element(by.id("cancelButton"));
this.closeButton = element(by.css("div.modal-header button.close"));
};
module.exports = RegCodePage;
它是有效的,但它不是真正明确和可读的,这使得它很难维护。此外,当前方法中的另一个"气味"是代码重复。
如果目前的方法是你也会这样做的话,我希望你能对它的可重用性有任何见解。
我认为PageObject应该定义一个选项卡顺序列表,因为这实际上是页面的一个直接属性,应该可以表示为简单的数据。一个项目数组似乎是一个足够的表示,所以类似于:
this.tabOrder = [ this.registrationCode, this.rememberRegistrationCode, this.requestCode, this.cancelButton ];
然后,您需要一些通用代码来检查选项卡顺序。
function testTabOrder(tabOrder) {
// Assumes TAB order hasn't been messed with and page is on default element
tabOrder.forEach(function(el) {
expect(el.getId()).toEqual(browser.driver.switchTo().activeElement().getId());
el.sendKeys(protractor.Key.TAB);
});
}
那么你的测试会是这样的:
it('has correct tab order', function() {
var regCodePage = new RegCodePage(); // this should probably be in the beforeEach
testTabOrder(regCodePage.tabOrder);
});
当然,这假设每个元素都有一个有效的"getId()"方法。(对我来说,这似乎是一个合理的假设,但有些环境可能不支持它。)
我认为这可以很好地隔离PageObject上的选项卡顺序(因此很容易与页面内容保持同步,并且不会在验证顺序的代码中丢失)。测试代码看起来很"乐观"(我怀疑现实世界会引入足够多的问题,最终你会稍微扩展一下这个代码)。
我还没有尝试过这些,所以如果不起作用,请随时投反对票。:)
此外,我相信forEach
循环会按原样工作,但如果它需要一些更明确的promise处理来明确依赖关系,我也不会感到惊讶。
相关文章:
- ajax请求的顺序总是不同的
- 按照选项卡索引的顺序循环一个jQuery选择
- 单击顶部导航时如何进行向下滚动效果(向下滑动).
- angular 1.5应用程序中的导航栏
- 无法从jquery Mobile导航栏重定向到另一个页面
- 匹配一个单词,其中候选人可以跨越顺序组(跨度)
- 按顺序添加和删除类
- 引导程序:在导航栏中,显示悬停在单个位置的基于Li Link的不同内容
- 导航到特定事件的另一个变量页面
- 按我自己的类克隆另一个元素的内容和顺序
- MVC 3页面导航和使用javascript传递参数
- 如何在react js中从一个页面导航到另一个页面
- 导航栏没有调整到浏览器屏幕的大小
- Javascript-根据赋值顺序,按键合并对象数组
- 显示放大镜弹出窗口时隐藏导航内容
- 2个backbone.js集合,具有相同的模型,但排序顺序不同
- querySelector/getElementByClassName嵌套项的顺序
- 测试选项卡导航顺序
- jquery 顺序导航
- swipebox.js-不可能以相反的顺序滑动或导航幻灯片