Tuesday, 13 May 2014

CasperJS Kendo UI Tabstrip

Whilst playing with CasperJS I needed a way to mimic pressing a mouse click on a Kendo tabstrip.

I messed around with all kind of selectors but could not get it to work. Fortunately evaluate came to my rescue.

<div id="tabstrip">
    <li>Lm3 Result</li>
    <li>Results by Location</li>
    <li>Payroll Analysis</li>
    <li>Supplier Analysis</li>
    <li>Supplier Breakdown</li>
    <li>Supplier Locations</li>

casper.thenOpen("http://localhost:62726/results", function () {
           "Analyse different elements", "showing analyse different elements");

        //only way I can see to change a tab strip
        casper.evaluate(function () {
            var tabStrip = $("#tabstrip")

This utilises JQuery on the page, finds the kendo tabstrip and then selects the 4th tab item.