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

问题:传统的用 Protractor 检查tab导航顺序的方法是什么？

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

• 检查当前聚焦元素的 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 应该定义一个 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()”方法。 (这对我来说似乎是一个合理的假设，但某些环境可能不支持它。)

我认为这可以很好地隔离 PageObject 上的选项卡顺序(因此很容易与页面内容保持同步，并且不会在验证顺序的代码中丢失)。测试代码看起来“乐观”(我怀疑现实世界会引入足够多的问题，你最终会稍微扩展这段代码)。

我还没有尝试过这些，所以如果这不起作用，请随意投反对票。 :)

此外，我相信 forEach 循环会按原样工作，但如果它需要一些更明确的 promise 处理来明确依赖关系，我不会感到惊讶。

关于javascript - 测试选项卡导航顺序，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/28775989/