Cypress.io 搭配 cucumber 進行測試

// cypress/plugins/index.js
const cucumber = require("cypress-cucumber-preprocessor").default;

module.exports = (on, config) => {
  on("file:preprocessor", cucumber());
};

// cypress.json
{
  "testFiles": "**/*.feature",
  "ignoreTestFiles": ["*.js"]
}

"cypress-cucumber-preprocessor": {
  "nonGlobalStepDefinitions": true
}

import { Given, When, Then } from 'cypress-cucumber-preprocessor/steps';
Given(/^One given step$/, () => {
   ...
});
Given(/^another given step$/, () => {
   ...
});

When(/^Some other when step$/, () => {
  ...
});

Then(/^I have some results$/, () => {
  ...
});

{
    "cucumberautocomplete.steps": [
        "cypress/integration/**/*.js",
        "test/features/step_definitions/*.js",
        "node_modules/qa-lib/src/step_definitions/*.js"
    ],
	"cucumberautocomplete.strictGherkinCompletion": true
}

var { Given, Then, When } = require("cypress-cucumber-preprocessor/steps");

Given(/^瀏覽 Google 首頁$/, function () {
  console.log("step1");
});
When(/^我輸入 art的辦公桌$/, function () {
  console.log("step2");
});
Then(/^會出現搜尋結果$/, function () {
  console.log("step3");
});

var { Given, Then, When } = require("cypress-cucumber-preprocessor/steps");

const SEARCH_FIELD = "input[type=text]";
const SEARCH_BUTTON = "input[type=submit]";

class GoogleSearchPage {
  static visit() {
    cy.visit("http://www.google.com");
  }

  static type(query) {
    cy.get(SEARCH_FIELD).type(query);
  }

  static pressSearch() {
    cy.get(SEARCH_BUTTON).contains("Google 搜尋").click({ force: true });
  }
}

const RESULT_LINK = "h3";
class GoogleResultsPage {
  static expect() {
    return {
      toHaveResults: () => {
        cy.get(RESULT_LINK)
          .its("length")
          .then((length) => {
            expect(length).to.be.greaterThan(5);
          });
      },
    };
  }
}

Given(/^瀏覽 Google 首頁$/, function () {
  GoogleSearchPage.visit();
});
When(/^我輸入 art的辦公桌$/, function () {
  GoogleSearchPage.type("art的辦公桌");
  GoogleSearchPage.pressSearch();
});
Then(/^會出現搜尋結果$/, function () {
  GoogleResultsPage.expect().toHaveResults();
});

describe("搜尋測試", () => {
  it("搜尋業務 art 應該會出現 1 筆資料", async function () {
    var expected = 1;
    await SearchPageObject.Search({ search: "art" });
    let result = await SearchPageObject.GetResult();
    var actual = result.data.length;
    assert.equal(actual, expected);
  });
});

// cypress/plugins/index.js
const { cypressConfigResolver } = require("../config/cypress-config-resolver");
module.exports = (on, config) => {
  on("file:preprocessor", cucumber());
  return cypressConfigResolver();
};

// cypress/config/cypress-config-resolver.js
const fs = require("fs-extra");
const path = require("path");

const cypressConfigResolverByFile = (filename) => {
  const pathToConfigFile = path.resolve(__dirname, `${filename}.json`);
  return fs.readJsonSync(pathToConfigFile);
};
const cypressConfigResolver = () =>
  cypressConfigResolverByFile(process.env.CYPRESS_ENV || "localhost");

module.exports.cypressConfigResolver = cypressConfigResolver;

// package.json
{
	"scripts": {
		"cy:open:localhost": "SET CYPRESS_ENV=localhost && npm run cy:open",
		"cy:open:lab": "SET CYPRESS_ENV=lab && npm run cy:open",
		"cy:open": "cypress open",
	}
}

// cypress/config/localhost.json
{
	"baseUrl": "https://www.google.es"
}

// cypress/config/production.json
{
    "baseUrl": "https://www.google.com"
}

//package.json
{
	"cy:run1": "cypress run --env TAGS='@e2e-test' --spec 'cypress/integration/**/*.feature'",
	"cy:run2": "cypress run --headless --browser chrome --spec 'cypress/integration/moneyIn/orderqaSearch.feature,cypress/integration/moneyIn/orderqaCreate.feature'"
}

// package.json
{
  "cypress-cucumber-preprocessor": {
    "nonGlobalStepDefinitions": true,
    "cucumberJson": {
      "generate": true,
      "outputFolder": "cypress/cucumber-json",
      "filePrefix": "",
      "fileSuffix": ".cucumber"
    }
  }
}

// cucumber-html-reporter.js
const reporter = require("cucumber-html-reporter");

const options = {
  theme: "hierarchy", // Available: ['bootstrap', 'hierarchy', 'foundation', 'simple'] Type: String
  jsonDir: "cypress/cucumber-json",
  output: "reports/cucumber_report.html",
  reportSuiteAsScenarios: true,
  scenarioTimestamp: true,
  launchReport: true,
  ignoreBadJsonFile: true,
  scenarioTimestamp: true,
  metadata: {
    "App Version": "1.0.0",
    "Test Environment": "STAGING",
    Browser: "Chrome  54.0.2840.98",
    Platform: "Windows 10",
    Parallel: "Scenarios",
    Executed: "Remote",
  },
};

reporter.generate(options);