How can I return this checkbox element with Protractor?

Question

I'm writing a Typescript/Protractor test that needs to both evaluate and select checkbox elements on a grid. These checkboxes lack IDs. Since I can get a handle on input elements that reside on the same row as these checkboxes, I'm attempting to get them via a combination of element finders (by.id, by.xpath, and by.css). But my attempts are failing.

What I would like to write is a small function that will return the targeted checkbox element from the row, based on a distant "sibling" element on the row and the checkbox index on the row. I've tried several things, and what I consider the most promising attempts are posted here.

This is a section of markup from the grid that I'm targeting. Several columns of information are omitted for clarity. This is what I'm contending with. It's not within my power to change the markup, I've only been asked to write the Protractor tests.

In this scenario, I have a handle on the input field with an ID of loanLossAssumptionrating3InputField. From here, I need to get other checkboxes from this ui-grid-row. In this example, one checkbox appears near the end of the markup, before the 6 closing div tags.

Over time we've constructed a library of functions, so there is reference to "lib." in this code. That's just a working reference to our library. This piece of code is in a pageObject.

lib.getCheckboxInRow(fields.ratingFieldId, 0).then(function (checkboxElement) {
   // The fields.ratingFieldId value = "loanLossAssumptionrating3InputField"
   checkboxElement.click();
});

This is just a "click" attempt, but I'll also need to get that element and determine if the checkbox is clicked. And in my case the only way to do that via the markup is to read an attribute in the parent element. I know how to do that, but am providing this detail to illustrate why I'm attempting to return the element itself.

Here is my targeted function. Two attempts are shown below. Both of these failed. This is in my library.

// Attempt A
public getCheckboxInRow(siblingElementId: string, checkboxIndex: number): webdriver.promise.Promise {
    var xPathToRow : string = "./ancestor::div[contains(concat(' ', @class, ' '), ' ui-grid-row ')][1]";
    return element(by.id(siblingElementId)).element(by.xpath(xPathToRow)).then(function (row) {
        return row.all(by.css("input[@type='checkbox']")).filter.then(function (checkboxArray) {
            return checkboxArray[checkboxIndex];
        });
    });
}

// Attempt B
public getCheckboxInRow(siblingElementId: string, checkboxIndex: number): webdriver.promise.Promise {
    var xPathToRow : string = "./ancestor::div[contains(concat(' ', @class, ' '), ' ui-grid-row ')][1]";
    var cssToCheckbox : string = "input[@type='checkbox']";
    return element(by.id(siblingElementId)).element(by.xpath(xPathToRow)).all(by.css(cssToCheckbox)).filter(function(checkbox) {
        return true;
    }).then(function (checkboxArray) {
        return checkboxArray[checkboxIndex];
    });
}

With "Attempt A" the following error occurs.

TypeError: element(...).element(...).then is not a function

The error was more dramatic with "Attempt B".

InvalidSelectorError: invalid selector: An invalid or illegal selector was specified (Session info: chrome=47.0.2526.111) (Driver info: chromedriver=2.19.346078 (6f1f0cde889532d48ce8242342d0b84f94b114a1),platform=Windows NT 6.3 x86_64) (WARNING: The server did not provide any stacktrace information) Command duration or timeout: 30 milliseconds For documentation on this error, please visit: http://seleniumhq.org/exceptions/invalid_selector_exception.html Build info: version: '2.47.1', revision: '411b314', time: '2015-07-30 03:03:16' System info: host: 'PSIDEVKPALM', ip: '10.226.128.27', os.name: 'Windows Server 2012 R2', os.arch: 'x86', os.version: '6.3', java.version: '1.8.0_66' Driver info: org.openqa.selenium.chrome.ChromeDriver Capabilities [{applicationCacheEnabled=false, rotatable=false, mobileEmulationEnabled=false, chrome={userDataDir=C:\Users\kpalmer\AppData\Local\Temp\2\scoped_dir7352_8503}, takesHeapSnapshot=true, databaseEnabled=false, handlesAlerts=true, hasTouchScreen=false, version=47.0.2526.111, platform=WIN8_1, browserConnectionEnabled=false, nativeEvents=true, acceptSslCerts=true, locationContextEnabled=true, webStorageEnabled=true, browserName=chrome, takesScreenshot=true, javascriptEnabled=true, cssSelectorsEnabled=true}] Session ID: 12959162beeed374185734ef29b03b57 *** Element info: {Using=css selector, value=input[@type='checkbox']}

