Using the keywords Given/When/Then with Cypress but without Cucumber
Tags: cypress, testautomation, e2etesting, givenwhenthen
Published: 2021-09-07 13:57:50

## Don't get stuck using Cucumber to make use of the keywords Given/When/Then

Many people still think that using **Cucumber** is the solution for non-technical people to start writing automated tests since you write the specification of how the software should behave in a natural language, and that specification can be run to test the system.

However, for such a natural language to function as an automated test script, we need code that interprets such language (**Given/When/Then**). That is, the natural language layer is a high-level abstraction level, while the code that interprets it is the “low level”.

Often in Cypress discussion groups I see people asking for help with the Cucumber plugin integration, bugs and other issues which could have been completely avoided if Cucumber weren't being used in the first place.

Then you tell me, "But the test is so readable when I use the keywords **Given/When/Then**."

And I answer you: "Nothing prevents you from continuing to use these keywords without using Cucumber."

Let's see how?

Imagine an example of a web search engine.

In [**BDD**](https://en.wikipedia.org/wiki/Behavior-driven_development) (**behaviour-driven development**) we would have the following requirement:

### Feature: Web search engine

> As a world-wide web user
>
> I want to search for subjects of my interest
>
> To deepen my knowledge

In [**Gherkin**](https://en.wikipedia.org/wiki/Cucumber_(software)#Gherkin_language), we could think of the following scenarios:

**Scenario 1: Search by typing a term and clicking the magnifying glass**

> Given I access the search engine page
>
> When I type a term and click on the magnifying glass
>
> Then I see a list of results about the term I was looking for

**Scenario 2: Search by typing a term and pressing ENTER**

> Given I access the search engine page
>
> When I type a term and press ENTER
>
> Then I see a list of results about the term I was looking for

Now, let's see an example where I covered such scenarios with Cypress without using Cucumber, but at the same time, without losing the use of the keywords **Given/When/Then**.

```js
/* search.spec.js
 *
 * As a world-wide web user
 * I want to search for subjects of my interest
 * To deepen my knowledge
 */

describe('Web search engine', () => {
  context('Given I access the search engine page', () => {
    beforeEach(() => {
      cy.visit('https://duckduckgo.com')
    })

    context('When I type a term and click on the magnifying glass', () => {
      beforeEach(() => {
        cy.get('#search_form_input_homepage')
          .type('cypress')
        cy.get('#search_button_homepage')
          .click()
      })

      it('Then I see a list of results about the term I was looking for', () => {
        cy.get('.results .result')
          .should('have.length', 11)
      })
    })

    context('When I type a term and press ENTER', () => {
      beforeEach(() => {
        cy.get('#search_form_input_homepage')
          .type('cypress{enter}')
      })

      it('Then I see a list of results about the term I was looking for', () => {
        cy.get('.results .result')
          .should('have.length', 11)
      })
    })
  })
})
```

And this is the result of the tests after running them in headless mode.

```sh
Web search engine
  Given I access the search engine page
    When I type a term and click on the magnifying glass
      ✓ Then I see a list of results about the term I was looking for (4173ms)
    When I type a term and press ENTER
      ✓ Then I see a list of results about the term I was looking for (1973ms)
```

In other words, I still have the keywords **Given/When/Then**, my tests are still legible, and I haven't wasted a single minute integrating Cypress with Cucumber. So easy!

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/utdrfo5thietmclrkrjh.png)

By the way, recently, I talked about ["**Writing Cypress Tests Without Cucumber**,"](https://youtu.be/zcoAWehiZzg) where I went beyond the usage of the keywords **Given/When/Then**, also showing how to run the same test based on a pre-defined list of data and how to run tests using tags, **all without Cucumber**. [**Check it out on YouTube**](https://youtu.be/zcoAWehiZzg).

___

Curious and want to learn more about testing automation with [**Cypress**](https://cypress.io)? Check out my online courses on [**Udemy**](https://udemy.com/user/walmyr).

___

👋 Until next time and happy testing!

___

This post was originally published in Portuguese at the [**Talking About Testing**](https://talkingabouttesting.com/2021/07/08/usando-dado-quando-entao-sem-cucumber-com-cypress/) blog.