javascript - 使用 nightmarejs 单击图像

Question

我在这个问题上已经苦苦挣扎了几天。我正在使用 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();

我几乎尝试了所有可能的选择器。我也没有收到 Nightmare 的异常(如果它找不到它抛出的选择器)。

我真的被这个难住了。

Answer 1

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

悬停 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);
  })