17

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.

Community
  • 1
  • 1
Dominic Tracey
  • 767
  • 6
  • 14
  • 1
    `document.querySelector("li[data-reactid$='attacking'] > span").click()` seems to work just fine – Hamms May 09 '17 at 02:27
  • Thanks for looking! Yes - it works in the devtools console, but I'm trying to get it going in a node-horseman or PhantomJS promise chain. Or maybe I'm missing what you are saying? – Dominic Tracey May 09 '17 at 03:04
  • 1
    What about trying to use a `mousedown` and then `mouseup` function to simulate a click. I'm not super well versed with `phantom`, but that's necessary for `selenium`. – RadleyMith May 12 '17 at 15:16
  • Yeah - I couldn't get that to work with a variety of different native events and timings. There's something about triggering a "tabs_transform.click" event that seems to happen when you interact manually that I can't replicate in the headless environment. – Dominic Tracey May 13 '17 at 03:49
  • 1
    Please provide the full code of the script, including `selectorAttacking` and `metresRunSelector` variables. – Christos Lytras May 13 '17 at 08:05
  • 1
    I've tried Hamm's selector with [PhantomJS v2.5](https://bitbucket.org/ariya/phantomjs/downloads/) beta and it worked like a charm: http://i.imgur.com/9U7rnfk.png – Vaviloff May 14 '17 at 19:58
  • 1
    Hmm, if you remove your cookies to get same initial state (I think PhantomJS will open the page without preexisting cookies), then you get a black semi-transparent "About cookies" overlay at the bottom, which, on a small window (like PhantomJS's default), overlaps the button you target. This thing might be intercepting your clicks. But I see you have a bigger viewport, so maybe not... – Hugues M. May 14 '17 at 23:05
  • I'm working on getting node-horseman going with the beta version of Phantom. Will report back! – Dominic Tracey May 15 '17 at 19:21
  • I can confirm that it works with the new 2.5 beta PhantomJS locally. I need to rejigger my docker image to include the new PhantomJS to close out the issue but I'll give the bounty to Vaviloff if you put an answer in. Thanks everyone! – Dominic Tracey May 16 '17 at 03:58
  • use https://github.com/ftlabs/fastclick – F.bernal May 17 '17 at 15:23
  • the site uses react.js, does the page running properly in your Horsemen setup? – am05mhz May 18 '17 at 07:23

1 Answers1

0

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

am05mhz
  • 2,727
  • 2
  • 23
  • 37
  • Interesting - so you are saying that the mouseEnter event puts the tab into the active state which wires up or enables the proper handling of the click? It's a pretty good theory. – Dominic Tracey May 25 '17 at 21:44