如何在CasperJS中打开一个新选项卡 [英] How to open a new tab in CasperJS

问题描述

我使用CasperJS测试框架来制作一些测试套件，因为我们现在差不多一个月了，但我遇到了其中一个问题。

I am using CasperJS testing framework to make some test suite since almost a month now, but I am facing a problem in one of them.

这就是我的意思想做：我正在浏览一个网址（第1页），我必须从另一个网址（模拟新的标签，就像我们在图形浏览器上看到的那样）进行另一个操作，而不必退出第一个网页（第1页）。第二个网址的操作将改变我的第一个网址。希望它足够清楚：）

Here is what I want to do: I am browsing a url (page1) and I have to make another action from an another url (simulate a new tab like we have on our graphics browser) without quitting the first one (page1). The action from the second url is going to change my first one. Hope it's clear enough :)

所以现在当我达到观察我的第一个网址的步骤时，我通过打开第二个网页然后打开（），所以它正在进行一个新的导航步骤，我正在失去当前的会话，我不能再回来了。我尝试了许多方法，例如使用历史记录，重新打开页面，使用CasperJS中的事件，我也尝试使用PhantomJS但没有成功。

So for now when I reach the step to observe that on my first url I open the second one by doing a thenOpen(), so it's making a new navigation step and I am losing the current session and I cannot come back on it. I try many way such as using the history, reopen the page, using the event from CasperJS and also I try with PhantomJS but without success.

这是一些伪代码让它更清晰：

Here is some pseudo code to make it clearer:

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，所以如果它是唯一的方法请给我一些例子。

I really would like to use CasperJS to do that but I start to think it is not possible, and I am starting to look in different solution such as this post: CasperJS, parallel browsing WITH the testing framework. But I have never use node.js before so if it's the only way please show me some example.

推荐答案

一般来说，它不是可能因为casper脚本只在一个phantomjs运行时内运行。在你的情况下似乎是可能的。

Generally, it's not possible because a casper script runs inside only one phantomjs runtime. In your case it seems possible.

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

Note: Because this relies on a second casper instance, this cannot be used in a casper test environment.

您可以在一个步骤中创建一个新的casper实例（ casper2 ）外casper实例（ casper1 ）。然后，您必须指示 casper1 等待 casper2 实例的完成，因为casper本质上是异步的。请记住，这与新选项卡完全相同，因此实例将共享缓存，cookie和存储。

You can create a new casper instance (casper2) inside one step of the outer casper instance (casper1). You then have to instruct casper1 to wait for completion of the casper2 instance, since casper is asynchronous in nature. Keep in mind that this is exactly like a new tab, so the instances will share the cache, cookies and storage.

以下是示例脚本：

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 chaining / builder模式。您甚至可以创建自己的函数来隐藏复杂性并使其可重复使用：

Here I use the promise chaining/builder pattern. You can even make your own function to hide the complexity and make it repeatedly usable:

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实例中使用多个步骤，但不要忘记指定一个好的超时。

You can use multiple steps in your child casper instance, but don't forget to specify a good timeout.

这篇关于如何在CasperJS中打开一个新选项卡的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！