Используйте файлы .feature в cypress с nrwl nx

У меня есть проект Angular с рабочим пространством Nrwl Nx. Для моего теста e2e я использую кипарис с машинописным текстом. Для этих тестов я хотел бы включить поддержку файлов функций с синтаксисом Gherkin.

Я добавил в проект "кипарис-огурец-препроцессор". Эта настройка отлично работает, когда я пишу привязки с помощью 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());
};

Настройка для 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
  }
}

У меня следующая ошибка с этой настройкой:

SyntaxError: 'import' и 'export' могут появляться только с 'sourceType: module'


typescript nrwl-nx cypress cucumber
person Alex Wissmann    schedule 14.10.2019    source источник
comment
Думаю, у вас более старая версия babel - попробуйте с помощью npm install babel-preset-es2017 --save-dev   -  person Prany    schedule 14.10.2019
comment
Я вообще не устанавливал babel в свой проект. Плагин cypress не требует этого, если я следую инструкциям.   -  person Alex Wissmann    schedule 15.10.2019
comment
Устанавливается с кипарисом, зайдите в папку \ node_modules   -  person Prany    schedule 15.10.2019
comment
Я попробовал, но ничего не вышло.   -  person Alex Wissmann    schedule 15.10.2019
comment
хорошо, согласно официальному препроцессору cucmber для машинописного текста, который они просят иметь tsify - npm install tsify (github.com/TheBrainFamily/)   -  person Prany    schedule 15.10.2019
comment
Я добавил свой package.json. Установил цифы. Я выполнил полную настройку инструкций. Думаю, проблема в том, что я использую preprocessTypescript Nrwl   -  person Alex Wissmann    schedule 15.10.2019
comment
Одним из самых простых решений является клонирование / загрузка официального тестового репозитория и внесение в него изменений. Вот ссылка github.com/TheBrainFamily/   -  person Prany    schedule 15.10.2019
comment
Спасибо за совет. Я попробую   -  person Alex Wissmann    schedule 21.10.2019

Ответы (1)


arrow_upward
4
arrow_downward

Я нашел статью, написанную Балажем Тапаем: I'm in a pickle - настройка Gherkin с помощью NX Workspaces. По какой-то причине это было не до конца, но действительно полезно.

После нескольких часов вспотевания и плача у меня был рабочий пример. Прочтите статью, а затем выполните следующие действия:

Настроить Gherkin

Добавить пакет npm

npm i -D cypress-cucumber-preprocessor

Обратите внимание, что tsify не требуется.

Добавить файл конфигурации

В корень проекта nx добавьте файл с именем cypress-cucumber-preprocessor.config.js. Свойство cypress-cucumber-preprocessor в package.json является избыточным и должно быть удалено, если оно есть.

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"
  }
};

Напишите тесты

В папке integration вашего проекта e2e:

Добавить simple.feature

Feature: Simple test

  Simple test feature

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

Добавить 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');
});

Предварительно обработанные соленья

Убедитесь, что 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}"
}

Перепишите plugins/index.js

Эта часть немного отличается от той, что в статье.

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 }]
  });
}

Покрытие кода? Html-репортер!

Я пробовал использовать @cypress/code-coverage, но это не работает. Я удалил его из раствора.

Затем в статье описывается, как добавить отчет в формате HTML для Владельца бизнеса. Это просто (если вы устанавливаете для dev chalk и cucumber-html-reporter), поэтому здесь не было скопировано.

person Francois Stock    schedule 06.11.2020