javascript - Angular场景e2e测试能否集成外部资源工作流

标签 javascript angularjs karma-runner

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

基本场景:

  1. 应用有一个按钮。
  2. 单击按钮将数据发送到服务提供商 X(例如提交到 http://service/submit 或其他)。
  3. 提供商 X 需要在此 URL 上进行点击/提交/操作
  4. vendor X 然后将一些东西发回我们的应用程序。

我不是在问“你如何 stub vendor X”。我想问你如何实际上端到端测试这个——所以我们的测试实际上可以捕获第 3 方服务 API 的重大更改。我基本上希望能够驱动一个应用程序外的网站,类似于您使用 Selenium's Webdriver 之类的东西的方式。 .

目前我的问题是使用 element( ref ).click() 尝试第 2 步,它似乎没有加载所需的站点,所以没有 DOM 可以操作,没办法完成端到端。

最佳答案

用 Karma 可能无法执行此场景。我将阐述我对 Karma 工作原理的理解,它与 Webdriver 的比较,以及实现此场景所需的条件。

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

Jasmine 等测试运行程序在与被测代码相同的窗口上下文中执行,这就是它对单元测试有用的原因。相比之下,Angular 场景运行器与被测系统保持一定距离。它将整个应用程序加载到 iframe 中,然后在大部分情况下模拟用户事件并在可见的 DOM 元素上测试断言。

因为场景运行器跨 iframe 边界与应用程序交互,所以它受到浏览器的同域策略的约束。不可能在 http://localhost:8000 上提供场景运行器,然后在 iframe 中加载 http://yourapp,然后在里面触发事件那个 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. Provider X 处理远程 POST,然后重定向到表单:
<form method="POST" action="http://service/nextsubmission">
  ...provider's form...
  <input type="submit">
</form>
  1. 提供商 X 处理表单 POST,然后重定向回您的应用程序。

如果这是实际场景,那么我认为使用 Karma 和 Angular 场景运行器进行此操作的唯一方法是:

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

关于javascript - Angular场景e2e测试能否集成外部资源工作流,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/16049319/

相关文章:

javascript - Karma - 找不到模块 : Error: Cannot resolve module 'scss'

javascript - 使用 requirejs、angularamd 和 karma 时,“undefined”不是对象(评估 'app.register.service' )

angularjs - 在遇到 karma 暂停后,如何让 grunt watch 继续?

javascript - AWS 上现有 key 出现 NoSuchKey 错误

javascript - 更新 Angular 代码以随机及时调用 api

javascript - 添加 anchor 以 react 引导表

angularjs - 通过服务进行 Angular 2 组件交互

javascript - Angular 过滤器困惑

javascript - React、TransitionGroup、Velocity.js - 使路由过渡动画垂直对齐

javascript - 在jquery中更改地址栏中的get参数