I am using Nightwatch.js to test a website. I want Nightwatch.js to click on a tab on the website, but the click is not working. At least it does not have an effect...

The HTML code of the element to click on looks like this.

<div>
    <ul id="tabs">
        <li id="tiresTab">
            <a href="#tires">Word</a>
        </li>
    </ul>
</div>

In Nightwatch.js I wrote:

.waitForElementVisible('li[id="tiresTab"]', 10000)
.click('li[id="tiresTab"]')

But nothing happens. The tab is not being opened. And the next mand in Nightwatch is failing. This means that the click is being performed by Nightwatch, but the tab does not open. However I can open the tab when I manually click it. What could be the problem here?

I am using Nightwatch.js to test a website. I want Nightwatch.js to click on a tab on the website, but the click is not working. At least it does not have an effect...

The HTML code of the element to click on looks like this.

<div>
    <ul id="tabs">
        <li id="tiresTab">
            <a href="#tires">Word</a>
        </li>
    </ul>
</div>

In Nightwatch.js I wrote:

.waitForElementVisible('li[id="tiresTab"]', 10000)
.click('li[id="tiresTab"]')

But nothing happens. The tab is not being opened. And the next mand in Nightwatch is failing. This means that the click is being performed by Nightwatch, but the tab does not open. However I can open the tab when I manually click it. What could be the problem here?

• javascript
• html
• testing
• nightwatch.js
• system-testing

Share Follow edited Jul 2, 2015 at 11:35 Garrarufa asked Jul 2, 2015 at 11:25 GarrarufaGarrarufa 1,22511 gold badge1313 silver badges2929 bronze badges 3

• 1 you want to click the <a> not the <li> – Jaromanda X Commented Jul 2, 2015 at 11:29
• 1 your closing tags are all wrong ... </tag> not <\tag> – Jaromanda X Commented Jul 2, 2015 at 11:30
• i typed the closing tags wrong. my fault... but that has nothing to do with my error. i thought i had tried to click the link, not the list element, but indeed thats the solution. i must have done something wrong. thanks for your help. – Garrarufa Commented Jul 2, 2015 at 11:39

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 2

you can do one thing, try the following code and run.

.waitForElementVisible('#tabs li#tiresTab a', 1000);
.click('#tabs li#tiresTab a', function (clickStatus) {
  console.log(clickStatus.status);
});

and if above code doesn't work do one more thing within click call back perform click again like following.

.waitForElementVisible('#tabs li#tiresTab a', 1000);
.click('#tabs li#tiresTab a', function (clickStatus) {
   browser.click('#tabs li#tiresTab a');
   console.log(clickStatus.status);
});

it will work, happy testing!!! :)

<div>
    <ul id="tabs">
        <li id="tiresTab">
            <a href="#tires" name="tires">Word</a>
        </li>
    </ul>
</div>

IN Nightwatch.js You write:

.waitForElementVisible('li[id="tiresTab"]', 10000)
.click('a[name="tires"]')

I think this will work.

Probably you're trying to click an element which isn't visible to the user. For example, you're clicking a dropdown option then -

1. Wait for the dropdown to be visible
2. click on the dropdown, now do the following in a callback :
   1. wait for the dropdown option to be visible (do not mention a full css path!)
   2. now click the dropdown option

A sample code is here -

    .waitForElementVisible('.someClass > .btn-group:nth-child(3)',6000)
    .click('.someClass > .btn-group:nth-child(3)',function(){
        this.waitForElementVisible('#idOfOption',10000);
        this.click('#idOfOption')
    })