DEV Community

Cover image for Using the keywords Given/When/Then with Cypress but without Cucumber
Walmyr
Walmyr

Posted on • Updated on

Using the keywords Given/When/Then with Cypress but without Cucumber

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 (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, 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.



/* 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)
      })
    })
  })
})


Enter fullscreen mode Exit fullscreen mode

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



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)


Enter fullscreen mode Exit fullscreen mode

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

By the way, recently, I talked about "Writing Cypress Tests Without Cucumber," 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.


Curious and want to learn more about testing automation with Cypress? Check out my online courses on Udemy.


👋 Until next time and happy testing!


This post was originally published in Portuguese at the Talking About Testing blog.

Top comments (8)

Collapse
 
rforjoe profile image
Richard Forjoe

Hi Walmyr, nice. Curious how this works with common steps ?

Does it still reference the order of running the steps from the feature files or it’s run as per the order in your spec file?

Collapse
 
walmyrlimaesilv profile image
Walmyr

Hi Richard, in this example there's no feature files, only spec files.
And when there are steps that are the same for more than one test, what I do is to create a context, and inside of the context I use a beforeEach hook, as shown in the content.
I hope this clarifies things, if not, please let me know.

Collapse
 
rforjoe profile image
Richard Forjoe

Thank you. Will need to give it a try 👌🙏🏾

Thread Thread
 
walmyrlimaesilv profile image
Walmyr • Edited

For other examples, take a look at this gist gist.github.com/wlsf82/0110f4455a6....

Thread Thread
 
walmyrlimaesilv profile image
Walmyr • Edited

This is the code of my talk at Global Tester's Day 2021, and the slides can be found here slideshare.net/walmyrlimasilvafilh....

Thread Thread
 
rforjoe profile image
Richard Forjoe

Thank you 🙏🏾👌

Collapse
 
cypresscecelia profile image
Cecelia Martinez

This is neat! Great post as always, Walmyr!

Collapse
 
walmyrlimaesilv profile image
Walmyr

Thanks Cecelia, I'm glad you liked it!