Examining the order in which tabs are navigated

Question

Examining the order in which tabs are navigated

Ensuring correct tab keyboard navigation order within a form is crucial for one of our tests.

Query: How can the tab navigation order be verified using protractor?

Our current method involves repeating the following steps for each input field in a form (see code snippet below):

Retrieve the ID of the currently focused element (using getId())
Send the TAB key to the currently focused element

Sample spec:

it("should navigate with tab correctly", function () {
    var regCodePage = new RegCodePage();
    browser.wait(protractor.ExpectedConditions.visibilityOf(regCodePage.title), 10000);

    // Default focus on registration code field
    expect(regCodePage.registrationCode.getId()).toEqual(browser.driver.switchTo().activeElement().getId());

    // Move focus to Remember Registration Code
    regCodePage.registrationCode.sendKeys(protractor.Key.TAB);
    expect(regCodePage.rememberRegistrationCode.getId()).toEqual(browser.driver.switchTo().activeElement().getId());

    // Move focus to Request Code
    regCodePage.rememberRegistrationCode.sendKeys(protractor.Key.TAB);
    expect(regCodePage.requestCode.getId()).toEqual(browser.driver.switchTo().activeElement().getId());

    // Move focus to Cancel
    regCodePage.requestCode.sendKeys(protractor.Key.TAB);
    expect(regCodePage.cancelButton.getId()).toEqual(browser.driver.switchTo().activeElement().getId());

    // Move focus back to the input
    regCodePage.cancelButton.sendKeys(protractor.Key.TAB);
    expect(regCodePage.registrationCode.getId()).toEqual(browser.driver.switchTo().activeElement().getId());
});

Here, regCodePage is a Page Object:

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;

The current approach works, but lacks explicitness and readability, making maintenance challenging. Additionally, there is code duplication present.

If you also use a similar approach, any suggestions for enhancing reusability would be highly appreciated.

javascript testing selenium protractor end-to-end

Answer 1

Answer №1

In my opinion, it would be beneficial for the PageObject to have a tab order list defined as a direct property of the page. This information can easily be expressed as simple data in the form of an array of items. For example:

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

Subsequently, a generic code snippet is needed to verify the tab order.

function testTabOrder(tabOrder) {
    // Assumes TAB order hasn't been modified and the page is on the default element
    tabOrder.forEach(function(el) {
       expect(el.getId()).toEqual(browser.driver.switchTo().activeElement().getId());
       el.sendKeys(protractor.Key.TAB);
    });
}

Following that, your test case could look like this:

it('has correct tab order', function() {
    var regCodePage = new RegCodePage();  // perhaps this should be placed in the beforeEach function
    testTabOrder(regCodePage.tabOrder);
});

This approach assumes that each element has a functioning "getId()" method. While this might seem like a reasonable assumption to make, some environments may not support it.

I find that isolating the tab order within the PageObject makes it easier to synchronize with the page content and prevents it from getting lost amidst the verification code. The testing code appears to be optimistic (although I suspect real-world scenarios may require additional modifications).

Although untested, I welcome feedback or adjustments if needed. :)

Furthermore, I anticipate that the forEach loop will function smoothly, but explicit promise handling may be necessary to clarify dependencies.

Answer 2

In my opinion, it would be beneficial for the PageObject to have a tab order list defined as a direct property of the page. This information can easily be expressed as simple data in the form of an array of items. For example:

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

Subsequently, a generic code snippet is needed to verify the tab order.

function testTabOrder(tabOrder) {
    // Assumes TAB order hasn't been modified and the page is on the default element
    tabOrder.forEach(function(el) {
       expect(el.getId()).toEqual(browser.driver.switchTo().activeElement().getId());
       el.sendKeys(protractor.Key.TAB);
    });
}

Following that, your test case could look like this:

it('has correct tab order', function() {
    var regCodePage = new RegCodePage();  // perhaps this should be placed in the beforeEach function
    testTabOrder(regCodePage.tabOrder);
});

This approach assumes that each element has a functioning "getId()" method. While this might seem like a reasonable assumption to make, some environments may not support it.

I find that isolating the tab order within the PageObject makes it easier to synchronize with the page content and prevents it from getting lost amidst the verification code. The testing code appears to be optimistic (although I suspect real-world scenarios may require additional modifications).

Although untested, I welcome feedback or adjustments if needed. :)

Furthermore, I anticipate that the forEach loop will function smoothly, but explicit promise handling may be necessary to clarify dependencies.

Examining the order in which tabs are navigated

Answer №1

Similar questions

Selenium error: Element not found - Element for login cannot be located

Incorporate a Vue.js computed property into the data retrieved from a server

Utilize a MongoDB query to locate a single document and include a conditional statement within the update operation

Utilizing URL-based conditions in Reactjs

What is the module system that fabric composer utilizes for its logic JavaScript files?

Tips for utilizing identical properties across numerous styled elements:

Navigating through Switch cases and If Statements with multiple arguments can be complex for beginners in the world of JavaScript

Instructions for implementing a "Load More" feature on blogs using either HTML or JavaScript

Creating crypto.createCipheriv arguments from fixed origins

Is there a way to handle templates in AngularJS that is reminiscent of Handlebars?

In the Android Chrome browser, the settings of the meta viewport attribute do not take effect when the device is in full screen mode

React is currently in the process of downloading images that were not fetched during

Strip certain tags from HTML without including iframes

Error: the function is not defined, therefore the variable is being passed

Custom React component - DataGrid

Why is my jQuery clearQueue function malfunctioning?

Having trouble with running `npm start` on a computer that has different versions of Node and

Counting Clicks with the Button Counter

Rearranging div placement based on the width of the screen

A guide on viewing the output of an AJAX request using Python and Selenium