Nightwatch.js does not perform a click on a tab

Question

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 command 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 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, Jul 02 '15 at 11:39

score 2 · Answer 1 · answered Apr 14 '16 at 06:45

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!!! :)

score 1 · Answer 2 · answered Jul 02 '15 at 11:58

<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.

score 1 · Answer 3 · answered Jun 01 '16 at 15:05

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

Wait for the dropdown to be visible
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')
    })

Nightwatch.js does not perform a click on a tab

3 Answers3