Not able to select an element in a table by "editable-checkbox"

Question

Would like to ask for your help with the following scenario:

I need to access a table, select the row that contains the status = 'GOO' then I need to click in a button to activate the edit of this row then I click a at the last column where the check box is located (this check box is responsible to change from False to true the value in the column or vice-versa)

The click at the button I am doing in a function:

    function changeConformStatus(statusCode){
         element(by.id('btnEdit-US.'+statusCode)).click(); 
         browser.sleep(500);
    }

Inside the same function above, I also have the action to click at the checkbox after it is displayed and the click to save it:

         element(by.css('[editable-checkbox="scopeValue.getConformMapping(scopeValue.getDataRow('+'US.'+statusCode+')).conform"]')).click();
         element(by.id('btnSubmit-US.'+statusCode)).click();

All the elements have the Status code after the 'US.' so thats why I am receiving the Status from the test and then passing it directly to the element locator.

My question/problem is... every time I execute the test, it works for the click at the button to edit (located in the first column of the table and same row as the checkbox I want to click) but fails for the checkbox:

"No element found using locator: By(css selector, [editable-checkbox="scopeValue.getConformMapping(scopeValue.getDataRow(US.GOO)).conform"])"

So.. How can I click at this checkBox then?

HTML:

<table id="datatableDir" class="table table-hover  table-bordered table-striped dataTable no-footer" style="width: 100%" role="grid" aria-describedby="datatableDir_info">
<thead>...</thead>
<tbody>
<tr role="row" class="odd">
    <td id="2-4" class="ng-scope">
        <span editable-checkbox="scopeValue.getConformMapping(scopeValue.getDataRow('US.GOO')).conform" e-name="conform" e-form="scopeValue.rowforms['US.GOO']" e-required="" class="ng-scope ng-binding editable editable-hide">false</span>
        <span class="editable-wrap editable-checkbox ng-scope">
            <span class="editable-controls">
                <input type="checkbox" name="conform" required="required" class="editable-input ng-touched ng-dirty ng-valid-parse ng-not-empty ng-valid ng-valid-required" ng-model="$data" style="">
                <div class="editable-error ng-binding ng-hide" ng-show="$error" ng-bind="$error" style=""></div>
            </span>
        </span>
    </td>
</tr>
</tbody>
</table>

UPDATE

@Sanja's answer was 99% correct, I had to do this in order to solve the problem:

element(by.xpath("//*[@editable-checkbox=\"scopeValue.getConformMapping(scopeValue.getDataRow("+'\'US.'+statusCode+"\')).conform\"]/../span/span/input")).click();

here compound class is there so u can click by using class name ng-scope.ng-binding.editable.editable-hide — bhupathi turaga
Hi! thanks for the answer, actually it is not working properly with this class name — Alexandre

Sanja Paskova Sanja Paskova · Accepted Answer · 2018-08-16T10:42:04

According to the code it looks like you want to click the span, not the checkbox. In order to click the checkbox, you'll need to select the input element:

element(by.xpath(".//[@editable-checkbox='scopeValue.getConformMapping(scopeValue.getDataRow('+'US.'+statusCode+')).conform/../span[1]/span/input")).click()

Not able to select an element in a table by "editable-checkbox"

1 Answers