How to click in angular e2e test

Question

I am trying to start to test my angular application, but I don't know how to click on an element. My page uses tabs:

<tabset>
<tab heading="Connect" >
    <h1>Connect</h1>
</tab>
<tab heading="Sign in with Email">
    <h1>Sign in</h1>
</tab>
</tabset>

This perfectly works I am able to manualy click on tabs and switch them. But when I want to run tests click does not work:

describe "sign", () ->
    it "should display tabs", () ->
        browser().navigateTo "/index.html"
        expect(repeater('.nav li').count()).toEqual 2
        expect(element('.nav li:eq(0)').text()).toContain 'Connect'
        expect(element('.nav li:eq(1)').text()).toContain 'Sign in with Email'

    it "should should switch tabs on click", () ->
        browser().navigateTo "/index.html"
        element('.nav li:eq(0)').click()
        expect(element('div.active h1').text()).toContain 'Connect'
        element('.nav li:eq(1)').click()
        expect(element('div.active h1').text()).toContain 'Sign in'

First test passes so angular is able to find navigation buttons, but second test fails. Angular is not able to switch tabs. When I put sleep after second click I can see that tabs are not switched. Error looks like this:

Chrome 32.0.1700 (Linux) sign should should switch tabs on click FAILED
    expect element 'div.active h1' text toContain "Sign in"
    http://localhost:8080/base/test/e2e/sign.js?1389970853000:16:12: expected "Sign in" but was "Connect"
Chrome 32.0.1700 (Linux): Executed 2 of 2 (1 FAILED) (10.378 secs / 9.868 secs)

Any help why this clicks don't work?

Answer 1

Probably the first click doesn't even trigger, and the next-to-last assertion do not fail because 'Connect' is the default value.

Try to find a smarter element on which to click. Be more precise with the selector. If it still doesn't work, can you show the code for the tab directive ?