Question

不知道为什么我的测试在这里给我一个误报。 html页面呈现aaaaa但我的测试试图查看该div是否仍在传递“No Companies Listed”文本，为什么？

"use strict";

var page = null,
    $ = require('jquery');


describe('Feature: View List of Companies', function() {
    before(function(done) {
        casper.start('http://localhost:3000');
        casper.on("remote.message", function(msg){
            this.echo("remote.msg: " + msg);
        });
        casper.on("page.error", function(pageErr){
            this.echo("page.err: " + JSON.stringify(pageErr));
        });

        casper.then(function(){
            this.page.injectJs('../../../public/js/jquery-2.2.3.min.js');
        })

        done();
    });

    it('When I go to the main landing page', function () {
        casper.then(function () {
            expect(this.page).to.be.a('object');
        });
    });

    describe('Scenario 1: No Companies are Listed', function () {
        it('should see that no companies are listed', function () {
            var companyList = null;
            casper.waitForSelector('#companyList', function () {
                this.evaluate(function() {
                    companyList = $('#companyList').value;
                    console.log("list: " + companyList);
                });
                expect(companyList.to.equal('No Companies Found'));
            });
        });
    });

    casper.run(function() {
        exitPhantomJS();
    });
});


function exitPhantomJS(){
    this.exit();
}

以下是渲染内容的视图来源：

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">

        <!-- load Ink's CSS -->
        <link rel="stylesheet" type="text/css" href="public/libs/ink-3.1.10/css/ink-flex.min.css">
        <link rel="stylesheet" type="text/css" href="public/libs/ink-3.1.10/css/font-awesome.min.css">

        <style>
            body {
                background: #ededed;
            }
        </style>
    </head>
    <body>
        <div class="ink-grid vertical-space">
            <div id="content">
                <div class="panel vertical-space">
                    <div id="companyList">aaaaa</div>
                    <!--<div id="app"/>-->
                </div>
            </div>
        </div>
        <script type="text/javascript" src="build/app/js/bundle.js"></script>
    </body>
</html>

结果

  Feature: View List of Companies
    ✓ When I go to the main landing page
    Scenario 1: No Companies are Listed
      ✓ should see that no companies are listed


  2 passing (12ms)

Answer 1

您的代码存在一些问题。最值得注意的是

expect(companyList.to.equal('No Companies Found'));实际上是expect(null.to.equal('No Companies Found'));，因此会导致TypeError。

你可能想使用expect(companyList).to.equal('No Companies Found');，这不会导致TypeError，因此应该给你一个失败的测试。

测试失败的原因是casper.evaluate()提供了对DOM的沙盒访问。你不能引用外部定义的变量，如果你想从中获取数据，你需要明确地传递它：

var companyList = null;
casper.waitForSelector('#companyList', function () {
    companyList = this.evaluate(function() {
        return $('#companyList')[0].innerHTML.trim();;
    });
    expect(companyList).to.equal('No Companies Found');
});

DIV没有价值观，而jQuery集合没有value属性。您可能希望使用textContent或innerHTML。

另一个问题：由于您直接致电exitPhantomJS，this并未引用casper，因此会导致另一个TypeError。使用casper.run(exitPhantomJS);或casper.run();。

测试应该失败但不是 - 摩卡和CasperJS

1 个答案: