Question

我有一些casperjs测试，它们在本地运行得很漂亮。当我将它们移动到TeamCity并在临时服务器上运行时，我看到间歇性故障。

我认为casper正在点击一个按钮，然后不再等待该按钮后面的JavaScript完全执行，然后再进入下一步。按钮后面的JavaScript做了一些东西然后发回（这是webforms，呃）。

在日志中我看到点击事件触发，然后开始下一步测试，然后导航发生（最后一行）。

[info] [phantom] Step _step 8/9 http://site.azurewebsites.net/job.aspx (HTTP 200)
[debug] [phantom] Mouse event 'mousedown' on selector: .save-button
[debug] [phantom] Mouse event 'mouseup' on selector: .save-button
[debug] [phantom] Mouse event 'click' on selector: .save-button
[info] [phantom] Step _step 8/9: done in 2456ms.
[info] [phantom] Step anonymous 9/9 http://site.azurewebsites.net/job.aspx (HTTP 200)
FAIL Feedback exists
#    type: assertExists
#    file: Prime.WebSite.UITest\app.js
#    subject: false
#    selector: "#Feedback"
[info] [phantom] Step anonymous 9/9: done in 2857ms.
[debug] [phantom] Navigation requested: url=http://site.azurewebsites.net/job.aspx, type=FormSubmitted, willNavigate=true, isMainFrame=true

我的casper，用TypeScript编写，看起来像

public TestCreatingBasicJob(casper: Casper) {
    casper.test.begin("Creating Basic Works", 3, (test: Tester) => {
        casper.start(baseUrl, () => {
            this.auth.LoginAsAdminUser(casper);
        });
        casper.thenOpen(baseUrl + "/jobs.aspx", () => {

        });
        casper.thenClick(".new-button");
        casper.then(() => {

        });

        casper.thenClick(".save-button");

        casper.then(() => {
            test.assertExists("#Feedback", "Feedback exists");
            var feedbackClass = casper.evaluate(() => $("#Feedback").attr('class'));
            test.assertEquals("success", feedbackClass, "Feedback is success");
            this.jobNumber = casper.evaluate(() => $("#JobNumber").text());
            test.assertNotEquals(this.jobNumber, null, "Job number populated: " + this.jobNumber);
        });

        casper.run(() => {
            auth.Logout(casper);
            test.done();
        });
    });
}

它编译为

CreateJobTests.prototype.TestCreatingBasicJob = function (casper) {
        var _this = this;
        casper.test.begin("Creating Basic Works", 3, function (test) {
            casper.start(baseUrl, function () {
                _this.auth.LoginAsAdminUser(casper);
            });
            casper.thenOpen(baseUrl + "/jobs.aspx", function () {
            });
            casper.thenClick(".new-button");
            casper.then(function () {
            });

            casper.thenClick(".save-button");

            casper.then(function () {
                test.assertExists("#Feedback", "Feedback exists");
                var feedbackClass = casper.evaluate(function () {
                    return $("#Feedback").attr('class');
                });
                test.assertEquals("success", feedbackClass, "Feedback is success");
                _this.jobNumber = casper.evaluate(function () {
                    return $("#JobNumber").text();
                });
                test.assertNotEquals(_this.jobNumber, null, "Job number populated: " + _this.jobNumber);
            });

            casper.run(function () {
                auth.Logout(casper);
                test.done();
            });
        });
    };

如何在请求导航之前避免下一步触发？我已尝试在thenClick之前的步骤和从thenClick的回调中手动设置casper.navigationRequested = true，但标志似乎永远不会被清除，因此测试会挂起。

它可能只是通过等待来修复，但我的印象是对casper.wait的调用是一种anit-pattern。

Answer 1

CasperJS提供了许多功能，您可以使用这些功能确定是否有时间继续进行所有已命名的waitFor。根据您的网络表单的不同，您可以使用waitForSelector()等待网络表单显示或waitWhileSelector()等待加载动画消失或其中一个。你只需要观察发生了什么变化。

CasperJS在事件回调结束前过早地进入下一步

1 个答案: