Html /javascript共享脚本列表..或者用茉莉花和硒做CI

html/javascript sharing script lists... or doing CI with jasmine and selenium

本文关键字：茉莉花 CI 或者 javascript 共享 脚本 列表 Html      更新时间：2023-09-26

我是js + html的新手。我已经使用jasmine设置了一些基于(extjs) js的验收测试，现在正在考虑为它们设置持续集成设置。

因为它们在浏览器中运行，所以要让它们在CI下运行会有一些麻烦。我想做的是使用selenium来运行测试(我们已经有了一个工作的selenium设置，所以应该很容易)，并使用jasmine-reporter将结果输出到CruiseControl.net可以理解的文件中。

Jasmine的工作方式非常直接，你最终会编写一个看起来像这样的html页面:

<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Jasmine Spec Runner v2.0.0</title>
<link rel="shortcut icon" type="image/png" href="lib/jasmine-2.0.0/jasmine_favicon.png">
<link rel="stylesheet" type="text/css" href="lib/jasmine-2.0.0/jasmine.css">
<script type="text/javascript" src="lib/jasmine-2.0.0/jasmine.js"></script>
<script type="text/javascript" src="lib/jasmine-2.0.0/jasmine-html.js"></script>
<script type="text/javascript" src="lib/jasmine-2.0.0/boot.js"></script>
<script type="text/javascript">
    //set this a bit higher to aid debugging
    jasmine.DEFAULT_TIMEOUT_INTERVAL = 20000;
</script>
<!-- include source files here... -->
<script type="text/javascript" src="Sample/src/Player.js"></script>
<script type="text/javascript" src="Sample/src/Song.js"></script>
<script type="text/javascript" src="/native/WeatherVane.js"></script>
<script type="text/javascript" src="/native/EventCreator.js"></script>
<script type="text/javascript" src="/ext/ext-all-dev.js"></script>
<script type="text/javascript" src="/api/api.js"></script>
<script type="text/javascript">
    Ext.app.REMOTING_API.maxRetries = 0;
    Ext.direct.Manager.addProvider(Ext.app.REMOTING_API);
</script>
<!-- include spec files here... -->
<script type="text/javascript" src="Sample/spec/SpecHelper.js"></script>
<script type="text/javascript" src="Sample/spec/PlayerSpec.js"></script>
<script type="text/javascript" src="Tests/EventCreation.js"></script>
<!-- note this needs to be last as it fires up the tests-->
<script type="text/javascript" src="TestApp.js"></script>

我实际上还没有抽出时间来剥离样本测试!无论如何，我能想到的最简单的方法是使用另一个页面，该页面使用不同的TestApp(最后一个条目)，该页面将jasmine配置为使用jasmine-reporter库中的nunitreporter，并让selenium运行该页面

显然我不想只是复制粘贴所有的东西，只修改最后一点。这将是一个我们要添加很多的列表，如果CI和本地测试基本上不能以相同的方式工作，这将是一个真正的痛苦。

基本上，我想做的是将它有效地分成两个文档/包含集，就像这样:

文档A -共享设置

<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Jasmine Spec Runner v2.0.0</title>
<link rel="shortcut icon" type="image/png" href="lib/jasmine-2.0.0/jasmine_favicon.png">
<link rel="stylesheet" type="text/css" href="lib/jasmine-2.0.0/jasmine.css">
<script type="text/javascript" src="lib/jasmine-2.0.0/jasmine.js"></script>
<script type="text/javascript" src="lib/jasmine-2.0.0/jasmine-html.js"></script>
<script type="text/javascript" src="lib/jasmine-2.0.0/boot.js"></script>
<script type="text/javascript">
    //set this a bit higher to aid debugging
    jasmine.DEFAULT_TIMEOUT_INTERVAL = 20000;
