javascript - Cómo desplazar el mouse sobre un elemento en PhantomJS/CasperJS
hover slimerjs (0)
En mi opinión, el problema de obtener contenido dinámico es realmente muy ambiguo. Traté de encontrar información útil, utilicé muchos ejemplos de código diferentes, sin duda modificándolos para mis propósitos, pero desafortunadamente, sin ningún resultado (
Necesito obtener algunos contenidos de aquí . Trata de explicar detalladamente cuáles son los problemas que enfrenté (¡tengo que darme cuenta de que todo lo que hago es exclusivamente para mi propio uso!).
La página principal del sitio web tiene una lista de navegación principal (ícono de navegación principal ) con cada clase de lista "menu__category-trigger". Cada "menu__category-trigger" tiene cada uno de los contenedores del menú desplegable. Todos estos contenedores de menú desplegable tienen contenedor primario con clase "menú__categorías-desplegables". Cuando se carga la página principal "menu__categories-dropdowns" está vacía, no hay ningún contenedor de menú desplegable allí. Pero cuando cierro sobre cualquier "menu__category-trigger", todas las "menu__categories-dropdowns" aparecen y permanecen en la página hasta su recarga.
Necesito obtener este contenido con la ayuda de PhantomJS / CasperJS, pero no puedo entender cómo hacerlo. Mi código es:
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();
Mi cada paso está registrado en el código)