How to Run Tests with Cypress and Cucumber: Tutorial

Related Product

By combining Cypress and Cucumber, teams can create easily decipherable, maintainable test while leveraging Cypress ’ s fast performance and powerful debugging capabilities.

This clause explores how to use BDD with and integrate it with for automated testing.

What is the Cypress Framework?

is a JavaScript-based built on Mocha – a feature-rich JavaScript examination framework escape on and in the browser, do asynchronous examine simpleton and convenient. It also apply a assertion library and a browser to match with any.

What is Cucumber?

is a tool that endorse behavior-driven development (BDD). It pass machine-driven espousal tests written in BDD formatting. Cucumber was initially written in the Ruby programming lyric and provided a way to publish tryout that anybody can understand, regardless of their technical knowledge. It explicate test steps and application behavior utilise the Cypress Gherkin language in simple English.

Why use Cucumber for Testing?

is important as a testing tool for the next reasons:

1. Cucumber is open-source and gratuitous to use.
2. Using Cucumber, QAs can write your test scripts in multiple languages such as Java, Ruby, .NET, Python, etc.
3. It integrates withSelenium, Ruby on Rails, Cypress, Watir, and other web-based testing tool.
4. Cucumber is one of the most widely habituate BDD tools.

What is Cypress Cucumber Preprocessor

Theis a plugin that let you to use Cucumber-style syntax (Gherkin) in your Cypress tests, enabling Behavior-Driven Development (BDD) with Cypress.

It bridge the gap between Cypress and Cucumber to let you write test scenario in Gherkin, define test pace definitions in JavaScript or TypeScript and run them with the rich tryout runner of Cypress.

Overview of Behavior-Driven Development

is a package development approaching that improves collaborationism between developers, testers, and concern stakeholders.

It ensures a shared understanding of how an application should bear from a user ’ s perspective. Using plain language and real-world examples, BDD makes requirements clear and approachable to both technical and non-technical team.

As an propagation of (TDD), it focuses on what the scheme should do rather than how it is built.

Key Features of BDD

1. Influenced by TDD: Follows a test-first approach by outlining anticipate behavior before implementation.

2. Open communicating: Uses a share, non-technical language to bridge the gap between developers, testers, and job squad.

3. User-focused testing: Tests are based on real-world scenarios and wait system deportment.

4. Structured format: Uses the “ Given-When-Then ” approach for publish test cases distinctly and systematically.

• Given:Sets the initial province.
• When:Describes the action taken.
• Then:Define the expected upshot.

5. Focuses on behavior: Rather than focusing on implementation details, it insure the system behave as expected from an end-user position.

6. Encourages teamwork: Helps developers, examiner, and business stakeholders collaborate effectively.

7. Easier to understand: Since tests are written in plain language, they can be reviewed by anyone, even non-technical team members.

What is Gherkin

is a domain-specific language (DSL) write in champaign schoolbook that is used to write test scenarios in a integrated and human-readable format. It follows the & # 8220;Given-When-Then& # 8221; syntax, making it easy for both technical and non-technical stakeholders to understand tryout cases. Gherkin is commonly utilise in Behavior-Driven Development (BDD) to define expected system behavior in simple term.

Here ’ s how Gherkin Works with Cypress and Cucumber:

• Readable Test Scenarios& # 8211; Makes test cases easy to understand with natural language.
• Seamless Integration& # 8211; In Cypress, Gherkin can be used with plugins like Cucumber, and preprocessor to write BDD-style tests.
• Better Collaboration& # 8211; Helps developers, testers, and job stakeholders act together by using a shared language.
• Automates Execution& # 8211; Gherkin scenario are map to step definition in Cypress. This allows for the effective running of machine-controlled tests.

How to Integrate Cypress and Cucumber

Cypress and Cucumber can be mix to write clear, structure, and user-friendly exam cases use Behavior-Driven Development (BDD). Cypress provides a fast and true examination framework, while Cucumber allows test to be indite in plain language expend Gherkin.

1. Installation

To mix Cypress with Cucumber, offset by establish Cypress and the necessary Cucumber preprocessor.

Step 1: Install Cypress

Run the following dictation to install Cypress locally:

npm install cypress

Step 2: Install Cucumber for Cypress

Install the Cucumber preprocessor for Cypress using:

npm install -- save-dev cypress-cucumber-preprocessor

