简体   繁体   English

使用 nrwl nx 在 cypress 中使用.feature 文件

[英]Use .feature files in cypress with nrwl nx

I have an Angular project with an Nrwl Nx workspace.我有一个带有 Nrwl Nx 工作区的 Angular 项目。 For my e2e test I use cypress with typescript.对于我的 e2e 测试,我使用带有 typescript 的 cypress。 For this tests I would like to enable support for Feature files with Gherkin Syntax.对于这个测试,我想启用对带有 Gherkin 语法的功能文件的支持。

I added the "cypress-cucumber-preprocessor" to the project.我在项目中添加了“cypress-cucumber-preprocessor”。 This setup works fine when I write the bindings with js.当我使用 js 编写绑定时,此设置工作正常。 But as soon as I try to setup the steps for typescript I get errors and I can't make it work.但是,一旦我尝试设置 typescript 的步骤,我就会收到错误并且无法使其工作。

Setup for js: js的设置:

const { preprocessTypescript } = require('@nrwl/cypress/plugins/preprocessor');
const cucumber = require('cypress-cucumber-preprocessor').default;

module.exports = (on, config) => {
  // `on` is used to hook into various events Cypress emits
  // `config` is the resolved Cypress config

  // Code Coverage
  on('task', require('@cypress/code-coverage/task'));

  // Preprocess Typescript
  on('file:preprocessor', preprocessTypescript(config));

  // Gherkin support
  on('file:preprocessor', cucumber());
};

Setup for ts: ts 的设置:

const { preprocessTypescript } = require('@nrwl/cypress/plugins/preprocessor');
const cucumber = require('cypress-cucumber-preprocessor').default;
const browserify = require('@cypress/browserify-preprocessor');

