Javascript 刮网站。无法在刮取过程中自动执行用户单击

正在尝试刮取网站。为了做到这一点，我想自动点击一个按钮。我好像什么事也做不到

链接：

网站堆栈：ReactJS，JQueryJS

按钮选择器：#‎产品‬-selection-2849416>section.color-filter>div>ul>li:n子项（2）>a>span>span.image-sprite-image.cover>span>img

尝试

JQuery单击、鼠标向下、touchstart和本机单击。。。在Chrome开发工具控制台中

$("‪#‎product‬-selection-2849416 > section.color-filter > div > ul > li:nth-child(2) > a > span > span.image-sprite-image.cover > span > img").click()

$("#product-selection-2849416 > section.color-filter > div > ul > li:nth-child(2) > a > span > span.image-sprite-image.cover > span > img")[0].click()

$("#product-selection-2849416 > section.color-filter > div > ul > li:nth-child(2) > a > span > span.image-sprite-image.cover > span > img").mousedown()

$('#product-selection-2849416 > section.color-filter > div > ul > li:nth-child(2) > a > span > span.image-sprite-image.cover > span > img').trigger('touchstart');

var elem = $("#product-selection-2849416 > section.color-filter > div > ul > li:nth-child(2) > a > span > span.image-sprite-image.cover > span > img")[0];
var evt = document.createEvent("MouseEvents");
var center_x = 1, center_y = 1;
try {
    var pos = elem.getBoundingClientRect();
    center_x = Math.floor((pos.left + pos.right) / 2);
    center_y = Math.floor((pos.top + pos.bottom) / 2);
} catch(e) {}
evt.initMouseEvent('click', true, false, window, 1, 1, 1, center_x, center_y, false, false, false, false, 0, elem);

$('#product-selection-2849416 > section.color-filter > div > select').val('Black Royal Oxford').change();

$('#product-selection-2849416 > section.color-filter > div > select').val('Black Royal Oxford').trigger('change');

PhantomJS sendEvent函数。。。通过PhantomJS无头浏览器

