测试选项卡导航顺序

Question

在我们的一个测试中,我们需要确保表单内的选项卡键盘导航以正确的顺序执行.

问题:使用量角器检查选项卡导航顺序的常规方法是什么？

---

目前我们正在通过对表单中存在的尽可能多的输入字段重复以下步骤来解决它(下面的代码):

• 检查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;

它工作正常,但它并不真正明确和可读,这使得难以维护.此外,当前方法中的另一个"气味"是代码重复.

如果您当前采用的方法也是如此,我将非常感谢有关使其可重复使用的任何见解.

Answer 1

我认为PageObject应该定义一个Tab键顺序列表,因为它实际上是页面的直接属性,应该可以表示为简单数据.一系列项目似乎是一个充分的表示,所以类似于:

this.tabOrder = [ this.registrationCode, this.rememberRegistrationCode, this.requestCode, this.cancelButton ];

然后,您需要一些可以检查Tab键顺序的通用代码.

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()"方法.(这对我来说似乎是一个合理的假设,但有些环境可能不支持它.)

我认为这样可以很好地将tab-order保持在PageObject上(因此很容易与页面内容保持同步,并且不会在验证顺序的代码中丢失).测试代码似乎"乐观"(我怀疑现实世界会引入足够的问题,你最终会扩展这段代码).

我还没有尝试过任何这个,所以如果这不起作用,请随时投票.:)

此外,我相信forEach循环将按原样运行,但如果它需要一些更明确的承诺处理来使依赖项显式,我不会感到惊讶.