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">
  <ul>
    <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>
  </ul>
</div>



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

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


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