如何使用红宝石水豚/硒访问复选框

Question

My usual method of obtaining a checkbox doesn't appear to be working here... Basically I have a table with some data in it but the first td is a checkbox. What I am trying to do is click on that checkbox, yet no mater what I do, it seems to not be present on the screen or at least it is not clickable. I've tried using xpath with td[1] , td[1]/input , td[1]/input[@data-role="checkbox"] and a number of other permutations but no luck... I am using SitePrism and within the row already so I should be able to get right to these elements. For example using td[2] with .text gives me Foo no problem... But it is almost as if the checkbox is not there.

Additionally if I try doing all('input').size or all('label').size I am getting 0, which indicates to me that those aren't rendering despite clearly being displayed on the page and inspected via chrome dev tools.

<tr data-uid="123" role="row" class="state-selected" tabindex="1008">
    <td aria-describedby="75e50a2e-9354-43aa-90af-231170f41b4f" role="gridcell">
        <input class="k-checkbox" data-role="checkbox" id="3a3d214a-9e48-4c3e-869d-9821b42ded19" aria-label="Select row" aria-checked="false" type="checkbox" tabindex="-1">
        <label for="3a3d214a-9e48-4c3e-869d-9821b42ded19" class="k-checkbox-label k-no-text">&#8203;</label>
    </td>
    <td class="gridDataString" tabindex="-1" aria-describedby="6e767f1c-78a3-4988-9633-17bcab112766" role="gridcell">
        <span>Foo</span>
    </td>
    <td class="gridDataString" tabindex="-1" aria-describedby="2f654308-1ddb-4f54-a3bf-2d6c36980378" role="gridcell">
        <span>Bar</span>
    </td>
    <td class="gridDataString" tabindex="-1" aria-describedby="3ae4ac0a-e16d-4892-b8ad-a821adeb55ee" role="gridcell">
        <span></span>
    </td>
    <td class="gridDataString" tabindex="-1" aria-describedby="f443994b-3e0f-4e8e-a658-f5efe839bb5e" role="gridcell">
        <span>Foo Barrr</span></td>
    <td class="gridDataString" tabindex="-1" style="display:none" aria-describedby="0f49ae1e-765e-4f99-83b1-46aa3067ac5f" role="gridcell">
        <span ng-bind="dataItem.modelId">0x0000000000004701,0x00000000000811f9,</span>
    </td>
</tr>

Answer 1

I'm guessing the actual checkbox element isn't visible on the page and has been hidden via CSS to replace with an image for styling reasons. Check the styles applied to the actual checkbox element for display: none , opacity: 0 , etc.

To work with this you can either click the label element associated with the checkbox or pass the allow_label_click element to check to have it click the associated label when the actual checkbox is unclickable. Another potential option if there isn't a visible associated label element is to just click the td element - which will trigger a click in the middle of the td which should actually hit the checkbox replacement. Assuming you have the row element already ( tr ) one of the following should work

tr.check(class: 'k-checkbox', allow_label_click: true)
tr.find('label.k-checkbox-label').click

Not as understandable but may work/be necessary in some cases

tr.find('td:first-child').click