How to properly hover the mouse over an element in PhantomJS/CasperJS

问题

In my opinion, a problem of getting dynamic content is really very ambiguous. I tried to find some useful information, used many different code examples, certainly modifying them to my purposes, but unfortunately, without any results(

I need to get some contents from here. Try to explain detailed what are the problems i faced to (need to notice, that all i do is exclusively for my own use!).

Main web site page has main navigation (Main nav pic) list with each list class "menu__category-trigger". Every "menu__category-trigger" has each own dropdown menu container. All these dropdown menu containers have parent wrapper with class "menu__categories-dropdowns". When main page is loaded "menu__categories-dropdowns" is empty, there is no any dropdown menu container there. But when i hover on any "menu__category-trigger", all "menu__categories-dropdowns" appear and stay on page until its reload.

I need to get this content with the help of PhantomJS/CasperJS, but i can't understand how to do that. My code is:

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

My each step is registered in code)

来源：https://stackoverflow.com/questions/38011752/how-to-properly-hover-the-mouse-over-an-element-in-phantomjs-casperjs

标签

javascript

hover

phantomjs

casperjs

slimerjs