使用 nightmarejs 单击图像

Posted 2023-03-08

【中文标题】使用 nightmarejs 单击图像

【英文标题】：Clicking an image with nightmarejs

【发布时间】：2016-07-10 14:41:42

【问题描述】：

我已经在这个问题上苦苦挣扎了几天。我正在使用 nightmarejs 单击 Ebay 产品列表页面上的图像。点击后，图片的全尺寸版本会出现在灯箱中。

Nightmarejs 就是不会点击这张图片！我可以点击其他链接，但图像永远不会被点击，所以没有灯箱弹出。这是我要点击的图片：

网址：http://www.ebay.com/itm/Newton-Distance-S-III-Lime-Red-Running-Shoes-Mens-M-New-155/311559183260?hash=item488a5fdb9c&_trkparms=5374%3AFeatured%7C5373%3A0

这是我的代码：

    var Nightmare = require('nightmare');

    var selector1 = '#PicturePanel div.pp-ic.pp-ic500 table tbody tr a#linkMainImg';
    var selector2 = '#PicturePanel div.pp-ic.pp-ic500 table tbody tr a#linkMainImg #mainImgHldr';
    var selector3 = '#PicturePanel div.pp-ic.pp-ic500 table tbody tr a#linkMainImg #mainImgHldr img#icImg';
    var selector4 = '#PicturePanel div.pp-ic.pp-ic500 table tbody tr a#linkMainImg #mainImgHldr #vi_zoom_trigger_mask';
    var selector5 = '#PicturePanel div.pp-ic.pp-ic500 table tbody tr a#linkMainImg #mainImgHldr td.img.img500';
    var selector5 = '#PicturePanel div.pp-ic.pp-ic500 table tbody tr a#linkMainImg #mainImgHldr table.img.img500';
    var selector6 = '#PicturePanel';
    var selector7 = '#PicturePanel div.pp-ic.pp-ic500';
    var selector8 = '#PicturePanel div.pp-ic.pp-ic500 table';
    var selector9 = '#PicturePanel div.pp-ic.pp-ic500 table tbody';
    var selector10 = '#PicturePanel div.pp-ic.pp-ic500 table tbody tr';
    var gallery = '#vi_main_img_fs';

    var run = function() 
        try 
            var nightmare = new Nightmare(show: true);
            nightmare.goto('http://www.ebay.com/itm/Newton-Distance-S-III-Lime-Red-Running-Shoes-Mens-M-New-155/311559183260?hash=item488a5fdb9c&_trkparms=5374%3AFeatured%7C5373%3A0')
            .wait(2000).click(selector1)
            .wait(1000).click(selector2)
            .wait(1000).click(selector3)
            .wait(1000).click(selector4)
            .wait(1000).click(selector5)
            .wait(1000).click(selector6)
            .wait(1000).click(selector7)
            .wait(1000).click(selector8)
            .wait(1000).click(selector9)
            .wait(1000).click(selector10)
            .wait(1000)
            .evaluate(function() 
                return document.documentElement.innerhtml;
            ).end()
            .then(function(html) 
                console.log('html: ', html);
            );
         catch(e) 
            console.log('error: ', e);
        
    ;
    run();

我已经尝试了几乎所有可能的选择器。我也没有收到噩梦的异常（如果它找不到它抛出的选择器）。

我真的被这个难住了。

【问题讨论】：

#vi_zoom_trigger_mask 不可见，除非您将鼠标悬停在它上面...也许您可以尝试一下。

@mihai 没有办法在 nightmarejs 中悬停。

可以做this 吗？如果不是，则可能是库的限制。

@mihai 也尝试过，但无济于事。看起来 nightmarejs 无法处理简单的图像点击 >_>。到下一个图书馆。

【参考方案1】：

实际上，您想要制作的每个悬停都有两个元素。此外，请确保您悬停的元素在视图内或滚动以使其可见。

hover 1 元素应该是这样的：

var Nightmare = require('nightmare');
var nightmare = Nightmare(
  show: true,
  openDevTools: true
)

var selector1 = '#vi_zoom_trigger_mrk > div > table > tbody > tr > td > b';
var selector2 = '#mainImgHldr';
var url =  'http://www.ebay.com/itm/Newton-Distance-S-III-Lime-Red-Running-Shoes-Mens-M-New-155/311559183260?hash=item488a5fdb9c&_trkparms=5374%3AFeatured%7C5373%3A0';

nightmare.goto(url)
  .wait(3000)
  .scrollTo(600, 0) //Scroll to the element as hover might not work
  .evaluate(function(pre, post) 
    var elem = document.querySelector(pre);
    var elemPost = document.querySelector(post);
    console.log(elem);
    var event = document.createEvent('MouseEvent');
    event.initEvent('mouseover', true, true);
    elem.dispatchEvent(event);
    //Waiting for element to appear
    setTimeout(() => elemPost.dispatchEvent(event), 500);
    console.log("Mouse over  will be done");
  , selector2, selector1)
  .then(function() 
    console.log("All Done.");
    //You can call further selectors here
  )
  .catch(function(err) 
    console.log(err);
  )