Asserting a row in a table by a value

Question

I'm currently developing some e2e tests for an Angular App and I've run into some issues: There's a table, and every row contains a view, edit and delete button in it's last td as such:

<td>
<button ng-click="credentialDetail({id:credential.id})"/>
<button ng-click="update(credential.id)"/>
<button ng-click="delete(credential.id)"/>
</td>

Each row contains a value which is the ID of the displayed object. Is there a way to make protractor click a button in the correct row? I've tried the following with no success.

this.deleteCredential = (function(externalId){
    $$('tr').each(function(rowElm, r) {
        // Traverse cols
        rowElm.$$('td').each(function(cellElm, c) {
            // Workout cell
            if (cellElm.getText() === externalId){

            }
        });
    });
});

P.S. I did have a look at the following question: How to handle table data in Protractor I think the solution here was close, but the nested functions confused me

alecxe · Accepted Answer · 2015-03-16T18:28:43.343

1

You can locate the the delete buttons checking ng-click attribute to start with delete. Then, use evaluate() to evaluate credential.id and check it's value.

Example (locating the delete button):

this.deleteCredential = (function(externalId) {
    var deleteButtons = element.all(by.css('table td button[ng-click^=delete]')).filter(function (button) {
        return button.evaluate('credential.id').then(function (id) {
            return (id === externalId);
        });
    });

    deleteButtons[0].click();
}

edited Mar 16 '15 at 18:28

answered Mar 16 '15 at 10:00

alecxe

462,703
120
1,088
1,195

The problem here is, when I check the HTML source code, it literally says button ng-click="update(credential.id)". It is the same for each row – Tom Nijs Mar 16 '15 at 10:03
We're close, but the 'id' is not getting a value. If it is any help, here is the actual td code: http://pastebin.com/EfNkSf1S – Tom Nijs Mar 16 '15 at 14:15
@TomNijs thanks, can you verify what is the value of `id` in the function? undefined? – alecxe Mar 16 '15 at 14:26
The 'id' you are comparing to 'externalId' is empty throughout the execution of the function. – Tom Nijs Mar 16 '15 at 14:45
@TomNijs please see the update, trying with `filter()`. – alecxe Mar 16 '15 at 18:28

Cherree · Answer 2 · 2015-04-30T11:17:11.903

You could try something like

var someCell = element(by.xpath("//td/button[contains(@ng-click, 'update(ID#)')] "))
someCell.click()

Where you would want to replace the last arg in contains() with the appropriate function/ID number as desired. When you do this you saying "find a button inside of a row that has ng-click with a value including the substring 'update(ID#)' "

You can also use matches(), etc. if you want a different comparison on the property's value. See https://developer.mozilla.org/en-US/docs/Web/XPath/Functions for more

Asserting a row in a table by a value

2 Answers2