title: Testing tab navigation order
body: <p>In one of our tests, we need to make sure that the tab keyboard navigation inside a form is performed in the correct order.  </p>
  
  <p><strong>Question:</strong> What is the conventional way to check the tab navigation order with protractor?</p>
  
  <hr>
  
  <p>Currently we are solving it by repeating the following step for as many input fields existing in a form (code below):</p>
  
  <ul>
  <li>check the <code>ID</code> of the currently focused element (using <a href="https://stackoverflow.com/questions/28679364/asserting-an-element-is-focused"><code>getId()</code></a>)</li>
  <li>send <code>TAB</code> key to the currently focused element</li>
  </ul>
  
  <p>Here is the example spec:</p>
  
  <pre><code>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());
  });
  </code></pre>
  
  <p>where <code>regCodePage</code> is a Page Object:</p>
  
  <pre><code>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;
  </code></pre>
  
  <p>It is working, but it is not really explicit and readable which makes it difficult to maintain. Also, another "smell" in the current approach is a code duplication.</p>
  
  <p>If the current approach is how you would also do it, I would appreciate any insights about making it reusable.</p>