Step 3: Configure Cypress for Cucumber

Modify the Cypress environment to endorse Cucumber step definitions.

• Update plugins/index.js

Add the following code inside the plugins/index.js file:

For autonomous testing across multiple user personas, check out SUSATest — it explores your app like 10 different real users.

const cucumber = require ('cypress-cucumber-preprocessor ') .default; module.exports = (on, config) = & gt; {on ('file: preprocessor ', cucumber ());};

• Update package.json

Modify package.json to include:

`` cypress-cucumber-preprocessor '': {`` nonGlobalStepDefinitions '': true} Update cypress.json Ensure Cypress recognizes .feature files by adding: {'' testFiles '': `` * * / * .feature ''}

2. Running Cypress Tests with Cucumber

Now that the setup is accomplished, create and run tests using Cypress and Cucumber.

• Writing a Cypress Test

A bare trial in Cypress for logging in:

cy.visit ('/login ') .findByPlaceholderText (/email/) .type ('abc @ gmail.com ') .findByPlaceholderText (/password/) .type ('mypassword ') .findByText ('Log in ') .click () .url () .should ('eq ', '/ ') .window () .its ('localStorage.email ') .should ('eq ', 'abc @ gmail.com');

• Creating a Custom Command

To reuse login functionality, add the following interiorcypress/support/commands.js:

Cypress.Commands.add ('loginWith ', ({e-mail, password}) = & gt; {cy.visit ('/login ') .findByPlaceholderText (/email/) .type (email) .findByPlaceholderText (/password/) .type (password) .findByText ('Log in ') .click ();});

Then, import it in cypress/support/index.js:

importee './commands '; Now, call the custom bidding inside the test: cy.loginWith ({email: 'abc @ gmail.com ', password: 'mypassword'}) .url () .should ('eq ', '/ ') .window () .its ('localStorage.email ') .should ('eq ', 'abc @ gmail.com');

• Using Gherkin with Cucumber

Create a feature filecypress/integration/login.feature:

Feature: Login App Scenario: When I log in Then the url is / And I 'm logged in

• Writing Step Definitions

Define step definition insidecypress/integration/login/login.js:

