Protractor + TypeScript + Cucumber：未定义的步骤定义错误

Question

我正在学习 Protractor/TypeScript/Cucumber，下面是我的第一个脚本。在尝试执行它时，我遇到了一个错误（也将在下面提到）并坚持下去。有人可以让我知道我错过了什么。

我已经定义了功能步骤，但仍然出现步骤未定义错误。 这是当前状态的屏幕截图：

我都试过了：

1) 我尝试切换 Step defs 的位置，甚至将其指向 step_def.js 而不是 ste_def.ts。

当我更新'require'中的路径时，我也收到以下错误：

require: '../../StepDefs/*.ts',

"C:\Program Files\nodejs\node.exe" C:\Users***\WebstormProjects\CucumberProject\node_modules\protractor\bin\protractor “C:\Program Files\JetBrains\WebStorm 2018.3.1\plugins\JavaScriptLanguage\helpers\protractor-intellij\lib\protractor-intellij-config.js" --intellijOriginalConfigFile=C:\Users***\WebstormProjects\CucumberProject\config\config\CucumberConfiguration.js --disableChecks [13:56:40] I/launcher - 运行 1 个 WebDriver 实例 [13:56:40] I/direct - 直接使用 ChromeDriver... [13:56:43] E/启动器 - 错误：

C:\Users***\WebstormProjects\CucumberProject\StepDefs\my_steps.ts:1 （函数（导出，需要，模块，__filename，__dirname）{导入 {browser, by, element} 来自“量角器”；

语法错误：

意外的令牌 { 在新脚本 (vm.js:74:7)

2) 全部删除并重新安装

这里是sn-p的代码：

CucumberConfiguration.ts

exports.config = {
  useAllAngular2AppRoots: true,
  capabilities: {
    browserName: "chrome"
  },
  specs: ["../../FeatureFiles/*.feature"],

  framework: "custom",
  frameworkPath: require.resolve("protractor-cucumber-framework"),

  directConnect: true,
  noGlobals: true,

  cucumberOpts: {
    compiler: [],
    strict: true,
    require: "../StepDefs/*.js",
    // require: '../StepDefs/*.js',
    // require: '../StepDefs/my_steps.ts',

    tags: false,
    // format: ['pretty'],
    profile: false,
    "no-source": true
  }
};

my_steps.ts

import { browser, by, element } from "protractor";

var myStepDefinitionsWrapper = function() {
  this.Given(/^I am on first page$/, async function(callback) {
    browser
      .get(
        "http://www.way2automation.com/angularjs-protractor/registeration/#/login"
      )
      .then(function() {
        browser.sleep(1000);
      });
    await element(browser.model("Auth.user.name")).sendKeys("angular");
    await element(by.id("password")).sendKeys("password");
    await element(by.id("formly_1_input_username_0")).sendKeys("angular");
    await element(by.className("btn btn-danger")).click();
    await element
      .all(by.css("[href*='#/login']"))
      .first()
      .click()
      .then(function() {
        console.log(element(by.id("formly_1_input_username_0")));
      });
  });
};
module.exports = myStepDefinitionsWrapper;  

package.json

{
  "name": "CucumberProject",
  "version": "1.0.0",
  "description": "First Framework of Protractor with Type Script and cucumber",
  "main": "index.js",
  "scripts": {
    "test": "protractor tmp/config/configuration.js",
    "pretest": "tsc",
    "cucumbertest": "protractor config/config/CucumberConfiguration.js",
    "protractor": "./node_modules/protractor/built/cli.js",
    "webdriver-update": "./node_modules/.bin/webdriver-manager update"
  },
  "author": "",
  "license": "ISC",
  "dependencies": {
    "@types/cucumber": "^6.0.0",
    "@types/jasmine": "^3.5.0",
    "@types/jasminewd2": "^2.0.8",
    "@types/node": "^12.12.21",
    "cucumber": "~6.0.5",
    "jasmine": "^3.5.0",
    "package.json": "^2.0.1",
    "protractor-cucumber-framework": "^6.2.0",
    "ts-node": "^8.5.4",
    "protractor": "^5.4.2",
    "typescript": "3.6.4"
  }
} 

tsconfig.json

{
  "compilerOptions": {
    "target": "es6",
    "module": "commonjs",
    "moduleResolution": "node",
    "inlineSourceMap": true,
    "declaration": false,
    "noImplicitAny": false,
    "outDir": "config",
    "skipLibCheck": true
  },
  "exclude": [
    "node_modules",
    "asyncAwait",
    "plugins.ts"
  ]
} 

Answer 1

这是一个打字稿错误。您正在尝试运行打字稿文件，或者您的打字稿类型定义之一丢失。

在你的配置文件中，我看到你指向specs: ["../../FeatureFiles/*.feature"]，如果你没有在文件名的末尾指定扩展名，打字稿文件将被拾取执行这个语法'{'错误。尝试在specs: ["../../FeatureFiles/*.feature.js"] 之后添加 .js。

还要确保在执行测试时运行的是量角器 js 文件，而不是 ts 文件。

如果这不起作用，请尝试在 package.json 中检查量角器或黄瓜的一些缺失类型定义。

Answer 2

我找到了解决方案 - 像下面这样创建步骤 def 解决了这个问题 -

Given('我在第一页', function () {

以前是——

Given(/^我在第一页$/, async function(callback) {