casperJS css selectors: waitFor function always times out
<p>I am writing an automated login test and want to assert that I've logged into the page succesfully, and then take a screenshot of the page.</p>

<p>The DOM I am trying to acces looks like this:</p>

<pre><code>&lt;div class="form-group hidden-xs"&gt;
    &lt;ul class="nav navbar-nav navbar-left logged-menu"&gt; &lt;strong class="pull-left"&gt;&lt;font&gt;&lt;font&gt;Welcome,&lt;/font&gt;&lt;/font&gt; &lt;/strong&gt; 
        &lt;li&gt;
            &lt;a href="/usuario"&gt; &lt;i class="glyphicon glyphicon-user"&gt;&lt;/i&gt;
                &lt;span class="hidden-xs"&gt;
                    &lt;font&gt;&lt;font class=""&gt;tocijan&lt;/font&gt;&lt;/font&gt; 
                &lt;/span&gt;
            &lt;/a&gt;
        &lt;/li&gt;
        &lt;li&gt;
            &lt;div class="btn-group balance"&gt;
                &lt;button type="button" class="btn btn-danger btn-xs"&gt;
                    &lt;span id="balance_info"&gt;
                        &lt;font&gt;
                            &lt;font&gt;$ 178,345.79&lt;/font&gt;
                        &lt;/font&gt;
                    &lt;/span&gt;
                &lt;/button&gt;
                &lt;button type="button" class="btn btn-danger btn-xs dropdown-toggle" data-toggle="dropdown" aria-expanded="false"&gt;
                    &lt;span class="caret"&gt;&lt;/span&gt;
                    &lt;span class="sr-only"&gt;
                        &lt;font&gt;
                            &lt;font&gt;Toggle Dropdown&lt;/font&gt;
                        &lt;/font&gt;
                    &lt;/span&gt;
                &lt;/button&gt;
                &lt;ul class="dropdown-menu" role="menu"&gt;
                    &lt;li&gt;
                        &lt;font&gt;
                            &lt;font&gt;Bonus:&lt;/font&gt;
                        &lt;/font&gt;
                        &lt;span id="hdnBonus"&gt;
                            &lt;font&gt;
                                &lt;font&gt;$ 0.00&lt;/font&gt;
                            &lt;/font&gt;
                        &lt;/span&gt;
                    &lt;/li&gt;
                    &lt;li class="divider"&gt;&lt;/li&gt;
                    &lt;li&gt;
                        &lt;font&gt;
                            &lt;font&gt;Extractable:&lt;/font&gt;
                        &lt;/font&gt;
                        &lt;span id="real_info"&gt;
                            &lt;font&gt;
                                &lt;font&gt;$ 178,345.79&lt;/font&gt;
                            &lt;/font&gt;
                        &lt;/span&gt;
                    &lt;/li&gt;
                    &lt;li class="divider"&gt;&lt;/li&gt;
                    &lt;li&gt;
                        &lt;font&gt;
                            &lt;font&gt;Reserved Bonus:&lt;/font&gt;
                        &lt;/font&gt;
                        &lt;span id="resbon_info"&gt;
                            &lt;font&gt;
                                &lt;font&gt;$ 100.00&lt;/font&gt;
                            &lt;/font&gt;
                        &lt;/span&gt;
                    &lt;/li&gt;
                &lt;/ul&gt;
            &lt;/div&gt;
        &lt;/li&gt;
        &lt;li&gt;
            &lt;a href="/LoginPartial/Logoff?n2page=466&amp;amp;n2part=799"&gt; &lt;i class="glyphicon glyphicon-arrow-left"&gt;&lt;/i&gt;
                &lt;font&gt;
                    &lt;font&gt;Get out&lt;/font&gt;
                &lt;/font&gt;
            &lt;/a&gt;
        &lt;/li&gt;
    &lt;/ul&gt;
    &lt;div class="clr"&gt;&lt;/div&gt;
&lt;/div&gt;
</code></pre>

<p>I want to assert that this element:</p>

<pre><code>&lt;a href="/usuario"&gt;&lt;i class="glyphicon glyphicon-user"&gt;&lt;/i&gt;&lt;span class="hidden-xs"&gt;&lt;font&gt;&lt;font class=""&gt;tocijan&lt;/font&gt;&lt;/font&gt;&lt;/span&gt;&lt;/a&gt;
</code></pre>

<p>Has the innerHTML (or text) of <code>tocijan</code>.</p>

<p>I've written my wait for function like this, but it always times out:</p>

<pre><code>//waitfor function
this.waitFor(function check() {
    //evaluate if the page has a link to the user profile
    return this.evaluate(function() {
      return document.querySelector('a[href="/usuario"] span font font').innerHTML == 'tocijan';
    });
},
//after the condition is met
function then() {
    //capture a test image of the page
    this.capture('test.png');
});
</code></pre>

<p>I know that I log in, since I just implemented a basic wait for 10 sec timeout and took a screenshot of the page, and it was showing the correct result, but now I want to assert this with the waitFor function.</p>

<p>I am using the wrong css selectors?</p>