I am extracting data from a web with a series of tables that are loaded with data according to the tab that you select and I can not do the corresponding 'onclick'. The id of the element changes randomly and also the property of the onclick attribute. These are the two 'onclick' that I try to access:
onclick="clickDashboard('889113733777776')"
onclick="clickDashboard('894967889413237')"
And this is the html fragment where the code referring to the different tabs I have obtained with the getHTML () function of casperjs appears. If I visualize it with crtl + u, only the javascript code in charge of forming the block appears. In the fragment it can be seen how the elemnt 'li' is defined with the class 'activetab' to indicate which one is visualized. Here I leave the full html
<!--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>
This is the casperjs code that I try to make onclick with:
//Wait to be redirected to the Home page, and then make a screenshot
casper.then(function(){
casper.wait(5000, function(){
this.capture('home.png');
var tabs = casper.evaluate(function() {
return document.querySelectorAll('span.dashTitle');
}
console.log('Num Tabs: ' + tabs.length););
for(i = 0; i < tabs.length; i++) {
if(tabs[i]) {
console.log('Form exists');
console.log('form id: ' + tabs[i].id);
console.log(tabs[i].innerText);
tabs[i].click()
var name = 'tab' + i + '.png'
this.capture(name); //Make a screenshot for each tab
});
}
})
});
But I do not get to select any element 'li' (which contains each tab) so I can still do less click on it.