import {When, Then} from 'cypress-cucumber-preprocessor/steps '; When (' I log in ', () = & gt; {cy.loginWith ({email: 'abc @ gmail.com ', password: 'mypassword '});}); Then ('the url is {word} ', (url) = & gt; {cy.url () .should ('eq ', ` $ {Cypress.config () .baseUrl} $ {url} `);}); Then (`` I 'm logged in '', () = & gt; {cy.window () .its ('localStorage.email ') .should ('eq ', 'abc @ gmail.com ');});

• Running the Test

Execute the test using:

npx cypress exposed

Select the .feature file and run the test. Cucumber will translate the Gherkin step into Cypress bidding.

Talk to an Expert

Adding Parameters to Step Definitions

Parameters in step definitions allow examination scenarios to be more active and recyclable. Instead of hardcoding value, parameters enable tryout to cover different inputs, making them flexible and reduce codification duplication.

To add parameter to step definitions in Cucumber with Cypress,curly twosome {}are used in the characteristic file to define placeholder. These placeholders are then captured as parameter in the stride definition method, allowing dynamic data to be passed directly from the feature file to the test steps.

1. Defining Parameters in the Feature File:

Use curly braces {} to define placeholders for active values.

Example:When I log in with & # 8216; {username} & # 8217; and & # 8216; {password} & # 8217;.

2. Matching Parameters in the Step Definition:

Parameters in the feature file are passed in the like order to the footstep definition method. Each placeholder correspond to a method parameter.

Example:

Feature File (Login Functionality):

Feature: Login Functionality Scenario: Successful login with valid credentials Given the user is on the login page When the exploiter enters `` testuser '' and `` password123 '' Then the user is logged in successfully

Step Definition File (Java):

@ Given (`` the user is on the login page '') public void userIsOnTheLoginPage () {// Navigate to login page} @ When (`` the user enters ' {string} ' and ' {string} ' '') public void userEntersCredentials (String username, String password) {// Enter username and password on the login page} @ Then (`` the user is log in successfully '') public void userIsLoggedIn () {// Verify successful login}

In the above code,{string}acts as a proxy for the username and password. The step definition method receives these values as arguments from the feature file. This allows different input to be tested without changing the step definitions making the test more flexible and easy to preserve.

Functionalities in Cucumber Cypress Tests

Cucumber with Cypress provides several powerful functionality to enhance test automation. These include data-driven testing, working with arrays, grouping tests, using hooks, test tagging and reportage. Each of these features assist improve test efficiency, reusability and maintainability.

1. Data-Driven Testing

Data-driven testing allows running the same test with different sets of data. This is utile for validate multiple input combination without writing separate test cases.

Example:Using Examples in a feature file:

Scenario Outline: Login with different users When I log in with `` & lt; username & gt; '' and `` & lt; password & gt; '' Then I see the splashboard Examples: | username | password | | user1 | pass123 | | user2 | pass456 |

2. Working with Arrays

Cucumber allows handling multiple value using arrays. This is useful when verify leaning or performing operations on multiple particular.

Example:Checking a list of displayed items:

Scenario: Verify displayed point Then I should see the following item | Item1 | | Item2 | | Item3 |Step definition:Then (`` I should see the following items '', (dataTable) = & gt; {const expectedItems = dataTable.raw () .flat (); cy.get ('.items ') .should ('have.length ', expectedItems.length);});

3. Grouping Tests

Tests can be grouped logically using Cucumber ’ s background or scenario outline lineament. This reduces code duplication by go mutual steps before multiple scenario.

Example:

Feature: User Authentication Background: Given the exploiter is on the login page Scenario: Successful login When I enter valid credentials Then I see the dashboard Scenario: Failed login When I inscribe invalid credentials Then I see an erroneousness message  

4. Using Hooks

Hooks (before and after) help execute apparatus and teardown actions before or after tests.

Example:

before (() = & gt; {cy.visit (`` https: //example.com ''); // Runs once before all tryout}); beforeEach (() = & gt; {cy.reload (); // Runs before each test}); after (() = & gt; {cy.clearCookies (); // Runs formerly after all tests});

5. Test Tagging

Tags grant the execution of specific exam scenario ground on requirements.

Example:

@ fume Scenario: Quick login tryout When I log in Then I see the homepage Run alone fume examination: cypress run -- env tags= '' @ smoke ''

6. Reporting

Cucumber generates story that provide brainwave into test execution. Cypress supports diverse reporting plugins like Mochawesome and Cucumber JSON Reports.

Example:Generating report with Mochawesome:

npx cypress run -- reporter mochawesome

​​Why Run Cucumber Cypress Tests with BrowserStack?

Running Cucumber Cypress tryout on BrowserStack provides a scalable and reliable way to test applications across different browser, device, and operating scheme. It helps ensure cross-browser compatibility, rush up test execution, and provides detailed reporting.

• Extensive Browser & amp; Device Coverage: Run tests on 3500+ real desktop and mobile browser, ensuring compatibility across different environments.
• Cloud-Based Execution with: No need for local setups & # 8211; execute Cypress tests on the cloud with built-in support for CI and Local Testing.
• for Faster Execution: Leverage BrowserStack & # 8217; s parallel test execution with Cypress CLI to run multiple tests simultaneously, reducing overall execution clip by up to 10x.
• Comprehensive: Access detailed logs, include text, console yield, video recordings, and network log, via the BrowserStack splasher or API.
• Seamless CI/CD Integration: Easily integrate with Jenkins, GitHub Actions, Azure DevOp, and other to automate examination workflow and maintain body across releases.

Best Practices to run Cypress and Cucumber Tests

Here are some best pattern to run Cypress and Cucumber Tests:

• Organize Cucumber lineament register logically. Create feature file based on functionality and ensure they have clear gossip and descriptions.
• Utilize Cypress Commands for Reusability. Create tradition Cypress commands rather than repeating actions in your trial cases.
• Steps ought to be Simple and Modular. Break down your Gherkin stairs into pocket-sized, recyclable office.
• Utilize Cypress Assertions. Cypress provides built-in statement to let you verify ingredient. Use affirmation to see visibility and province.
• Leverage for orotund suites to split the load and speed up the process.

Conclusion

Remember that must be executed on real browsers for precise results. Start run tests on 30+ versions of the latest browser across Windows and macOS with BrowserStack. Use inst, hassle-free parallelization to get faster results without compromise on truth. Detect bugs before users do by testing package in with BrowserStack.

Useful Resources for Cypress

Understanding Cypress

Use Cases

Tool Comparisons

Related Guides