抓取网站。在抓取期间无法自动执行用户点击

Posted 2023-03-05

【中文标题】抓取网站。在抓取期间无法自动执行用户点击

【英文标题】：Scraping Website. Unable automate a user click during scrape

【发布时间】：2016-05-06 08:15:30

【问题描述】：

试图抓取网站。为此，我想自动单击按钮。我似乎无法让按钮执行任何操作。

链接： http://shop.nordstrom.com/s/polo-ralph-lauren-pajama-pants/2849416

网站堆栈：ReactJS、JQueryJS

按钮选择器： #‎product-selection-2849416 > section.color-filter > div > ul > li:nth-child(2) > a > span > span.image-sprite -image.cover > 跨度 > img

尝试

JQuery click、mousedown、touchstart 和 native click...在 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');

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

还有 html 事件...在 Chrome 开发工具控制台中。

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

React Test Utils...通过 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) 
   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 > select').val('Black Royal Oxford').change();

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

想法

想办法在他们的 React 组件中提取 props。它们还包含我想要的数据。还不知道怎么做...

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

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

使用 XPath Clicker。不知道该怎么做。网上找不到很多资源。

结论

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

【问题讨论】：

您使用哪个 PhantomJS 版本？请注册onConsoleMessage、onError、onResourceError、onResourceTimeout 活动 (Example)。也许有错误。众所周知，PhantomJS 2.0.x 会隐藏错误。你可以试试1.9.8，

我使用的是 PhantomJS 2.1.1。对于上述所有测试，我注册了 onConsoleMessage 和 OnError。我有 onResourceRequested 拒绝加载任何图像资源。我在phantomjs.org/api/webpage/handler/on-resource-error.html和phantomjs.org/api/webpage/handler/on-resource-timeout.html中添加了示例代码

我注册了 onResourceError 和 onResourceTimeout。我得到了Unable to load resource (#23URL:) Error code: 301. Description: Protocol "" is unknown。这是在我尝试使用 Phantomjs 向页面发送事件之前并且仅在页面打开期间。

嗯，不知道这是什么意思。尝试增加视口。

我的视口设置在page.viewportSize = width: 1366, height: 768 ;

【参考方案1】：

我稍微调试了他们的代码，看起来他们连接到 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);