var webpage = require('webpage');
var page = webpage.create();
var href = "http://shop.nordstrom.com/s/polo-ralph-lauren-pajama-pants/2849416";
page.open(href, function (status) {
    var elem = "#product-selection-2849416 > section.color-filter > div > ul > li:nth-child(2) > a > span > span.image-sprite-image.cover > span > img";
    var rect = page.evaluate(function(elem) {
        return $(elem)[0].getBoundingClientRect();
    }, elem);

    function computeCenter(bounds) {
        var x = Math.round(bounds.left + bounds.width / 2);
        var y = Math.round(bounds.top  + bounds.height / 2);
        return [x, y];
    }

    var cor = computeCenter(rect);
    page.sendEvent('click', cor.x, cor.y, 'left');
    setTimeout(function() {
        page.render('websiteAfterClick.png');
        page.close();
    }, 1000);
}

var webpage = require('webpage');
var page = webpage.create();
var href = "http://shop.nordstrom.com/s/polo-ralph-lauren-pajama-pants/2849416";
page.open(href, function (status) {
   page.includeJs("https://cdnjs.cloudflare.com/ajax/libs/react/0.14.6/react-with-addons.js", function() {
        var elem = "#product-selection-2849416 > section.color-filter > div > ul > li:nth-child(2) > a > span > span.image-sprite-image.cover > span > img";
        page.evaluate(function(elem) {
            React.addons.TestUtils.Simulate.click($(elem)[0]);
        }, elem);

        setTimeout(function() {
            page.render('websiteAfterClick.png');
            page.close();
        }, 1000);
    });
}

和HTML事件。。。在Chrome开发工具控制台中

$("‪#‎product‬-selection-2849416 > section.color-filter > div > ul > li:nth-child(2) > a > span > span.image-sprite-image.cover > span > img").click()

$("#product-selection-2849416 > section.color-filter > div > ul > li:nth-child(2) > a > span > span.image-sprite-image.cover > span > img")[0].click()

$("#product-selection-2849416 > section.color-filter > div > ul > li:nth-child(2) > a > span > span.image-sprite-image.cover > span > img").mousedown()

$('#product-selection-2849416 > section.color-filter > div > ul > li:nth-child(2) > a > span > span.image-sprite-image.cover > span > img').trigger('touchstart');

var elem = $("#product-selection-2849416 > section.color-filter > div > ul > li:nth-child(2) > a > span > span.image-sprite-image.cover > span > img")[0];
var evt = document.createEvent("MouseEvents");
var center_x = 1, center_y = 1;
try {
    var pos = elem.getBoundingClientRect();
    center_x = Math.floor((pos.left + pos.right) / 2);
    center_y = Math.floor((pos.top + pos.bottom) / 2);
} catch(e) {}
evt.initMouseEvent('click', true, false, window, 1, 1, 1, center_x, center_y, false, false, false, false, 0, elem);

$('#product-selection-2849416 > section.color-filter > div > select').val('Black Royal Oxford').change();

$('#product-selection-2849416 > section.color-filter > div > select').val('Black Royal Oxford').trigger('change');

反应测试用例。。。通过PhantomJS无头浏览器

var webpage = require('webpage');
var page = webpage.create();
var href = "http://shop.nordstrom.com/s/polo-ralph-lauren-pajama-pants/2849416";
page.open(href, function (status) {
    var elem = "#product-selection-2849416 > section.color-filter > div > ul > li:nth-child(2) > a > span > span.image-sprite-image.cover > span > img";
    var rect = page.evaluate(function(elem) {
        return $(elem)[0].getBoundingClientRect();
    }, elem);

    function computeCenter(bounds) {
        var x = Math.round(bounds.left + bounds.width / 2);
        var y = Math.round(bounds.top  + bounds.height / 2);
        return [x, y];
    }

    var cor = computeCenter(rect);
    page.sendEvent('click', cor.x, cor.y, 'left');
    setTimeout(function() {
        page.render('websiteAfterClick.png');
        page.close();
    }, 1000);
}

var webpage = require('webpage');
var page = webpage.create();
var href = "http://shop.nordstrom.com/s/polo-ralph-lauren-pajama-pants/2849416";
page.open(href, function (status) {
   page.includeJs("https://cdnjs.cloudflare.com/ajax/libs/react/0.14.6/react-with-addons.js", function() {
        var elem = "#product-selection-2849416 > section.color-filter > div > ul > li:nth-child(2) > a > span > span.image-sprite-image.cover > span > img";
        page.evaluate(function(elem) {
            React.addons.TestUtils.Simulate.click($(elem)[0]);
        }, elem);

        setTimeout(function() {
            page.render('websiteAfterClick.png');
            page.close();
        }, 1000);
    });
}

骇人的尝试。该网站具有一个选择功能，与我要单击的按钮具有相同的选项。。。。在Chrome开发工具控制台中

$("‪#‎product‬-selection-2849416 > section.color-filter > div > ul > li:nth-child(2) > a > span > span.image-sprite-image.cover > span > img").click()

$("#product-selection-2849416 > section.color-filter > div > ul > li:nth-child(2) > a > span > span.image-sprite-image.cover > span > img")[0].click()

$("#product-selection-2849416 > section.color-filter > div > ul > li:nth-child(2) > a > span > span.image-sprite-image.cover > span > img").mousedown()

$('#product-selection-2849416 > section.color-filter > div > ul > li:nth-child(2) > a > span > span.image-sprite-image.cover > span > img').trigger('touchstart');

var elem = $("#product-selection-2849416 > section.color-filter > div > ul > li:nth-child(2) > a > span > span.image-sprite-image.cover > span > img")[0];
var evt = document.createEvent("MouseEvents");
var center_x = 1, center_y = 1;
try {
    var pos = elem.getBoundingClientRect();
    center_x = Math.floor((pos.left + pos.right) / 2);
    center_y = Math.floor((pos.top + pos.bottom) / 2);
} catch(e) {}
evt.initMouseEvent('click', true, false, window, 1, 1, 1, center_x, center_y, false, false, false, false, 0, elem);

$('#product-selection-2849416 > section.color-filter > div > select').val('Black Royal Oxford').change();

$('#product-selection-2849416 > section.color-filter > div > select').val('Black Royal Oxford').trigger('change');

想法

找出一种方法来提取其反应组件中的道具。它们还包含我想要的数据。还不知道怎么做

使用WebDriver和Selenium创建单击。不确定与PhantonJS的集成

找到与click处理程序关联的函数，并尝试调用它。正在做这个

使用XPath点击器。不知道怎么做。在网上找不到很多资源

结论

---

这里有人能帮我吗？不知道还有什么可以尝试。

我调试了一下他们的代码，看起来他们连接到mousedown/up而没有单击。下面的代码应该有效：

    var el = jQuery("#product-selection-2849416 > section.color-filter > div > ul > li:nth-child(2) > a > span > span.image-sprite-image.cover > span > img")[0];

    var evtMouseDown = new MouseEvent("mousedown", {
    bubbles: true, cancelable: true, cancelBubble: false,
    defaultPrevented: false, isTrusted: true,
    button: 0,buttons: 1, which: 1, view: window
    });
    var evtMouseUp = new MouseEvent("mouseup", {
    bubbles: true, cancelable: true, cancelBubble: false,
    defaultPrevented: false, isTrusted: true,
    button: 0, buttons: 1, which: 1, view: window
    });

    el.dispatchEvent(evtMouseDown);
    el.dispatchEvent(evtMouseUp);

---

您使用哪个PhantomJS版本？请注册到

OnConsolleMessage

，

onError

，

onResourceError

，

onResourceTimeout

事件（）。也许有错误。已知PhantomJS 2.0.x会隐藏错误。你可以试试1.9.8，我使用的是PhantomJS2.1.1。对于上述所有测试，我都注册了OnConsolleMessage和OnError。我已请求OnResource拒绝加载任何图像资源。我在中添加了示例代码，并注册了onResourceError和onResourceTimeout。我得到

无法加载资源（#23URL:）错误代码：301。描述：协议“”未知

。这是在我尝试使用Phantomjs向页面发送事件之前，并且仅在页面打开期间。嗯，不知道这意味着什么。尝试增加视口。我的视口设置为

page.viewportSize={宽度：1366，高度：768}