为什么PhantomJS点击此元素与手动点击它的效果相同？

Question

如果您访问此站点并单击"攻击"选项卡,则下表将更新.我尝试了各种不同的方法来实现节点骑士甚至PhantomJS,没有运气.

这是一个简单演示问题的回购.任何帮助赞赏!

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

重新编辑以添加完整的代码段:

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();

并补充说,我自己也尝试发射原始鼠标点击事件到边框的描述在这里.

Answer 1

看起来在反应应用程序准备好接收输入之前存在延迟。

尝试按如下方式更改你的骑士：

添加新常量

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

将您的wait等待攻击选项卡更改为active

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

它应该已经更改了选项卡，但表的数据尚未更改。这表明点击本身不是问题。

所以你应该首先等待反应应用程序准备好，然后再单击攻击选项卡