module.exports = (on, config) => {
  // `on` is used to hook into various events Cypress emits
  // `config` is the resolved Cypress config

  // Code Coverage
  on('task', require('@cypress/code-coverage/task'));

  // Preprocess Typescript
  on('file:preprocessor', preprocessTypescript(config));

  // Gherkin support
  const options = browserify.defaultOptions;
  options.browserifyOptions.plugin.unshift(['tsify']);
  on('file:preprocessor', cucumber());
};
{
  "name": "client-app",
  "version": "0.0.0",
  "license": "MIT",
  "scripts": {
    "ng": "ng",
    "nx": "nx",
    "start": "ng serve",
    "start:browser": "ng serve -o --port 54055",
    "build": "ng build",
    "build:ssr": "ng run client-app:server:production",
    "test": "ng test",
    "lint": "nx workspace-lint && ng lint",
    "e2e": "ng e2e",
    "e2e:watch": "ng e2e --watch",
    "e2e:headless": "ng e2e --prod --headless",
    "affected:apps": "nx affected:apps",
    "affected:libs": "nx affected:libs",
    "affected:build": "nx affected:build",
    "affected:e2e": "nx affected:e2e",
    "affected:test": "nx affected:test",
    "affected:lint": "nx affected:lint",
    "affected:dep-graph": "nx affected:dep-graph",
    "affected": "nx affected",
    "format": "nx format:write",
    "format:write": "nx format:write",
    "format:check": "nx format:check",
    "update": "ng update @nrwl/workspace",
    "update:check": "ng update",
    "workspace-schematic": "nx workspace-schematic",
    "dep-graph": "nx dep-graph",
    "help": "nx help",
    "extract:clientApp": "ngx-translate-extract --input ./apps/client-app/src --output ./apps/client-app/src/assets/i18n/de.json ./apps/client-app/src/assets/i18n/en.json ./apps/client-app/src/assets/i18n/fr.json ./apps/client-app/src/assets/i18n/it.json --clean --sort",
    "extract:clientAppe2e": "ngx-translate-extract --input ./apps/client-app/src --output ./apps/client-app-e2e/src/fixtures/i18n/de.json ./apps/client-app-e2e/src/fixtures/i18n/en.json ./apps/client-app-e2e/src/fixtures/i18n/fr.json ./apps/client-app-e2e/src/fixtures/i18n/it.json --clean --sort"
  },
  "private": true,
  "dependencies": {
    "@angular/animations": "^8.0.0",
    "@angular/cdk": "^8.1.1",
    "@angular/common": "^8.0.0",
    "@angular/compiler": "^8.0.0",
    "@angular/core": "^8.0.0",
    "@angular/flex-layout": "^8.0.0-beta.26",
    "@angular/forms": "^8.0.0",
    "@angular/material": "^8.1.1",
    "@angular/platform-browser": "^8.0.0",
    "@angular/platform-browser-dynamic": "^8.0.0",
    "@angular/platform-server": "^8.1.3",
    "@angular/pwa": "^0.801.2",
    "@angular/router": "^8.0.0",
    "@angular/service-worker": "^8.0.0",
    "@aspnet/signalr": "1.0.3",
    "@ngrx/effects": "^8.2.0",
    "@ngrx/entity": "^8.2.0",
    "@ngrx/router-store": "^8.2.0",
    "@ngrx/store": "^8.2.0",
    "@nguniversal/module-map-ngfactory-loader": "^8.1.1",
    "@ngx-translate/core": "^11.0.1",
    "@ngx-translate/http-loader": "^4.0.0",
    "@nrwl/angular": "8.4.0",
    "@types/file-saver": "^2.0.1",
    "applicationinsights-js": "^1.0.20",
    "aspnet-prerendering": "^3.0.1",
    "core-js": "^2.5.4",
    "file-saver": "^2.0.2",
    "hammerjs": "^2.0.8",
    "ngx-infinite-scroll": "^7.2.0",
    "rxjs": "~6.4.0",
    "zone.js": "^0.9.1"
  },
  "devDependencies": {
    "@angular-devkit/build-angular": "^0.800.1",
    "@angular/cli": "8.1.1",
    "@angular/compiler-cli": "^8.0.0",
    "@angular/language-service": "^8.0.0",
    "@biesbjerg/ngx-translate-extract": "^2.3.4",
    "@cypress/code-coverage": "^1.8.0",
    "@ngrx/store-devtools": "^8.2.0",
    "@nrwl/cypress": "8.4.0",
    "@nrwl/jest": "8.4.0",
    "@nrwl/linter": "^8.4.1",
    "@nrwl/workspace": "8.4.0",
    "@types/applicationinsights-js": "^1.0.9",
    "@types/cypress-cucumber-preprocessor": "^1.12.0",
    "@types/jest": "24.0.9",
    "@types/node": "^12.6.8",
    "codelyzer": "~5.0.1",
    "cypress": "3.4.0",
    "cypress-cucumber-preprocessor": "^1.16.0",
    "dotenv": "6.2.0",
    "istanbul-lib-coverage": "^2.0.5",
    "jest": "24.1.0",
    "jest-preset-angular": "7.0.0",
    "ngrx-store-freeze": "^0.2.4",
    "nyc": "^14.1.1",
    "prettier": "1.16.4",
    "ts-jest": "24.0.0",
    "ts-node": "~7.0.0",
    "tsify": "^4.0.1",
    "tslint": "~5.11.0",
    "typescript": "~3.4.5"
  },
  "cypress-cucumber-preprocessor": {
    "nonGlobalStepDefinitions": true
  }
}

I have following error with this setup:此设置出现以下错误:

SyntaxError: 'import' and 'export' may appear only with 'sourceType: module' SyntaxError:“import”和“export”可能只出现在“sourceType:module”中

I've found an article written by Balázs Tápai: I'm in a Pickle - Configuring Gherkin with NX Workspaces .我找到了 Balázs Tápai 写的一篇文章: 我在泡菜 - 使用 NX 工作区配置 Gherkin It was for some reason not totally complete but really helpful.出于某种原因,它并不完全完整,但确实很有帮助。

After several hours of sweating and crying, I could have a running example.经过几个小时的汗水和哭泣,我可以有一个运行的例子。 Read the article and then follow the following steps:阅读文章,然后按照以下步骤操作:

Set up Gherkin设置小黄瓜

Add npm package添加npm package

npm i -D cypress-cucumber-preprocessor

Please note that tsify is not required.请注意, tsify不是必需的。

Add config file添加配置文件

