单击带有nightmarejs的图像 [英] Clicking an image with nightmarejs

问题描述

在这个问题上，我一直在苦苦挣扎几天。我正在使用nightmarejs点击Ebay产品列表页面上的图像。单击时，图像的完整版本将显示在灯箱中。

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不会单击此图像！我可以点击其他链接，但图像永远不会被点击，因此没有灯箱弹出。这是我想点击的图片：

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:

网址： 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();

我几乎尝试了所有可能的选择器。我也没有收到任何噩梦的例外（如果它找不到选择它会抛出一个）。

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

我真的很难过这个。

推荐答案

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

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.

这是悬停1元素应如下所示：

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

这篇关于单击带有nightmarejs的图像的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！