Skip to main content
se añadieron 3909 caracteres en el cuerpo
Origen Enlace
Pablo Lozano
  • 49.9k
  • 8
  • 55
  • 92

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>

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>

se eliminaron 3190 caracteres en el cuerpo
Origen Enlace
Pablo Lozano
  • 49.9k
  • 8
  • 55
  • 92

El ID está repetido en varias partes del HTML, puedes buscarlo usando algo como lo siguienteTu función tiene un fallo:

let tabId=$('#tabul .ntabs.activeTab fieldset').prop('id');

let id=tabId.split('_')[1];

console.log('id active:', id);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<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>
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();

El ID está repetido en varias partes del HTML, puedes buscarlo usando algo como lo siguiente:

let tabId=$('#tabul .ntabs.activeTab fieldset').prop('id');

let id=tabId.split('_')[1];

console.log('id active:', id);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<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>

 

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();

Origen Enlace
Pablo Lozano
  • 49.9k
  • 8
  • 55
  • 92

El ID está repetido en varias partes del HTML, puedes buscarlo usando algo como lo siguiente:

let tabId=$('#tabul .ntabs.activeTab fieldset').prop('id');

let id=tabId.split('_')[1];

console.log('id active:', id);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<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>