0

I need to scrap a web and click on multiple tabs on the web. I'm checking the onclick's attribute value changes randomly and I can't find a way to select each tab. The onclick attribute are: onclick="clickDashboard('889113733777776')" onclick="clickDashboard('894967889413237')"

This is the html fragment I want to try to click on each tab. I get it with getHTML() casprjs function, if I try to copy from source code (crtl+U) I just can see javascript code. You can also see how li tag class is 'activetab' to indicate which tab is displayed. Here link to full html source file

<!--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>

I'm trying select each tab and make a screenshot with this code:

//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 = document.querySelectorAll('[id^=dbTabLabel]');
        var i;
        console.log('Tabs found: ' + tabs.length);
        for(i = 0; i < tabs.length; i++) {
            tabs.click()
            var name = 'tab' + i + '.png'
            this.capture(name); //Make a screenshot for each tab
        }
    })    
});

But it seems that it doesn't select any tab because output is Tabs found: 0

1 Answer 1

1

I recommend using

casper.each(tabs, function(self, tab){

};

Instead a for. Also, in the querySelectorAll use a more generic selector like ul#tabul li. I tried using a for loop inside a casperjs script and always got an error, using each and more generic selectors worked for me every time!

1
  • thanks, but I'm still can't select those li blocks. I'm tested with a more generic selector as you say and tabs is always null. I'm edited original question to add the full html file that I get after login and save with getHTML() casperjs function. I don't know if my problem happens only when I'm scraping "on fly" because of some embedded script. i'm lost with that.
    – crossmax
    Commented Mar 21, 2018 at 20:07

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.