Why won't a PhantomJS click on this element have the same effect as manually clicking it?

Question

If you visit this site and click on the Attacking tab, the table below updates. I've tried various different ways of making this happen in node-horseman and even PhantomJS, with no luck.

Here's a repo with a simple demo of the problem. Any help appreciated!

https://github.com/dominictracey/trn-click-issue.git

RE-EDITED to add complete code snippet:

var Horseman = require('node-horseman')
var horseman = new Horseman()
var rect = {};

const selectorTabs = "ul.tabs.alt"
const selectorAttacking = "li[data-reactid$='attacking'] > span"
const metresRunSelector = "[data-tooltip='Metres Run']"

horseman
    .userAgent('Mozilla/5.0 (Windows NT 6.1; WOW64; rv:27.0) Gecko/20100101 Firefox/27.0')
    .viewport(1920, 1080)
    .on('consoleMessage', function( msg ){
        console.log(msg);
    })
    .open('http://www.espn.co.uk/rugby/playerstats?gameId=290812&league=242041').log()
    .title().log()
    .waitForSelector(selectorAttacking).log('Found attacking tab')
    .screenshot("images/attacking-pre.png")
    .click(selectorAttacking).log('Clicked attacking tab')
    .waitForSelector(metresRunSelector)   // never reaches here
    .screenshot("images/attacking-post.png")
    .catch(function (err) {   //Catch errors and send to error function.
        console.log(err)
    })
    .close();

And to add that I have also tried emitting a raw mouse click event into the bounding rectangle as described here.

Answer 1

it looks like that there is a delay until the react app ready to receive input.

try to change your horseman as follows:

add new constant

const selectorAttackingActive = 'li.active[data-reactid$="attacking"] > span';

change your wait to wait for attacking tab become active

...
.click(selectorAttacking).log('Clicked attacking tab')
.waitForSelector(selectorAttackingActive )   // here is the change
.screenshot("images/attacking-post.png")
...

it should have changed the tab, but the data of the table are not changed yet. this shows that the clicking it-self is not the problem.

so you should first wait for the react app to be ready, before clicking the attack tab