</script>
<!-- include source files here... -->
<script type="text/javascript" src="Sample/src/Player.js"></script>
<script type="text/javascript" src="Sample/src/Song.js"></script>
<script type="text/javascript" src="/native/WeatherVane.js"></script>
<script type="text/javascript" src="/native/EventCreator.js"></script>
<script type="text/javascript" src="/ext/ext-all-dev.js"></script>
<script type="text/javascript" src="/api/api.js"></script>
<script type="text/javascript">
    Ext.app.REMOTING_API.maxRetries = 0;
    Ext.direct.Manager.addProvider(Ext.app.REMOTING_API);
</script>
<!-- include spec files here... -->
<script type="text/javascript" src="Sample/spec/SpecHelper.js"></script>
<script type="text/javascript" src="Sample/spec/PlayerSpec.js"></script>
<script type="text/javascript" src="Tests/EventCreation.js"></script>

文档B -当前浏览器输出方法:

 SomeCommandToInclude(documentA);
<!-- note this needs to be last as it fires up the tests-->
<script type="text/javascript" src="TestApp.js"></script>

文档C - CI/xml输出方法

 SomeCommandToInclude(documentA);
<!-- note this needs to be last as it fires up the tests-->
<script type="text/javascript" src="XmlOutputApp.js"></script>

我觉得自己想做一些非常类似的事情几次与这些html脚本列表。你是怎么做到的?这可能吗?我在找一些和文件有关的东西。写了一段时间，但似乎并没有做正确的事情。

如果不可能在彼此中包含这些脚本列表，我愿意使用其他方法来进行CI，尽管我非常倾向于使用selenium，因为我不想学习另一个库/技术并花费大量时间来让它工作。

我是这样做的。我没有弄清楚如何包含html文件，但我得到了一些工作。

基本方法

我在url中传递了一个参数，该参数表示我们是否处于CI模式。客户端测试库解析url以检查是否应该创建xml输出。因为这是由selenium在浏览器中运行的，所以它不能直接保存到文件中。相反，我将其写入字符串，然后从Selenium中查询该字符串，并从那里将其写入磁盘。

Jasmine-reporters

jasmine- reporter已经被分叉来处理我正在使用的jasmine-2.0 请注意2.0分支不是主分支。我对git不熟悉，在历史上被它隐藏了另一个分支。那里有一个兼容版本的茉莉记者。

我使用了NUnit报告器，为了方便与selenium一起使用，我做了大量的修改，用以下代码替换了写文件方法:

    self.writeFile = function(text) {
        self.output(text, totalSpecsFailed > 0);
    };

我还把这个添加到构造函数中:

self.output = options.output;

如果我们在CI模式下，我的呼叫/配置代码会这样做:

var jasmineEnv = jasmine.getEnv();
jasmineEnv.addReporter(new jasmineReporters.NUnitXmlReporter(
    {
        output: function (xmlOutput, anyFailures) {
            testConfig.xmlOutput = xmlOutput;
            testConfig.anyFailures = anyFailures;
        }
    }));

硒

selenium代码看起来像这样(注意，这不是原始的selenium -它通过一个API，我已经包装了基本的东西，但你应该能够得到要点)

    public void PokeTheTestPage()
    {
        try
        {
            NavigateTo(WebAppUrl + "Tests/Jasmine/SpecRunner.html?outputFile=true");
            var error = Driver.GetStringWith("return weatherVane.testConfig.errorText;");
            if (error != "")
                ExitWithError(error);
            var testOutput = LongWait.Until(d => d.GetStringWith("return weatherVane.testConfig.xmlOutput;"));
            var failed = Driver.GetBoolWith("return weatherVane.testConfig.anyFailures;");
            using (var file = File.OpenWrite(_outputFile))
            using (var writer = new StreamWriter(file))
                writer.Write(testOutput);
            if (failed)
                ExitWithError("tests failed");
        }
        catch (Exception e)
        {
            ExitWithError(e.ToString());
        }
    }
    private void ExitWithError(string error)
    {
        Console.WriteLine("got Error:");
        Console.WriteLine(error);
        Driver.Close();
        Environment.Exit(1);
    }
}
相关文章：