Nightwatch: can't click a checkbox

Created on 13 Feb 2015  Â·  7Comments  Â·  Source: nightwatchjs/nightwatch

I've tried everything to check a checkbox and it seems to just do nothing every time. I have this:

 .verify.visible('.question--current [data-region="choices"] li:nth-child(1) input', 'checkbox is visible')
 .click('.question--current [data-region="choices"] li:nth-child(1) input')

The check box is visible, but it seems to just skip over the .click command. Any ideas?

invalid

Most helpful comment

I just want to say for any future visitors that whether this is a Selenium issue or not, it is a REAL issue. I got this result trying to click a checkbox:

✔ Testing if element <#selectedShippingServiceLevel_100001> is visible.
ERROR: Unable to locate element: "#selectedShippingServiceLevel_100001" using: css selector

trying to click a checkbox with this code:

    this.client
      .assert.visible(input)
      .click(input)

I'm using an id, and I tried inserting pauses without success.

The checkbox is wrapped in its label ( a trick for toggling checkboxes when clicking on a large area ). In the browser, calling $('#selectedShippingServiceLevel_100001').click() works, but executing the same command from Nightwatch does NOT work. This is probably because the input is 'inside' the label and Selenium can't find it for whatever reason.

For my specific case, I eventually got it working by clicking the label directly

    this.client
      .assert.visible(input)
      .click('[for="'+input.substr(1)+'"]')

although before I tried this, I tried executing $('#selectedShippingServiceLevel_100001').parents('label').click() which ALSO did not work.

Basically, this is just super finicky. It'd be cool if it wasn't.

All 7 comments

Try to use a simpler selector or use an 'id' instead. The sample below works for me.

  'Demo Checking A CheckBox': function(browser) {

    var checkBoxId = null;
    var self = browser;

    browser
      .url('http://saucelabs.com/test/guinea-pig/')
      .element('id', 'checked_checkbox', function(response) {
        checkBoxId = response.value.ELEMENT;
        self.elementIdSelected(checkBoxId, function(result) {
          self.assert.equal(result.value, true, 'CheckBox is checked');
        });
      })
      .click('#checked_checkbox', function(args) {
        self.assert.ok(result.status);
      })
      .element('id', 'checked_checkbox', function(response) {
        checkBoxId = response.value.ELEMENT;
        self.elementIdSelected(checkBoxId, function(result) {
          self.assert.equal(result.value, false, 'CheckBox is not checked');
        });
      })
      .end();
  }

Unfortunately I'm in QA and don't have as much control over how the selectors are identified. Would a simpler selector change the way .click worked? I'm doing something very similar to what you have above (my selector is in a var) and it just seems to be a no-op

Would a simpler selector change the way .click worked?

I think it's not the _click_ but the logic used to find the element via given strategy and the more complex the _selector_ the more _brittle_ will be the test.

See the working sample above. The _thing_ that fails your test is (most probably) the _selector_.

my two cents..

ps: maybe you can _introduce/propose_ test-specific data- attributes to your developers.. ?

_Update:_
You could also try to put a _pause_ between the steps ..

Other than creating your own custom commands, the only other way I have found was to click the option value with .click(option[value="11149"]).

I just want to say for any future visitors that whether this is a Selenium issue or not, it is a REAL issue. I got this result trying to click a checkbox:

✔ Testing if element <#selectedShippingServiceLevel_100001> is visible.
ERROR: Unable to locate element: "#selectedShippingServiceLevel_100001" using: css selector

trying to click a checkbox with this code:

    this.client
      .assert.visible(input)
      .click(input)

I'm using an id, and I tried inserting pauses without success.

The checkbox is wrapped in its label ( a trick for toggling checkboxes when clicking on a large area ). In the browser, calling $('#selectedShippingServiceLevel_100001').click() works, but executing the same command from Nightwatch does NOT work. This is probably because the input is 'inside' the label and Selenium can't find it for whatever reason.

For my specific case, I eventually got it working by clicking the label directly

    this.client
      .assert.visible(input)
      .click('[for="'+input.substr(1)+'"]')

although before I tried this, I tried executing $('#selectedShippingServiceLevel_100001').parents('label').click() which ALSO did not work.

Basically, this is just super finicky. It'd be cool if it wasn't.

@iabw thanks to your comment I noticed a same pattern when using radio buttons (also within label elements).

Using a selector like this:

client.click('label[for="gender-m"]'); // choose male

I was also able to make it work.

for anyone having this problem in 2017, almost 2018.

eg.

.pause(500) // because checkboxes can finicky about being checked
.click('#main-box > div.row > div > div > div.panel-body > form > div.checkbox > label > input')

adding a quick pause before the click action seems to be working for me

--
what I'm running tests with:

nightwatch v0.9.19

selenium server standalone v3.8.1

java sdk 9

Google Chrome v62.0.3202.94

Was this page helpful?
0 / 5 - 0 ratings

Related issues

betweenbrain picture betweenbrain  Â·  4Comments

davidlinse picture davidlinse  Â·  4Comments

dakebl picture dakebl  Â·  4Comments

Pieras2 picture Pieras2  Â·  3Comments

Zechtitus picture Zechtitus  Â·  4Comments