Question

我在GitHub上准备example project以配合我正在研究如何为dockerized应用程序编写功能测试的课程。该应用程序有一个部分是一个Angular2单页应用程序，我试图用CasperJS测试这个应用程序（我也试过Behat，下面解释了同样的问题）。

在CasperJS中运行测试时，好像Angular中的路由没有为测试加载，我的意思是我可以断言索引模板中存在的东西（如页面标题）例如）但是<app-root></app-root>标签内的东西不会加载测试。

代码

这是索引模板：

<!doctype html>
<html lang="en">
<head
  <meta charset="utf-8">
  <title>TestProject</title>
  <base href="/">
  <meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
  <app-root></app-root>
</body>
</html>

测试是：

casper.test.begin('Tests homepage structure', function suite(test) {

    casper.start('http://web', function() {

        // This works because the title is set in the "parent" template.
        test.assertTitle("TestProject", "Title is correct");

        casper.wait(2000);

        // This fails, I'm guessing because the h2 is only in the "child" template,
        // it seems that CasperJS doesn't render the angular2 app correctly
        // and the child route templates are not injected into the page correctly.
        test.assertVisible('h2');
    });

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

这是测试的输出：

Test file: homepage.js                                                          
# Tests homepage structure
[info] [phantom] Starting...
[info] [phantom] Running suite: 2 steps
PASS Tests homepage structure (NaN test)
[debug] [phantom] opening url: http://web/, HTTP GET
[debug] [phantom] Navigation requested: url=http://web/, type=Other, willNavigate=true, isMainFrame=true
[debug] [phantom] url changed to "http://web/"
[debug] [phantom] Successfully injected Casper client-side utilities
[info] [phantom] Step anonymous 2/2 http://web/ (HTTP 200)
PASS Title is correct
FAIL Selector is visible
#    type: assertVisible
#    file: homepage.js
#    subject: false
#    selector: "h2"
[info] [phantom] Step anonymous 2/2: done in 178ms.
[info] [phantom] Step _step 3/3 http://web/ (HTTP 200)
[info] [phantom] Step _step 3/3: done in 196ms.
[info] [phantom] wait() finished waiting for 2000ms.
[info] [phantom] Done 3 steps in 2215ms

请注意，这些测试和网络都在docker容器中运行，这就是为什么上面代码中的主机名是＆＃34; web＆＃34;而不是知识产权。

该应用程序位于GitHub here。要运行应用程序，请在根目录中执行docker-compose up并浏览到http://127.0.0.1:81/。要运行CasperJS测试运行./tests/web/run_functional_test.sh，您不需要事先运行docker-compose up。

尝试过的东西

我试图通过在CasperJS的页面加载中输出任何控制台错误来查看CasperJS是否遇到问题，但我还没有发现任何可疑信息。

在浏览器中运行时，应用程序运行正常，我可以看到路由器注入索引模板的内容。

我尝试使用resurrectio访问我在Chrome中的页面，单击一些内容然后将此测试直接导出到CasperJS测试文件，这个自动生成的测试失败的原因相同，注入的内容CasperJS无法访问路由器。

我尝试过使用Behat和Selenium，效果相似。这表明问题不在于CasperJS / PhantomJS（可能是Angular设置？）。

问题

我没有PhantomJS / Selenium专家，但我明白他们可以渲染javascript，所以期望CasperJS和Behat应该能够对Angular路由器插入的内容运行断言是正常的。我错了这个假设吗？

如果没有，我的测试发生了什么？为什么CasperJS测试不能对路由中的模板运行断言？

Answer 1

最后问题很简单，简单的问题通常是让你脱掉头发的问题。

在我的Web应用程序中，我使用“127.0.0.1:82”作为API的连接字符串。这在本地工作，因为docker-compose文件映射了主机的端口82，但我没有为测试映射端口82，因此web无法连接到API。该修复程序为here。

我不是PhantomJS / Selenium专家，但我明白他们可以渲染javascript，因此期望CasperJS和Behat应该能够对Angular路由器插入页面的内容运行断言是正常的，我错了假设这个？

我当然是正确的假设。

CasperJS不会加载Angular路由器

代码

尝试过的东西

问题

1 个答案: