casperJS css 选择器：waitFor 函数总是超时

Question

我正在写一个自动登录测试，想断言我已经成功登录页面，然后截取页面的屏幕截图。

我正在尝试访问的 DOM 看起来像这样：

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

我想断言这个元素：

<a href="/usuario"><i class="glyphicon glyphicon-user"></i><span class="hidden-xs"><font><font class="">tocijan</font></font></span></a>

具有 tocijan 的 innerHTML（或文本）。

我写了这样的等待函数，但它总是超时：

//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');
});

我知道我登录了，因为我刚刚实现了一个基本的等待 10 秒超时并截取了页面的屏幕截图，它显示了正确的结果，但现在我想用 waitFor 函数断言它.

我使用了错误的 css 选择器？

Answer 1

大部分时间都有空格，因为我们作为开发人员喜欢我们的缩进。尝试检查元素是否包含在 HTML:

return document.querySelector('...').innerHTML.indexOf('tocijan') != -1;

如果这不起作用，请检查元素是否在 iframe 中。您需要使用 casper.withFrame().

专门切换到 iframe

casperJS css 选择器：waitFor 函数总是超时

casperJS css selectors: waitFor function always times out

javascript

css-selectors

casperjs