Clicking an image with nightmarejs

问题

I've been struggling for a few days on this one issue. I am using nightmarejs to click an image on an Ebay product listing page. When clicked, the full-sized version of the image appears in a lightbox.

Nightmarejs just won't click this image! I can click other links, but the image never gets clicked so no lightbox pops-up. This is the image I'm trying to click:

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

Here's my code:

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

I've tried almost every possible selector. I also receive no exception from nightmare (if it can't find the selector it throws one).

I'm truly stumped on this one.

回答1:

There are actually two elements for each hover that you want to make. Also, make sure the element you are hovering is within view or scroll to make it visible.

This is how hover 1 element should look like:

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

来源：https://stackoverflow.com/questions/36175940/clicking-an-image-with-nightmarejs