How do I deal with duplicated testing steps in Cypress?

Question

Writing test cases using Cypress and Cucumber.

I have a few test cases written in Cucumber Syntax like following:

@focus
Scenario: All Accessibility tabs (Color scheme, Font size, Zoom) are visible when a user configures navigation.show_accessibility to be true
    Given Set navigation.show_accessibility to true
    When Trigger Accessibility configuration window
    Then Accessibility window has three tabs

@focus
Scenario: All Accessibility tabs (Color scheme, Font size, Zoom) are visible when a user configures navigation.show_accessibility to be false
    Given Set navigation.show_accessibility to false
    When Trigger Accessibility configuration window
    Then Accessibility window has three tabs

As we can see, among the two test cases, there are two testing steps that is present in all of them.

In implementation files, it is a better practice to group steps that belong to a test case together in the same order as they are in the Cucumber file. In my case, I would have something similar to this:

//All Accessibility tabs (Color scheme, Font size, Zoom) are visible when a user configures navigation.show_accessibility to be true
Given('Set navigation.show_accessibility to true', () => {
});

When('Trigger Accessibility configuration window', () => {
});

Then('Accessibility window has three tabs', () => {
});

//All Accessibility tabs (Color scheme, Font size, Zoom) are visible when a user configures navigation.show_accessibility to be false
Given('Set navigation.show_accessibility to false', () => {
});

When('Trigger Accessibility configuration window', () => {
});

Then('Accessibility window has three tabs', () => {
});

As we can see, I would end up with a few identical step implementations in my file. My question is:

• How do I organize my implementation steps in a logical manner as in its Cucumber and not have any duplicated steps in my implementation file?

Answer 1

I recommend reading this post: https://github.com/TheBrainFamily/cypress-cucumber-preprocessor/issues/60 it deals with basically your situation with the exception that the same step definition names are in different files.

Although I haven't tried it myself now, it does seem from the discussion on the linked github page that cypress-cucumber in the past just used the first loaded step, but it was later changed in a way that you get an exception in such a situation. So it seems your example would not run and you'd receive "Multiple step definitions match" exception.

It'd be nice if you tried it and confirmed if this is true, so that we have all information even here in this question.

Answer 2

Don't Repeat yourself: Define function once and call with parameters to decide lower level function calls

I am not sure about test structure between cypress & Cucumber; but in general I would make accessibility configuration a high level function where true|false are parameters.

Based on decision logic inside the higher level function, lower level setting functions will be called as required.

Answer 3

In cucumber framework there is no one to one mapping between feature file and step definition. Cucumber just goes through all step definition classes and see of there is any definition for the step from feature file.

So you cannot and shouldn't have duplicate step definition for same step.

1. As the term says step definition its not Feature definition you shouldn't focus on have to make step definition look exactly like feature file.

2. If a step has same name it means it supposed to do the same thing under the hood , so you don't have to have duplicate step definition for that .

3. use page object model :

eg:

homepage class:

class homepage(){
  function login(){
     username.sendkeys("something")
     password.sendkeys("something")
     password.submit()
 }
}

step definition

  import homepage
   
   homepage = new homepage()

   @When("User credentials are valid"){
        homepage.login()
   }

   @Then(" Dashboard is displayed"){
          
         expect(dashboard).to.be.displayed)
   }
  
}

Feature File:

   Scenario : User authorization
   Given: User in homepage
   When: user credentials are valid
   Then: Dashboard is displayed