Configuración de plugins y steps dinámicos

La config de webpack.

webpack({
      webpackOptions: {
        resolve: {
          extensions: [".ts", ".js"],
        },
        module: {
          rules: [
            {
              test: /\.feature$/,
              use: [
                {
                  loader: "@badeball/cypress-cucumber-preprocessor/webpack",
                  options: config,
                },
              ],
            },
          ],
        },
      },
    })
  );

https://marketplace.visualstudio.com/items?itemName=alexkrechik.cucumberautocomplete

Con esta extension vscode tendra el soporte que necesita para usar cucumber (gherkin)

npm i @badeball/cypress-cucumber-preprocessor @cypress/webpack-preprocessor --legacy-peer-deps

Tampoco hace falta usar expresiones regulares en Cucumber si o si, porque se puede tranquilamente de la siguiente forma (noten que dentro de los {} hay que especificar el tipo de dato que estamos recibiendo):

login.feature

Feature: Login test

    Scenario: I login with correct credentials
        Given I am on the login page
        When I fill on my login and password with "username" and "password"
        Then I should validate that Im logged in

login.js

const {
  Given,
  When,
  Then,
} = require('@badeball/cypress-cucumber-preprocessor');
const { default: LoginWebPage } = require('../../../pages/LoginPage');

let loginPage;

Given('I am on the login page', () => {
  loginPage = new LoginWebPage();
  loginPage.visit();
  loginPage.isLoadPage();
});

When(
  'I fill on my login and password with {string} and {string}',
  (username, password) => {
    loginPage = new LoginWebPage();
    loginPage.doLogin(username, password);
  }
);

Then('I should validate that Im logged in', () => {
  loginPage = new LoginWebPage();
  loginPage.validateSuccessfulLogin();
});

Para que funcione el webpack se debe instalar la dependencia npm install webpack --legacy-peer-deps usar el --legacy-peer-deps porque hay problemas con la versión de [email protected]

Pasara entendimiento del negocio y de cada uno de los miembros es mejor que se vea una visión general de las pruebas automatizadas y que se entienda el comportamiento del usuario ya que es mas entendible para todos.

No se visualiza el link

En mi caso me funcionó con la siguiente configuración:

await preprocessor.addCucumberPreprocessorPlugin(on,config)

const options = {
webpackOptions: {
module: {
rules: [
{
test: /.feature$/,
use: [
{
loader: ‘@badeball/cypress-cucumber-preprocessor/webpack’,
options: config,
},
],
},
],
},
},

};

on(‘file:preprocessor’, webpack(options));

Los links de las dependencias requeridas en la clase

badeball/cypress-cucumber-preprocessor
cypress/webpack-preprocessor