4

Estoy extrayendo datos de una web con una serie de tablas que se cargan con datos segun la pestaña que selecciones y no consigo hacer el 'onclick' correspondiente. El id del elemento cambia aleatoriamente y tambien la propiedad del atributo onclick. Estos son los dos 'onclick' a los que intento acceder:

onclick="clickDashboard('889113733777776')"
onclick="clickDashboard('894967889413237')"

Y este es el fragmento html donde aparece el código referente a las distintas pestañas que he obtenido con la funcion getHTML() de casperjs. Si lo visualizo con crtl+u solo me aparece el código javascript encargado de formar el bloque. En el fragmento se puede observar como el elemnto 'li' esta definicdo con la clase 'activetab' para indicar cual es el visualizado. Aqui dejo el html completo

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

Este es el codigo casperjs con el que intento hacer los onclick:

//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
            }); 
        }
    })    
});

Pero no llego a seleccionar ningun elemento 'li' (que contiene cada pestaña) por lo que menos aún puedo hacer el click sobre él.

1 respuesta 1

2

Tu función tiene un fallo:

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

Debería llamar a tabs[i].click();

Por otro lado, para buscar por id parciales, creo que te faltan las comillas, y no son li sino span:

let elems=document.querySelector('[id^="dbTabLabel_"]');
console.log(elems);
<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>

4
  • Cierto! Pero como nunca consigo seleccionar el bloque con ese selector no entra en el bucle. La cuestión es: ¿porque no consigo seleccionar los bloques 'li' donde su id comienza por 'dbTabLabel'?
    – crossmax
    Commented el 19 mar. 2018 a las 19:12
  • edito para añadir lo de la búsqueda Commented el 19 mar. 2018 a las 20:22
  • No había caido en las comillas, pero algo distinto debe haber cuando cargo en casper la url de la web e intento acceder a esos 'span', porque no los localiza de ninguna manera. Edito la pregunta con el enlace al html completo que obtengo de la web en cuestion. Sea como fuere, muchas gracias por tu tiempo
    – crossmax
    Commented el 20 mar. 2018 a las 10:05
  • Sigo peleándome con esto y he leido [aqui] (github.com/ariya/phantomjs/issues/11679) que se debe seleccionar con una evaluate fuction pero como bien dicen ahí solo te devuelve un objeto valido, el resto te los devuelve como null. Hablan tambien de usar un selector CSS, pero en mi caso, al ser un id aleatorio no puedo seleccionarlo de ese modo. Modifico mi pregunta con el código nuevo que al menos me devuelve una pestaña
    – crossmax
    Commented el 2 abr. 2018 a las 17:48

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.