Ввод указателя на вкладку навигации

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 должен определить список заказов на табу, поскольку это действительно прямое свойство страницы и должно быть выражено как простые данные. Массив элементов кажется достаточным представлением, так что-то вроде:

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 будет работать как есть, но я не удивлюсь, если ему понадобится более явная обработка обещаний, чтобы сделать зависимости явными.