Having trouble selecting checkboxes

Question

The checkbox on my page looks like this:

<td role="gridcell" style="width: 30px; padding:0;text-align: center;" class="ui-selection-column">
  <div class="ui-chkbox ui-widget">
    <div class="ui-helper-hidden-accessible"><input type="checkbox" name="dataTable_checkbox" aria-checked="false"></div>
    <div class="ui-chkbox-box ui-widget ui-corner-all ui-state-default"><span class="ui-chkbox-icon ui-icon ui-c ui-icon-blank"></span></div>
  </div>
</td>

It's contained in a tbody and tr data.

I'm trying to select it by using

.click('input[id="ui-chkbox ui-widget", type="checkbox"]')

And I already tried using .waitForElementVisible and still couldn't select it.

Thanks.

What do you mean by "select it"? Are you trying to *find* the element or are you trying to mark the input as 'checked'? — Moob, Oct 09 '19 at 19:27
I've only just noticed the 'automated-test' and 'nightwatch' tags. Its not at all clear from your question that what you're actually trying to do is trigger a click event in Nightwatch.js. Your id is wrong but I suspect that `.click('input[name="dataTable_checkbox"]')` will work. — Moob, Oct 09 '19 at 20:34
That also doesn't work. My checkboxes are separated by rows in a table, so every one of them has the same name, but they are in different rows. I don't know how to select a checkbox IN a table. — disconnectedLynx, Oct 10 '19 at 11:11

score 0 · Answer 1 · answered Oct 09 '19 at 19:24

You can't select it because you do not have an input field with id as ui-chkbox ui-widget:

As per your code below:

<td role="gridcell" style="width: 30px; padding:0;text-align: center;" class="ui-selection-column">
  <div class="ui-chkbox ui-widget">
    <div class="ui-helper-hidden-accessible">
      <input type="checkbox" name="dataTable_checkbox" aria-checked="false">
    </div>
    <div class="ui-chkbox-box ui-widget ui-corner-all ui-state-default">
      <span class="ui-chkbox-icon ui-icon ui-c ui-icon-blank"></span>
    </div>
  </div>
</td>

You should use checkbox name in selector

 input:checkbox[name='dataTable_checkbox']

OR

input[type='checkbox'][name='dataTable_checkbox']

OR

input[type='checkbox', name='dataTable_checkbox']

Got multiple " Error while running .locateMultipleElements() protocol action: invalid selector: An invalid or illegal selector was specified" errors and after that, an " NoSuchElementError: An error occurred while running .click() command on :". Did I do it right or is it missing something? — disconnectedLynx, Oct 09 '19 at 19:48

score 0 · Answer 2 · answered Oct 10 '19 at 19:43

To anyone who's whondering on how to select a checkbox in a table, I found a method that works just fine: When you inspect an element, right click on it > copy > copy selector. Paste it with .click ('yourselectorhere') and it should run just fine. Worked for me.

score 0 · Accepted Answer · answered Jan 21 '20 at 06:11

Per your code here:

.click('input[id="ui-chkbox ui-widget", type="checkbox"]')

You are mistakenly identifying the classes ui-chkbox ui-widget as an id. Find the specific id on the page for that checkbox, if there is one, and select it using that. IDs on a page are specific to that element.

.click('#youridhere')

Alternatively, use Xpath and select it by its path containing any text.

.click("//*[contains(text(), 'Checkbox text here')]")

Having trouble selecting checkboxes

3 Answers3