casperJS CSS 选择器:waitFor 函数总是超时

casperJS css selectors: waitFor function always times out

本文关键字:超时 函数 waitFor CSS 选择器 casperJS      更新时间:2023-09-26

我正在编写一个自动登录测试,并希望断言我已经成功登录了该页面,然后截取该页面的屏幕截图。

我尝试访问的 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 的内部 HTML(或文本)。

我已经像这样编写了我的等待函数,但它总是超时:

//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 选择器?

大多数时候都有空格,因为我们作为开发人员喜欢我们的缩进。尝试检查元素是否包含在 HTML 中:

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

如果这不起作用,请检查元素是否在 iframe 中。您需要专门切换到带有 casper.withFrame() 的 iframe 。