如何使用Typescript在Atom中集成Protractor测试用例?

时间:2016-09-02 04:49:04

标签: typescript jasmine protractor atom-editor

我已经安装了原子的typescript来编写Protractor Scripts用于自动化。

我的代码是用Jasmine Framework编写的,因为量角器很好地支持它。

我在这个结构中写道。

 describe('Sign in',function(){
     it ('Verify Modules Present', function(){
     loginPage.enterUsernameAndPasswordWithSignIn('a','b');
     browser.sleep(3000);
     var module = element(by.xpath("//*[@ng-reflect-router-link='My']"));
     browser.wait(protractor.ExpectedConditions.elementToBeClickable(module),
                                  8000).thenCatch(function () {
              assert.fail(' element is not click able');
      });
    var expectedModuleName = ["My", "X","Y", "Z" ];
    var testArray = ["My", "X","Y", "Z" ];;
    logger.log('info','Checking All modules');
    for (var i = 0; i < testArray.length;i++) {
      var moduleName = text.verifyText("//*[@ng-reflect-router-link='"+ testArray[i] + "']");
      expect(moduleName).toBe(expectedModuleName[i]);
    }
  logger.log('info','Checked All modules');
  });
});

我遇到了以下错误。

erros

我的理解是:Typescript无法找到Jasmine库。 怎么做?

我经历过: https://angular.io/docs/ts/latest/testing/jasmine-testing-101.html

但是找不到多少。我也安装了打字机。但我不知道如何使用它。

如何为Protractor配置Jasmine Framework into atom以便可以解决此错误?

如果不是这样,哪个编辑器可以这样做以及如何使用?

请指导我..

3 个答案:

答案 0 :(得分:2)

您必须安装jasminenode类型,以便打字稿识别它们。现在甚至有更好的方法,不需要typings文件夹和typings.json。我们有相同的@types依赖关系。

所以你可以通过以下步骤来做到这一点 -

转到项目文件夹并安装依赖项 -

 npm install --save-dev @types/jasmine //this would install jasmine typings as a dev dependency in your package.json
 npm install --save-dev @types/node   //this would install node typings as a dev dependency in your package.json

安装完成后尝试使用tsctsc -w监视模式进行编译,现在您不应该看到这些TS语法错误!

您必须从browser导入protractor/globals才能使用其方法,如下所示 -

import {browser} from 'protractor/globals';

有关详细信息,您可以查看我的代表protractor with typescript的初始设置,它使用黄瓜以及您可以查看官方protractor-typescript example

答案 1 :(得分:0)

显然,其中一些问题(例如,require和loginPage)与Jasmine无关。但是,问题是这些是全局变量,TS编译器无法找到它们的声明。解决此问题的最简单方法是以下列方式将每个文件声明在文件的顶部:

$(document).ready(function(){ $(function(){ $('[rel="popover"]').popover({ container: 'body', html: true, content: function () { var clone = $($(this).data('popover-content')).clone(true).removeClass('hide'); return clone; } }).click(function(e) { e.preventDefault(); }); }); });

这将解决declare var describe: any;describe的问题。其他问题,例如it,是因为您未使用module import syntax

答案 2 :(得分:0)

这对我来说并没有解决问题。除了安装茉莉花类型(上面的回答)

我必须打开tsconfig.json并确保jasmine位于types下的compilerOptions列表中。例如 { "compileOnSave": false, "compilerOptions": { "outDir": "./dist/out-tsc", "baseUrl": "src", "sourceMap": true, "declaration": false, "moduleResolution": "node", "emitDecoratorMetadata": true, "experimentalDecorators": true, "allowJs": true, "target": "es5", "paths": { "environments": [ "./environments" ] }, "types": [ "node", "jasmine" ], "typeRoots": [ "node_modules/@types" ], "lib": [ "es2016", "dom" ] } } "jasmine"作为类型添加后,错误立即消失在Atom中。