CODEWITHSUNDEEP
javascriptnightwatch.jsbrowser-automation
Deepal
Deepal

Reputation: 1814

Nightwatch.js clicks on nested anchor when told to clicking on checkbox label

I have a checkbox, with a text including a link as follows:

<div id="agreementDiv" class="cust-pad-bot1">
  <input id="inputAgreement" type="checkbox">
  <label for="inputAgreement">I have read and agree to the <a target="_blank" href="http://example.com/terms-and-conditions"><u>Terms &amp; Conditions</u></a></label>
</div>

(Please note that this snippet is only a sketch of the actual implementation. CSS classes are removed.)

Using Nightwatch.js I want to automate checking the checkbox. In my UI, clicking on the label text subsequently checks the checkbox. 

browser
.useXpath()
.waitForElementPresent(`//*[@id="agreementDiv"]/label`, 10000)
.click(`//*[@id="agreementDiv"]/label`)

But when I try to do it using Nightwatch, it clicks on the link and the link is opened in a new tab. But the checkbox is not clicked. Clicking directly on the checkbox using css/xpath does not work either. I appreciate if anyone can explain how to prevent nightwatch from clicking on the child anchor.

Thank you.

Upvotes: 0

Views: 861

Answers (2)

Deepal
Deepal

Reputation: 1814

I found a solution using nightwatch-custom-commands-assertions third party module (https://github.com/maxgalbu/nightwatch-custom-commands-assertions). This module adds a set of custom nightwatch commands and among these there was jqueryClick function (https://github.com/maxgalbu/nightwatch-custom-commands-assertions). I called this function providing the xpath of the checkbox and it worked well. Use of the default click function didn't work for me on the checkbox.

Upvotes: 0

Niraj Tathe
Niraj Tathe

Reputation: 191

You have written the code to click on label not on checkbox. Change the xpath. But use method browser.useXpath(); before you use xpath selector.

    browser
.waitForElementPresent(`//*[@id="agreementDiv"]/input`, 10000)
.click(`//*[@id="agreementDiv"]/input`)

By using css selector (default selector in nightwatch):

    browser
.waitForElementPresent(`#agreementDiv>input`, 10000)
.click(`#agreementDiv>input`)

This should solve your problem. If you click on checkbox, checkbox will be selected.

Upvotes: 0

Related Questions