为什么 PhantomJS 单击此元素不会产生与手动单击相同的效果？答案

【问题标题】：Why won't a PhantomJS click on this element have the same effect as manually clicking it?为什么 PhantomJS 单击此元素不会产生与手动单击相同的效果？
【发布时间】：2017-10-07 04:29:31
【问题描述】：

如果您访问this site 并单击“攻击”选项卡，下表会更新。我尝试了各种不同的方法在 node-horseman 甚至 PhantomJS 中实现这一点，但没有运气。

这是一个包含问题的简单演示的 repo。任何帮助表示赞赏！

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

重新编辑以添加完整的代码sn-p：

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

补充一点，我还尝试按照here 的描述将原始鼠标单击事件发送到边界矩形。

【问题讨论】：

document.querySelector("li[data-reactid$='attacking'] > span").click() 似乎工作得很好
尝试使用mousedown 然后mouseup 函数来模拟点击怎么样。我对phantom 不是很精通，但这对selenium 来说是必要的。
请提供脚本的完整代码，包括selectorAttacking和metresRunSelector变量。
我用 PhantomJS v2.5 beta 尝试了 Hamm 的选择器，它的工作原理非常棒：i.imgur.com/9U7rnfk.png
嗯，如果你删除你的 cookie 以获得相同的初始状态（我认为 PhantomJS 会在没有预先存在的 cookie 的情况下打开页面），那么你会在底部得到一个黑色的半透明“关于 cookie”覆盖，在一个小窗口（如 PhantomJS 的默认窗口）上，它与您定位的按钮重叠。这件事可能会拦截您的点击。但我看到你有更大的视口，所以也许不是......

标签： javascript phantomjs node-horseman

【解决方案1】：

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

尝试如下改变你的骑手：

添加新常量

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

它应该已经改变了选项卡，但是表格的数据还没有改变。 这表明点击本身不是问题。

所以你应该先等待 react 应用准备好，然后再点击攻击选项卡

【讨论】：

有趣 - 所以您是说 mouseEnter 事件将选项卡置于活动状态，从而连接或启用正确处理单击？这是一个很好的理论。

添加新常量

改变你的wait等待攻击标签变成active

改变你的`wait`等待攻击标签变成`active`