如何在 CasperJS 中打开一个新选项卡

IT技术 javascript node.js casperjs
2021-03-12 12:25:49

近一个月以来,我一直在使用 CasperJS 测试框架来制作一些测试套件,但我在其中一个中遇到了问题。

这是我想要做的:我正在浏览一个 url (page1),我必须从另一个 url 执行另一个操作(模拟我们在图形浏览器上的新选项卡)而不退出第一个(page1)。第二个 url 的操作将改变我的第一个。希望它足够清楚:)

所以现在,当我到达观察第一个 url 的步骤时,我通过执行 a 打开第二个thenOpen(),所以它正在执行一个新的导航步骤,我正在丢失当前会话,我无法再回来。我尝试了很多方法,例如使用历史记录、重新打开页面、使用来自 CasperJS 的事件,我也尝试使用 PhantomJS 但没有成功。

下面是一些伪代码,以使其更清楚:

casper.test.begin("A random test suite", 0, function testSuite(test) {
    casper.start(url1, function () {
        casper.then(function() {
            // do some action on the first url
        });

        casper.then(function () {
            // open url2 and do some action in a new tab to not lose the session of url1
        });

        casper.then(function () {
            // check url1 (who should be still open)
        });
    });

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

我真的很想使用 CasperJS 来做到这一点,但我开始认为这是不可能的,我开始寻找不同的解决方案,例如这篇文章: CasperJS,使用测试框架并行浏览但我以前从未使用过 node.js 所以如果这是唯一的方法请给我看一些例子。

1个回答

通常,这是不可能的,因为 casper 脚本仅在一个 phantomjs 运行时内运行。在你的情况下,这似乎是可能的。

注意:因为这依赖于第二个 casper 实例,所以不能在 casper测试环境中使用。

您可以casper2在外部 casper 实例 ( casper1) 的一步内创建一个新的 casper 实例 ( )。然后您必须指示casper1等待casper2实例完成,因为 casper 本质上是异步的。请记住,这就像一个新选项卡,因此实例将共享缓存、cookie 和存储。

这是一个示例脚本:

var casper1 = require('casper').create();
var casper2done = false;

casper1.start("http://www.example.com").then(function(){
    casper1.capture("casper1_1.png");
    var casper2 = require('casper').create();
    casper2.start("http://stackoverflow.com/contact").then(function(){
        casper1.echo(casper2.getCurrentUrl(), casper2.getTitle());
        casper2.capture("casper2.png");
    }).run(function(){
        this.echo("DONE 2");
        casper2done = true;
    });
}).waitFor(function check(){
    return casper2done;
}).then(function(){
    casper1.echo(casper1.getCurrentUrl(), casper1.getTitle()); // Comment to fix answer (min 6 chars)
    casper1.capture("casper1_2.png");
}).run(function(){
    this.echo("DONE");
    this.exit();
});

在这里,我使用了 promise 链接/构建器模式。您甚至可以创建自己的函数来隐藏复杂性并使其重复使用:

var casper = require('casper').create();

// IIFE to hide casper2done variable
(function(casper){
    var casper2done = false;
    casper.newTab = function(url, then, timeout){
        if (typeof url !== "string" || typeof then !== "function") {
            throw "URL or then callback are missing";
        }
        this.then(function(){
            var casper2 = require('casper').create();
            casper2.start(url).then(then).run(function(){
                casper2done = true;
            });
        }).waitFor(function check(){
            return casper2done;
        }, null, null, timeout).then(function(){
            casper2done = false;
        });
        return this;
    };
})(casper);

casper.start("http://www.example.com").newTab("http://stackoverflow.com/contact", function(){
    // this is casper2
    this.echo(this.getCurrentUrl(), this.getTitle());
    this.capture("casper2_1.png");
    this.thenClick("a#nav-askquestion");
    this.then(function(){
        this.echo(this.getCurrentUrl(), this.getTitle());
        this.capture("casper2_2.png");
    });
}, 15000).then(function(){
    // this is casper
    this.echo(casper.getCurrentUrl(), casper.getTitle());
    this.capture("casper1.png");
}).run(function(){
    this.echo("DONE");
    this.exit();
});

您可以在casper 实例中使用多个步骤,但不要忘记指定一个好的超时时间。

我们如何使用 casperjs test 子命令来做到这一点?因为我们无法在测试环境中覆盖预先配置的 casper 实例。
2021-05-02 12:25:49
这是不可能的。然后,您必须通过child_processmodule生成一个孩子可以像将被沙箱化的评估调用一样编写它。
2021-05-20 12:25:49