The Quality Assurance Engineer

Cypress and Gherkin in Practice: Insights and Reflections

—

by

Anthony
in ,

We were deciding on an automation framework. We wanted something easy to set up, dependable, and user-friendly. I had just gotten mid-way through The Cucumber Book: Behaviour-Driven Development for Testers and Developers. I was excited to implement Cucumber into whatever framework we went with.

We ultimately chose a combination of Cypress and Cucumber’s Behavioral Driven Development (BDD) framework for the limited barrier to entry, built-in commands, and the readability that Gherkin (Cucumber) provides.

For those of you who don’t know. Cucumber uses a syntax known as Gherkin. Gherkin is a set of grammar rules that makes plain text structured enough for Cucumber to understand. The scenario above is written in Gherkin. Gherkin looks like this:

Scenario: Breaker guesses a word
  Given the Maker has chosen a word
  When the Breaker makes a guess
  Then the Maker is asked to score

The clear advantage of Cucumber and Gherkin is to assist in creating test cases that are easily readable to anyone, regardless of their technical ability.

It didn’t take long to get the framework up and running. We were scripting like there was no tomorrow…until Cypress v10.

The Goal

We stayed on Cypress v9 for quite some time. Eventually, we decided since our adopted framework was still relatively new, it would be a good low-risk time to update Cypress. Our thought process was, let’s try the update and learn from our mistakes.

The update took months! It was so long in fact that instead of updating to Cypress v10, Cypress v11 was released and we used that instead.

What happened?

Still to this day, we aren’t sure why the update failed. All we know is the way we implemented the cucumber-preprocessor had something to do with it.

After updating Cypress to v10, our scripts stopped running. We understood that working with Cypress and the cypress-cucumber-preprocessor meant re-arranging the framework.

We tried using great tutorials, such as https://testersdock.com/cypress-10-upgrade/. For some reason, we couldn’t get Cypress and the plugin to play nice together.

No matter what we tried, we continued to receive errors including webpack compilation errors.

Error: Webpack Compilation Error ./cypress/e2e/test.feature 1:14 Module parse failed: Unexpected token (1:14) You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders

We thought, maybe the plugin isn’t being maintained at the same speed that Cypress is. Well, in the past, Cypress updates were published more frequently, with as many as 6 releases in a month. Between June and October, there were 16 total releases for Cypress v10:

  • 10.0.1 — Released 6/1/2022
  • 10.0.2 — Released 6/2/2022
  • 10.0.3 — Released 6/3/2022
  • 10.1.0 — Released 6/10/2022
  • 10.2.0 — Released 6/21/2022
  • 10.3.0 — Released 6/28/2022

The cypress-cucumber-preprocessor (this is the cucumber plugin used with Cypress) is updated just as frequently, with the same number of releases around the same time frame. The maintenance of the plugin wasn’t the issue.

It wasn’t an issue of a deprecated plugin with an updated Cypress but we were out of time.

Solution

In the end, due to time constraints, we decided to remove the cypress-cucumber-preprocessor and update it to Cypress v11. Everything ran fine after migrating our scripts accordingly. We wasted a lot of time troubleshooting to get the cucumber-preprocessor to play nicely.

Lessons Learned

The simpler the better.

There was a key element missing from our implementation that we weren’t able to better understand. Maybe we didn’t have the right people on the project. Maybe there was some bug in the plugin.

Luckily this ordeal occurred while our framework was in its infancy. I don’t know how we would have handled future updates had we not pulled Cucumber from our framework or if automaton via Cypress would have been worth pursuing.

Thankfully the spec file format in Cypress helps achieve a similar user-friendly Gherkin type syntax without the use of Cucumber. The less number of dependencies the better.

Conclusion

The developers work hard on the cypress-cucumber-preprocessor. It’s a quality product that has just under 300k downloads/week. There was a key element missing from our implementation that we weren’t able to better understand.

It turned out that Cucumber wasn’t for us and we were okay with that. Would I give it another shot? Probably not.

Do you have experience using the cypress-cucumber-preprocessor? How has your experience been?

References

https://docs.cypress.io/guides/references/changelog#10–7-0

https://github.com/badeball/cypress-cucumber-preprocessor/blob/master/CHANGELOG.md

Share this: