Seeking assistance with the following situation:
I am trying to access a table, locate the row where the status is 'GOO', and then activate the editing of this row by clicking on a button. After that, I need to click on a checkbox in the last column to toggle its value between true and false.
The button click is handled within a function:
function changeConformStatus(statusCode){
element(by.id('btnEdit-US.'+statusCode)).click();
browser.sleep(500);
}
In the same function, I also have the code to click on the checkbox once it is visible and then save the changes:
element(by.css('[editable-checkbox="scopeValue.getConformMapping(scopeValue.getDataRow('+'US.'+statusCode+')).conform"]')).click();
element(by.id('btnSubmit-US.'+statusCode)).click();
All elements contain the Status code after 'US.', hence why I pass the Status directly to the element locator from the test data.
However, my problem arises when trying to click on the checkbox - the test fails with the message: "No element found using locator..."
So, how can I successfully click on this checkbox?
HTML snippet:
<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
The solution provided by @Sanja was almost correct, I made the following adjustment to resolve the issue:
element(by.xpath("//*[@editable-checkbox=\"scopeValue.getConformMapping(scopeValue.getDataRow("+'\'US.'+statusCode+"\')).conform\"]/../span/span/input")).click();