cypress-scenario-runner v2.1.2

DEPRECATED: No longer maintained. For details, see: https://github.com/mpetrovich/cypress-scenario-runner/issues/22

Cypress Scenario Runner

Run Gherkin scenarios with Cypress without a single line of code.

By adding a few HTML attributes:

<input … data-test="email input" />
<input … data-test="password input" />
<button … data-test="login button">Login</button>

Cypress Scenario Runner can run Gherkin scenarios without you needing to write any Cypress code like cy.visit() or cy.click():

Feature: Login
===

Scenario: Successful login
---
Given I navigate to "login"
And I set "email input" to "name@example.com"
And I set "password input" to "abc123"
When I click "login button"
Then I should be on "home"

Table of contents

• Installation
• Usage
  • Writing test scenarios
  • Annotating HTML elements
  • Setting routes
  • Running scenarios
• Configuration
• Contributing

Installation

Requires:

• Node.js 8.0+
• cypress
• cypress-cucumber-preprocessor

npm install --save-dev cypress cypress-cucumber-preprocessor cypress-scenario-runner && $(npm bin)/install-cypress-scenario-runner

Usage

Writing test scenarios

Test scenarios are written in Gherkin syntax:

Feature: Login
===

Scenario: Successful login
---
Given I navigate to "login"
And I set "email input" to "name@example.com"
And I set "password input" to "abc123"
When I click "login button"
Then I should be on "home"

Each line in the scenario is called a step. cypress-scenario-runner works by using a predefined set of reusable step templates:

Text in {brackets} above are parameters whose values must be (double) quoted in the scenario. For example, this step template:

I set {element} to {string}

would appear as this in the scenario:

And I set "email input" to "name@example.com"

In addition, the full Gherkin specification is supported along with additional enhancements by cypress-cucumber-preprocessor. For instance, you can use scenario templates/outlines, data tables, and tags in your scenarios.

See the cypress/integration/ directory for more examples.

Annotating HTML elements

HTML attributes are used to map {element} step parameters to their corresponding HTML elements. data-test attributes is used by default, but this is configurable.

<!-- login.html -->
<input name="email" data-test="email input" />
<input name="password" data-test="password input" />
<button type="submit" data-test="login button">Login</button>

Setting routes

Routes need to provided for navigation steps like these to work:

Given I navigate to "login"

A map of all label => path routes should be provided to addSteps() in the cypress/support/step_definitions/index.js file created during installation. Route paths can be relative to the web root or absolute URLs.

const { addSteps } = require('cypress-scenario-runner')
addSteps({
+	routes: {
+		login: '/login',
+	},
})

Running scenarios

Scenario files can be run directly with Cypress:

$(npm bin)/cypress run [files]

or, using the Cypress UI:

$(npm bin)/cypress open

Configuration

Coming soon.