At the root of the nx project, add a file named cypress-cucumber-preprocessor.config.js The cypress-cucumber-preprocessor property in package.json is redundant and should be removed if present.在 nx 项目的根目录下,添加一个名为cypress-cucumber-preprocessor.config.js的文件package.json中的cypress-cucumber-preprocessor属性是多余的,如果存在则应将其删除。

const path = require("path");

const stepDefinitionsPath = path.resolve(process.cwd(), "./src/integration");
const outputFolder = path.resolve(process.cwd(), "../../cyreport/cucumber-json");

module.exports = {
  nonGlobalStepDefinitions: true,
  stepDefinitions: stepDefinitionsPath,
  commonPath: stepDefinitionsPath, // I added this line, not sure if necessary
  cucumberJson: {
    generate: true,
    outputFolder: outputFolder,
    filePrefix: "",
    fileSuffix: ".cucumber"
  }
};

Write the tests编写测试

In the folder integration of your e2e project:在您的 e2e 项目的文件夹integration中:

Add simple.feature添加simple.feature

Feature: Simple test

  Simple test feature

@focus
Scenario: I always pass
Given I pass
Then I see "the expected text"

Add simple.test.ts添加simple.test.ts

import { assert } from 'console';
import { Given, Then } from 'cypress-cucumber-preprocessor/steps';

Given(/I pass/, () => {
  console.log('Congrats!');
});

Then('I see {string}', (text: string) => {
  console.log(text === 'the expected text');
});

Preprocessed Pickles预处理泡菜

Verify that cypress.json looks like this:验证cypress.json看起来像这样:

{
  "fileServerFolder": ".",
  "fixturesFolder": "./src/fixtures",
  "integrationFolder": "./src/integration",
  "modifyObstructiveCode": false,
  "pluginsFile": "./src/plugins/index",
  "supportFile": "./src/support/index.ts",
  "video": true,
  "videosFolder": "../../dist/cypress/apps/sandbox-e2e/videos",
  "screenshotsFolder": "../../dist/cypress/apps/sandbox-e2e/screenshots",
  "chromeWebSecurity": false,
  "testFiles": "**/*.{feature,features}"
}

Rewrite plugins/index.js重写plugins/index.js

This part is slightly different than the one in the article.这部分与文章中的部分略有不同。

const { preprocessTypescript } = require('@nrwl/cypress/plugins/preprocessor');

// This function is called when a project is opened or re-opened (e.g. due to
// the project's config changing)
module.exports = (on, config) => {
  on('file:preprocessor', preprocessTypescript(config, customizeWebpackConfig));
  return config;
}

function customizeWebpackConfig(webPackConfig) {
  webPackConfig.node = {
    fs: "empty",
    child_process: "empty",
    readline: "empty",
  };

  pushFeature(webPackConfig);
  pushFeatures(webPackConfig);

  return webPackConfig;
}

function pushFeature(webPackConfig) {
  pushModuleRule(webPackConfig, /\.feature$/, 'cypress-cucumber-preprocessor/loader');
}

function pushFeatures(webPackConfig) {
  pushModuleRule(webPackConfig, /\.features$/, 'cypress-cucumber-preprocessor/lib/featuresLoader');
}

function pushModuleRule(webPackConfig, testRegex, loaderLib) {
  webPackConfig.module.rules.push({
   test: testRegex,
   use: [{ loader: loaderLib }]
  });
}

Code coverage?代码覆盖率? Html reporter! Html 记者!

I tried using @cypress/code-coverage but it does not work.我尝试使用@cypress/code-coverage但它不起作用。 So I removed it from the solution.所以我将它从解决方案中删除。

The article describe then how to add html report for Business Owner.本文随后描述了如何为企业主添加 html 报告。 It is straighforward (if you install for dev chalk and cucumber-html-reporter ) thus was not not copied here.它是直截了当的(如果您为 dev chalkcucumber-html-reporter安装)因此没有在这里复制。

I followed this configuration in a related Nx issue on GitHub and it has worked great for us, specifically with handling tsconfig path imports without duplicating them from tsconfig.base.json .在 GitHub 上的一个相关 Nx 问题中遵循了这个配置,它对我们非常有用,特别是在处理 tsconfig 路径导入而不从tsconfig.base.json复制它们时。

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM