Angular场景e2e测试可以集成外部资源工作流

Question

您如何使用Karma Runner(ex-Testacular)e2e场景运行器在e2e测试中集成异地/外部应用程序/外部资源工作流程？

基本情景:

1. 应用程序有一个按钮.
2. 单击按钮将数据发送到服务提供商X(例如,提交http://service/submit或等等).
3. 提供者X需要在此URL处单击/提交/操作.
4. 然后,提供商X将某些内容发回给我们的应用

我不是问"你如何存根提供者X".我问你如何实际端到端测试 - 所以我们的测试实际上可以捕获第三方服务API的变化.我基本上希望能够推出一个应用程序外的网站,类似于你能够使用像Selenium的Webdriver这样的东西.

目前我的问题是element( ref ).click()用于尝试第2步,它似乎没有加载所需的网站,因此没有DOM可以采取行动,无法完成e2e.

Answer 1

可能无法使用Karma执行此方案.我将理解Karma的工作原理,它与Webdriver的比较,以及实现这种情况所需的内容.

首先,重要的是要记住,Karma和角度场景不是一回事.Karma是用于运行基于浏览器的测试的通用shell.它启动浏览器进程,启动节点以提供包含测试工具的网页,通过websocket发送命令来运行测试,然后收集结果.对于运行测试的实际线束/框架,它是不可知的.它有适用于Angular场景运行器(用于Angular e2e测试),Jasmine(通常用于Angular单元测试)和其他流行的JavaScript测试框架的适配器.

像Jasmine这样的测试运行程序在与被测代码相同的窗口上下文中执行,这就是它对单元测试有用的原因.相比之下,Angular场景运行器与被测系统具有长臂关系.它将整个应用程序加载到iframe中,然后在大多数情况下模拟用户事件并测试可见暴露的DOM元素上的断言.

由于场景运行器跨iframe边界与应用程序交互,因此它受浏览器的同域策略约束.无法提供场景运行器http://localhost:8000,然后加载http://yourappiframe,然后触发iframe中的事件.

解决此问题的一种方法是简单地将场景运行器托管在与应用程序相同的服务器上.这是一个简单的例子:

http://plnkr.co/edit/rfqpSq?p=preview

但是,将测试运行器塞进应用程序并不是很令人满意.Karma通过内置的HTTP代理为您提供了解决方案.您可以将Karma配置为代理任意数量的不同服务器,以使它们看起来都来自同一个源.只需将它们添加到proxies配置文件的部分:

proxies = {
  '/': 'http://yourapp/',
  '/service/': 'http://service/'
} 

这允许您的e2e测试跨域,但问题是当通过表单提交或重定向进行域转移时,它必须是代理URL.否则,场景运行器将失去对iframe的控制,并且无法继续测试.

请注意,Selenium Webdriver没有此限制.它的操作高于单个浏览器窗口的级别,因此不受相同域策略的约束.

那么让我们来看看你的具体情况.就实际的HTTP请求和响应而言,我假设这是您要执行的流程:

1. 加载您的应用程序 http://yoursite/yourapp.html
2. 用户提交的表单如下所示:

<form method="POST" action="http://service/remotesubmission">
  ...your form...
  <input type="submit">
</form>

1. 提供者X处理远程POST,然后重定向到表单:

<form method="POST" action="http://service/nextsubmission">
  ...provider's form...
  <input type="submit">
</form>

1. 提供者X处理表单POST,然后重定向回您的appp.

如果这是实际场景,那么我认为使用Karma和角度场景运行器的唯一方法是:

1. 对表单中的操作URL进行条件化,使其在测试时指向外部服务的代理URL.
2. 确保提供程序流中的重定向和操作URL保留在代理路径中.我认为目前不可能,但也许可以通过为代理内容设置替代模式来修补Karma.