ใช้ไฟล์ .feature ใน cypress ด้วย nrwl nx

ฉันมีโปรเจ็กต์เชิงมุมพร้อมพื้นที่ทำงาน Nrwl Nx สำหรับการทดสอบ e2e ของฉัน ฉันใช้ cypress กับ typescript สำหรับการทดสอบนี้ ฉันต้องการเปิดใช้งานการรองรับไฟล์ฟีเจอร์ด้วย Gherkin Syntax

ฉันเพิ่ม "cypress-cucumber-preprocessor" ให้กับโปรเจ็กต์ การตั้งค่านี้ทำงานได้ดีเมื่อฉันเขียนการเชื่อมโยงด้วย js แต่ทันทีที่ฉันพยายามตั้งค่าขั้นตอนสำหรับ typescript ฉันพบข้อผิดพลาดและไม่สามารถทำงานได้

ตั้งค่าสำหรับ 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: 'นำเข้า' และ 'ส่งออก' อาจปรากฏเฉพาะกับ 'sourceType: โมดูล'


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
มันถูกติดตั้งด้วย cypress ให้ตรวจสอบในโฟลเดอร์ \node_modules   -  person Prany    schedule 15.10.2019
comment
ฉันลองแล้ว แต่มันใช้งานไม่ได้   -  person Alex Wissmann    schedule 15.10.2019
comment
ตกลงตามตัวประมวลผลล่วงหน้า cucmber อย่างเป็นทางการสำหรับ typescript พวกเขาขอให้มี tsify - npm ติดตั้ง tsify (github.com/TheBrainFamily/)   -  person Prany    schedule 15.10.2019
comment
ฉันเพิ่ม package.json ของฉันแล้ว ฉันติดตั้ง tsify แล้ว ฉันปฏิบัติตามการตั้งค่าคำแนะนำทั้งหมดแล้ว ฉันเดาว่าปัญหาคือฉันใช้ Nrwl preprocessTypescript   -  person Alex Wissmann    schedule 15.10.2019
comment
หนึ่งในวิธีแก้ปัญหาที่ง่ายที่สุดคือการโคลน/ดาวน์โหลด repo ทดสอบอย่างเป็นทางการและทำการเปลี่ยนแปลงของคุณ นี่คือลิงก์ github.com/TheBrainFamily/   -  person Prany    schedule 15.10.2019
comment
ขอบคุณสำหรับทิป. ฉันจะลองดู   -  person Alex Wissmann    schedule 21.10.2019

คำตอบ (1)


arrow_upward
4
arrow_downward

ฉันพบบทความที่เขียนโดย Balázs Tápai: ฉันอยู่ใน Pickle - กำลังกำหนดค่า Gherkin ด้วย NX Workspaces ด้วยเหตุผลบางอย่างที่ไม่สมบูรณ์ทั้งหมดแต่มีประโยชน์จริงๆ

หลังจากเสียเหงื่อและร้องไห้ไปหลายชั่วโมง ฉันก็ขอยกตัวอย่างการวิ่งได้ อ่านบทความแล้วทำตามขั้นตอนต่อไปนี้:

ตั้งค่าเกอร์คิน

เพิ่มแพ็คเกจ 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