Having spent many hours working on this, I'm at a loss as to why these fail.

Ultimately what I want is a function that will return a checkbox element that is positioned on the same row as another element inside that row, based on the checkbox index, so that we can either click the checkbox or determine if that element is checked or unchecked.

Thanks for your help.

=== Edit 1/2/2016 afternoon ===

Thank you @alecxe, you were a huge help. Here are the final implementations that I ran with. Both of these approaches work.

Either of these will work in my pageObject.

lib.getCheckboxInRow(fields.ratingFieldId, 0).click();

lib.getCheckboxArrayInRow(fields.ratingFieldId).filter(function (checkboxArray, index) {
    return (index === 0);
}).first().click();

And these are the targeted functions in the library. One thing that I had to adjust was the return type, from the promise to the element finder. These work like a champ.

public getCheckboxInRow(siblingElementId: string, checkboxIndex: number): protractor.ElementFinder {
    var xPathToRow : string = "./ancestor::div[contains(concat(' ', @class, ' '), ' ui-grid-row ')][1]";
    return element(by.id(siblingElementId)).element(by.xpath(xPathToRow)).all(by.css("input[type=checkbox]")).filter(function (checkboxArray, index) {
        return index === checkboxIndex;
    }).first();
};

public getCheckboxArrayInRow(siblingElementId: string): protractor.ElementArrayFinder {
    var xPathToRow : string = "./ancestor::div[contains(concat(' ', @class, ' '), ' ui-grid-row ')][1]";
    return element(by.id(siblingElementId)).element(by.xpath(xPathToRow)).all(by.css("input[type=checkbox]"));
};

alecxe · Accepted Answer

Let's review your attempts.

Attempt A

You are getting the TypeError: element(...).element(...).then is not a function error since you cannot resolve an ElementFinder with then() since Protractor 2.0.0 (changelog).

You can just continue chaining element and all() in this case:

public getCheckboxInRow(siblingElementId: string, checkboxIndex: number): webdriver.promise.Promise {
    var xPathToRow : string = "./ancestor::div[contains(concat(' ', @class, ' '), ' ui-grid-row ')][1]";
    return element(by.id(siblingElementId)).element(by.xpath(xPathToRow)).all(by.css("input[type=checkbox]")).filter(function (checkboxArray, index) {
        return index === checkboxIndex;
    }).first();
}

I've also fixed the way you apply the filter() function. And note the first() call - this would help us to get a single filtered element and not an array.

Attempt B

You are getting the An invalid or illegal selector was specified error since you actually have an invalid CSS selector input[@type='checkbox'] - you don't need to prepend @ to attribute names in CSS - replace it with input[type=checkbox] (no need for single quotes too).

And, you don't apply the filter() function correctly in this attempt too. Fixed version:

public getCheckboxInRow(siblingElementId: string, checkboxIndex: number): webdriver.promise.Promise {
    var xPathToRow : string = "./ancestor::div[contains(concat(' ', @class, ' '), ' ui-grid-row ')][1]";
    var cssToCheckbox : string = "input[type=checkbox]";
    return element(by.id(siblingElementId)).element(by.xpath(xPathToRow)).all(by.css(cssToCheckbox)).filter(function(checkbox, index) {
        return checkboxIndex === index;
    }).first();
}

which is essentially becoming the same as Attempt A.

How can I return this checkbox element with Protractor?

Answers (1)

Related Questions