如何将鼠标正确悬停在PhantomJS / CasperJS

时间:2016-06-24 10:56:37

标签: javascript hover phantomjs casperjs slimerjs

在我看来,获取动态内容的问题确实很模糊。我试图找到一些有用的信息,使用了许多不同的代码示例,肯定会根据我的目的修改它们,但不幸的是,没有任何结果(

我需要从here获取一些内容。试着详细解释我面临的问题(需要注意的是,我所做的只是我自己使用的!)。

主网站页面具有主导航(Main nav pic)列表,每个列表类“menu__category-trigger”。每个“menu__category-trigger”都有自己的下拉菜单容器。所有这些下拉菜单容器都有父包装器,类为“menu__categories-dropdowns”。加载主页面时“menu__categories-dropdowns”为空,那里没有任何下拉菜单容器。但当我将鼠标悬停在任何“menu__category-trigger”上时,所有“menu__categories -downdown”都会出现并保持在页面上直到重新加载。

我需要在PhantomJS / CasperJS的帮助下获取此内容,但我无法理解如何做到这一点。我的代码是:

var casper = require('casper').create({
    verbose: true,
    logLevel: 'error',
    pageSettings: {
        userAgent: 'Mozilla/5.0 (Macintosh; Intel Mac OS X 10_7_5) AppleWebKit/537.4 (KHTML, like Gecko) Chrome/22.0.1229.94 Safari/537.4',
    },
    viewportSize: {
        width: 1440,
        height: 5000
    }
});

var url = 'http://www.lamoda.ru/women-home/';

var links = []; 

function getLinks() {
    var links = document.querySelectorAll('.menu__column a');
    return Array.prototype.map.call(links, function(e) {
        return e.getAttribute('data-link');
    })
};

casper.start(url, function() {
    this.echo(this.getTitle());
    this.echo("Got title");
});

casper.wait(2000, function() {
    this.echo("I have waited for two seconds...");
});

casper.then( function() {
    this.mouse.click('.popup__close'); // Doing screenshot of the page, i saw that sometimes a popup appears and blocks a possibility of hovering "menu__category-trigger"
    this.echo("Popup closed");
});

casper.waitForSelector('.menu__categories-dropdowns', function(){ // main dropdowns container
    console.log('Dropdown selector is loaded');
});

casper.then( function() {
    casper.page.injectJs('./jquery-2.0.3.min.js');
    this.evaluate(function () {
        //$('body').attr('class', 'not-touch').addClass('user-unauthorized');
        $('.menu__category-trigger').hover( function(){
            $(this).toggleClass('menu__category-trigger_active'); // On original page hovering ".menu__category-trigger" adds it additional class ".menu__category-trigger_active" with the appearance of dropdowns
        });
     });
    this.mouse.down('.menu__category-trigger:nth-of-type(2)'); // Hover on some navigation div
    console.log('Injected JS, Nav item hovered');
});

casper.wait(5000, function() {
    this.echo("I have waited for five seconds..."); // THE MAIN "WAIT" FUNCTION, i try to wait for each dropdown after hovering my navigation div (".menu__category-trigger"), but without any result
});

casper.then( function() {
    this.capture('google.jpg', {
        top: 0,
        left: 0,
        width: 1440,
        height: 5000
    });
    console.log('Screenshot done'); // On made screenshot i see that mouse is really moved on ".menu__category-trigger:nth-of-type(2)", because it changed its text color like on original page
});

casper.then( function() {
    this.echo(this.getPageContent());
    links = this.evaluate(getLinks);
});

casper.then( function() {
    this.echo(links.length + ' links found:');
    this.echo('-' + links.join('\n -')).exit() ;
});

casper.run();

我的每一步都在代码中注册)

0 个答案:

没有答案