crossmax
03/04/2018, 11:48
Buenas.
Espero que por aquí alguien experto en javascript me pueda echar una mano con un problemilla que tengo. Uso casperjs que a su vez tira de phantomjs.
Llevo días intentando sacar de una web unos datos de unas tablas, pero para cargar las distintas tablas necesito hacer 'click' en unas pestañas, y no encuentro la manera de hacerlo.
Parece que para poder trabajar sobre los elementos seleccionados en un mismo contexto debo usar la funcion 'evaluate' y de esa manera consigo obtener una lista de las 5 pestañas, pero cuando las recorro solo la primera no es nula. Tiene pinta que el error puede ser por la naturaleza asincrona de js, pero por mas modificaciones que hago siguiendo ejemplos que veo por internet (usar forEach en lugar de for o let en lugar de var), no consigo navegar correctamente por las pestañas para hacer click en ellas.
Este es el codigo js:
var fs = require('fs');
var casper = require('casper').create({
pageSettings: {
loadImages: false,//The script is much faster when this field is set to false
loadPlugins: false,
userAgent: 'Mozilla/5.0 (Windows NT 10.0; WOW64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/44.0.2403.157 Safari/537.36'
}
});
casper.start().thenOpen("http://pc.metalradar.com",
function() {
console.log("MetalRadar website opened");
});
casper.then(function(){
casper.wait(5000, function(){
this.capture('home.png');
var tabs = casper.evaluate(function() {
//return document.querySelectorAll('ul#tabul li');
return document.querySelectorAll('span.dashTitle');
});
console.log('Num Tabs: ' + tabs.length);
for(var i = 0; i < tabs.length; ++i) {
if(tabs[i]) {
console.log('Tab exists');
console.log(' form id: ' + tabs[i].id);
// create a mouse click event
var event = document.createEvent( 'MouseEvents' );
event.initMouseEvent( 'click', true, true, window, 1, 0, 0 );
// send click to element
tabs[i].dispatchEvent( event );
var name = tabs[i].innerText + '.png'
console.log(" " + name);
casper.wait(2000, function(){
console.log(" Capturando...");
this.capture(name); //Make a screenshot for each tab
});
} else {
console.log("Null tab");
}
})
});
Esta es la salida que obtengo:
Num Tabs: 5
Tab exists
form id: dbTabLabel_69451648299582
Dashboard EUR.png
Null tab
Null tab
Null tab
Null tab
Capturando...
Si para el bucle utilizo forEach por el tema de asincronia:
tabs.forEach(function(tab) {
...
})
Me da el siguiente error:
TypeError: undefined is not a function (evaluating 'tabs.forEach'
Este es el fragmento de html que quiero navegar donde las pestañas estan definidas como <li id="dbTab_**********":
<!--TEMPLATES-->
<ul id="tabul">
<li id="litab" class="ntabs add"><a href="" id="addtab" class="osx">+</a></li>
<li id="litab" class="add rightAlign setting-item">
<img src="/Content/images/icons/expand-24x24.png" class="out-triggerer gray" onclick="fullScreen()">
</li>
<li id="default-report-export" class="rightAlign">
<a href="/report/defaultExport" download="">
<input type="image" src="/Content/images/icons/excel.gif" value="Excel" title="Export default report">
</a>
</li>
<li id="default-report-export" class="rightAlign">
<a href="/report/defaultExport?isPdf=true" download="">
<input type="image" src="/Content/images/export-pdf-24x24.png" value="Excel" title="Export default report">
</a>
</li>
<li id="dbTab_889113733777776" class="ntabs addedTab activeTab">
<span id="dbTabLabel_889113733777776" class="dashTitle" onclick="clickDashboard('889113733777776')">Dashboard EUR</span>
<span id="dbTabSettings_889113733777776" class="settingsContainer dashSettings" style="">
<div id="topnav" class="topnav">
<a href="javascript:void(0)" class="signin" onclick="toggleTabSettingsMenu('889113733777776',true);">
<span><img src="/Content/Images/icon_gear.png" alt="Edit"></span>
</a>
</div>
<fieldset id="dbTabSettingsMenu_889113733777776" class="dashSettings-menu">
<ul class="dashboardEditMenu">
<img src="/Content/images/close.png" onclick="toggleTabSettingsMenu('889113733777776',false);" alt="tooltip" style="position:absolute;right:2px;top:2px;border:0;">
<li class="dashboardEditMenuList">
<a href="javascript:void(0)" class="addWidget" onclick="toggleLeftUpdatePanelMenu(true);"> Añadir widgets</a>
</li>
<li class="dashboardEditMenuList">
<a href="javascript:void(0)" class="closeDash" onclick="deleteDashboard('889113733777776')"> Borrar este dashboard</a>
</li>
</ul>
</fieldset>
</span>
</li>
<li id="dbTab_894967889413237" class="ntabs addedTab">
<span id="dbTabLabel_894967889413237" class="dashTitle" onclick="clickDashboard('894967889413237')">Dashboard USD</span>
<span id="dbTabSettings_894967889413237" class="settingsContainer dashSettings" style="display:none;">
<div id="topnav" class="topnav">
<a href="javascript:void(0)" class="signin" onclick="toggleTabSettingsMenu('894967889413237',true);">
<span><img src="/Content/Images/icon_gear.png" alt="Edit"></span>
</a>
</div>
<fieldset id="dbTabSettingsMenu_894967889413237" class="dashSettings-menu">
<ul class="dashboardEditMenu">
<img src="/Content/images/close.png" onclick="toggleTabSettingsMenu('894967889413237',false);" alt="tooltip" style="position:absolute;right:2px;top:2px;border:0;">
...
</ul>
</fieldset>
</span>
</li>
</ul>
Gracias por tragaros el tocho!!!! Si es que llegáis a leer hasta aquí. Espero haya solución a mi dolencia :rolleyes:
Espero que por aquí alguien experto en javascript me pueda echar una mano con un problemilla que tengo. Uso casperjs que a su vez tira de phantomjs.
Llevo días intentando sacar de una web unos datos de unas tablas, pero para cargar las distintas tablas necesito hacer 'click' en unas pestañas, y no encuentro la manera de hacerlo.
Parece que para poder trabajar sobre los elementos seleccionados en un mismo contexto debo usar la funcion 'evaluate' y de esa manera consigo obtener una lista de las 5 pestañas, pero cuando las recorro solo la primera no es nula. Tiene pinta que el error puede ser por la naturaleza asincrona de js, pero por mas modificaciones que hago siguiendo ejemplos que veo por internet (usar forEach en lugar de for o let en lugar de var), no consigo navegar correctamente por las pestañas para hacer click en ellas.
Este es el codigo js:
var fs = require('fs');
var casper = require('casper').create({
pageSettings: {
loadImages: false,//The script is much faster when this field is set to false
loadPlugins: false,
userAgent: 'Mozilla/5.0 (Windows NT 10.0; WOW64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/44.0.2403.157 Safari/537.36'
}
});
casper.start().thenOpen("http://pc.metalradar.com",
function() {
console.log("MetalRadar website opened");
});
casper.then(function(){
casper.wait(5000, function(){
this.capture('home.png');
var tabs = casper.evaluate(function() {
//return document.querySelectorAll('ul#tabul li');
return document.querySelectorAll('span.dashTitle');
});
console.log('Num Tabs: ' + tabs.length);
for(var i = 0; i < tabs.length; ++i) {
if(tabs[i]) {
console.log('Tab exists');
console.log(' form id: ' + tabs[i].id);
// create a mouse click event
var event = document.createEvent( 'MouseEvents' );
event.initMouseEvent( 'click', true, true, window, 1, 0, 0 );
// send click to element
tabs[i].dispatchEvent( event );
var name = tabs[i].innerText + '.png'
console.log(" " + name);
casper.wait(2000, function(){
console.log(" Capturando...");
this.capture(name); //Make a screenshot for each tab
});
} else {
console.log("Null tab");
}
})
});
Esta es la salida que obtengo:
Num Tabs: 5
Tab exists
form id: dbTabLabel_69451648299582
Dashboard EUR.png
Null tab
Null tab
Null tab
Null tab
Capturando...
Si para el bucle utilizo forEach por el tema de asincronia:
tabs.forEach(function(tab) {
...
})
Me da el siguiente error:
TypeError: undefined is not a function (evaluating 'tabs.forEach'
Este es el fragmento de html que quiero navegar donde las pestañas estan definidas como <li id="dbTab_**********":
<!--TEMPLATES-->
<ul id="tabul">
<li id="litab" class="ntabs add"><a href="" id="addtab" class="osx">+</a></li>
<li id="litab" class="add rightAlign setting-item">
<img src="/Content/images/icons/expand-24x24.png" class="out-triggerer gray" onclick="fullScreen()">
</li>
<li id="default-report-export" class="rightAlign">
<a href="/report/defaultExport" download="">
<input type="image" src="/Content/images/icons/excel.gif" value="Excel" title="Export default report">
</a>
</li>
<li id="default-report-export" class="rightAlign">
<a href="/report/defaultExport?isPdf=true" download="">
<input type="image" src="/Content/images/export-pdf-24x24.png" value="Excel" title="Export default report">
</a>
</li>
<li id="dbTab_889113733777776" class="ntabs addedTab activeTab">
<span id="dbTabLabel_889113733777776" class="dashTitle" onclick="clickDashboard('889113733777776')">Dashboard EUR</span>
<span id="dbTabSettings_889113733777776" class="settingsContainer dashSettings" style="">
<div id="topnav" class="topnav">
<a href="javascript:void(0)" class="signin" onclick="toggleTabSettingsMenu('889113733777776',true);">
<span><img src="/Content/Images/icon_gear.png" alt="Edit"></span>
</a>
</div>
<fieldset id="dbTabSettingsMenu_889113733777776" class="dashSettings-menu">
<ul class="dashboardEditMenu">
<img src="/Content/images/close.png" onclick="toggleTabSettingsMenu('889113733777776',false);" alt="tooltip" style="position:absolute;right:2px;top:2px;border:0;">
<li class="dashboardEditMenuList">
<a href="javascript:void(0)" class="addWidget" onclick="toggleLeftUpdatePanelMenu(true);"> Añadir widgets</a>
</li>
<li class="dashboardEditMenuList">
<a href="javascript:void(0)" class="closeDash" onclick="deleteDashboard('889113733777776')"> Borrar este dashboard</a>
</li>
</ul>
</fieldset>
</span>
</li>
<li id="dbTab_894967889413237" class="ntabs addedTab">
<span id="dbTabLabel_894967889413237" class="dashTitle" onclick="clickDashboard('894967889413237')">Dashboard USD</span>
<span id="dbTabSettings_894967889413237" class="settingsContainer dashSettings" style="display:none;">
<div id="topnav" class="topnav">
<a href="javascript:void(0)" class="signin" onclick="toggleTabSettingsMenu('894967889413237',true);">
<span><img src="/Content/Images/icon_gear.png" alt="Edit"></span>
</a>
</div>
<fieldset id="dbTabSettingsMenu_894967889413237" class="dashSettings-menu">
<ul class="dashboardEditMenu">
<img src="/Content/images/close.png" onclick="toggleTabSettingsMenu('894967889413237',false);" alt="tooltip" style="position:absolute;right:2px;top:2px;border:0;">
...
</ul>
</fieldset>
</span>
</li>
</ul>
Gracias por tragaros el tocho!!!! Si es que llegáis a leer hasta aquí. Espero haya solución a mi dolencia :rolleyes: