Starter project for UI end-to-end testing with Cypress and Cucumber using Typescript.
-
Write your tests as scenarios in the a
.feature
file. A.feature
file is an entry point to the Cucumber tests. This is a file where you will describe your tests in Descriptive language (Like English) by using the Gherkin Syntax. A feature file can contain a scenario or can contain many scenarios in a single feature file but it usually contains a list of scenarios. -
After your
.feature
files have been created, you can now begin to write code here that turns the phrases in your.feature
files into concrete actions.
- Clone and
cd
into the repo, runnpm install
to install project's dependencies. - Type
npm run test
to run the example E2E tests, ornpm run test:ci
in context of the CI/CD pipeline.
- Tests (here's where all your test .feature files should go)
features
folder. - Step implementation code should go in
step-definitions
folder.
- Write your first scenario
- Create an empty file called
Google.feature
infeatures
folder with the following content:
- Create an empty file called
Feature: Google
Background:
When I visit "https://www.google.com/"
Scenario: I see a search bar and Google search button
Then I see a search bar
And I see a Google search button
Feature
: Name of the feature that want to test.Background
: Where you can define all the actions before each scenario, similar to theBeforeEach
hook in Cypress.Scenario
: Equivalent to theit
ortest
hook in Cypress. It defines all the subsequent tests in your.feature
file.Given
,And
,Then
: Gherkin Keywords that indidate the beginning of a step, phrase, or an assertion.
- Write your step definitions in code that turn your
.feature
files into actions- In
cypress/common
folder, this would be where all the code for parsing your.feature
files should be. - Create a
index.ts
file in the folder with the following content:
- In
import { Given, And, Then } from 'cypress-cucumber-preprocessor/steps'
Given('I visit {string}', (url: string) => {
cy.visit(url)
})
And('I see a search bar', () => {
cy.get(`input[title="Search"]`).should('be.visible')
})
Then('I see a Google search button', () => {
cy.get(`input[value="Google Search"]`).should('be.visible')
})
Create another file called Rivian.feature
in the features
folder with the content bellow:
Feature: Rivian
Background:
Given I visit "https://rivian.com/"
Scenario: When I visit R1T page
When I click on "R1T" link
Then I am redirected to "/r1t" page
And I see "R1T" text
And I see "EPA estimated range of 314 miles" text
And I see "Starting at $67,500" text
Scenario: When I visit R1S page
When I click on "R1S" link
Then I am redirected to "/r1s" page
And I see "R1S" text
And I see "EPA estimated range of 316 miles" text
And I see "Starting at $70,000" text
Scenario: When I visit Gear Shop page
When I click on "Gear Shop" link
Then I am redirected to "/gear-shop" page
And I see "All Gear" text
Scenario: When I visit Fleet page
When I click on "Fleet" link
Then I am redirected to "/fleet" page
And I see "Electrify your fleet" text
And I see "Efficient, sustainable solutions for your business and the planet." text
And I see "Rivian is developing vehicles, software, charging solutions and services designed to help increase uptime and lower operating costs while helping businesses achieve ambitious sustainability goals." text
By combining what we have above, update index.ts
file with the following to add a few additional step implementations for Rivian.feature
test:
import { Given, And, Then, When } from 'cypress-cucumber-preprocessor/steps'
Given('I visit {string}', (url: string) => {
cy.visit(url)
})
And('I see a search bar', () => {
cy.get(`input[title="Search"]`).should('be.visible')
})
Then('I see a Google search button', () => {
cy.get(`input[value="Google Search"]`).should('be.visible')
})
When('I click on {string} link', (text: string) => {
cy.get('[data-testid=nav-link]').contains(text).click()
})
Then('I am redirected to {string} page', (route: string) => {
cy.url().should('include', route)
})
And('I see {string} text', (text: string) => {
cy.contains(text)
})
- 10 Minute Tutorial on Cucumber.
- Learn more about the Gherkin Syntax.
- More on Gherkin Keywords.