Cross Browser Testing Using Cucumber

ensures a web covering works systematically across different browsers, versions, and device. Cucumber, a democratic (Behavior-Driven Development) tool, helps automatize cross-browser tests utilize Gherkin syntax for readable tryout scenarios.

By integrating Cucumber with frameworks like, and cloud-based program like, teams can expeditiously execute tests across multiple browsers, check a seamless user experience for all.

Introduction to Cucumber and BDD

is a testing tool that back behavior-driven development (BDD).BDDbridge the space between business stakeholders and the technical team through a common platform and communication among the team becomes more see-through.

Gherkin language is used to compose tryout suit in a very mere format and can besides be read and modified by a non-technical user.

In BDD, “Given-When-Then” is the suggestive approach for writing test lawsuit.

Here is an example for better understanding:

Givenuser has enter valid certificationWhena exploiter clicks on the sign-in buttonThenvalidate the content on the home page after login

Installing Cucumber

Below are the steps to install Cucumber:

Step 1: To install cucumber run this command

run & gt; npm install -- save-dev cypress-cucumber-preprocessor

Once installed, CucumberdevDependency in package.jsoncan be seen below

Step 2:Add below codification snippet incypress > plugins > index.js

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

Step 3:Add the below code snippet inpackage.json

'' cypress-cucumber-preprocessor '': {'' nonGlobalStepDefinitions '': true}

Step 4:Add the below line incypress.json

(



 `` testFiles '': `` * * / * .feature ''



}

Introduction to Cypress

is a JavaScript-based end-to-end testing framework built on top of Mocha. it uses a BDD/TDD statement library and a browser to pair with any.

Pro tip: Tools like SUSA can handle this autonomously — upload your app and get results without writing a single test script.

We can use Cypress for End-to-end tests, Integration tests, and Unit tests.

Installing Cypress

Cypress installing step

Step 1:Create a pamphlet and Generate package.json

• Create a project, hither naming it ascypress_cucumber_updated
• Use the npm init command to make apackage.json file

Step 2:Install Cypress

To install Cypress, nevertheless, in the project leaflet,run & gt; npm instal cypress –save-dev

Once instal, Cypress adaptation 9.7.0 is reflected as find below

Create a Folder Structure

Create Folders construction for Test Cases

Step 1: Create folder “ BrowserStack ” Integration & gt; BrowserStack. Under BrowserStack create further two booklet with the nameTests and Pages

Step 2: Create two subfolders Under Tests and Page i.ePages ->  LoginPage, SearchPage and Tests& # 8211; & gt;LoginTest, SearchTest

Step 3: Now Create Feature files (LoginTest.feature, SearchTest.feature)

Create Feature file

Here are some code examples of how to create Feature files:

LoginTest.feature

In the first test cause, the test case is to login with the valid and invalid user

Write the below code under theLoginTest.feature file

Feature: I want to login into the website with valid and invalid data Background: Given I navigate to the Website @ SmokeTest Scenario: Login as new sign up user with valid data: QA-135, QA-156 When I entered valid credential | email | validpassword | | qatubeupdate @ yopmail.com | 12345 | When User click on sign in push Then Validate the title after login @ SanityTest Scenario: Login with invalid data by enrol invalid password: QA-56, QA-156 When I entered invalid credential | email | invalidpassword | | qatubeupdate @ yopmail.com | 123456 | When User click on mark in push Then Error message should expose | errormessage | | Authentication failed |

SearchTest.feature

The second test case searches for a T-shirt. Write the below code under theSearchTest.feature file

Feature: I want to login into the website with valid and invalid information and search T-shirt Background: Given I sail to the Website Scenario: Login as new mark up user with valid data When I entered valid credential | email | validpassword | | qatubeupdate @ yopmail.com | 12345 | When User click on sign in push Scenario: Search T-shirts from the site When I entered the hunting criteria | serachtext | | T-shirts | And Click on serach push Then Validate the T-shirt name | tshirtName | | Faded Short Sleeve T-shirts |

Talk to an Expert

Create Page Class

Create loginPage.jsgrade to cover login with valid/ invalid user scenario

Creating Methods forenterUrl, enterUserNamePassword, clickOnSignInButton and validateErrorMessage ()to use these methods in our page family

/// & lt; credit types = '' cypress '' / & gt; class LoginPage {enterURL () {cy.visit (`` http: //automationpractice.com/ '');} enterUserNamePassword (username, password) {cy.contains (`` Sign in '') .click (); cy.get (`` # email '') .clear (); cy.get (`` # email '') .type (username); cy.get (`` # passwd '') .clear (); cy.get (`` # passwd '') .type (password); return this;} searchItem (searchItem, searchresult) {cy.get (`` # searchbox '') .type (searchItem); cy.get (' [name= '' submit_search ''] ') .click (); cy.contains (searchresult); return this;} clickOnSignInButton () {homecoming cy.get (`` # SubmitLogin '') .click ();} verifyPageTitle () {homecoming cy.title () .should (`` eq '', `` My account - My Store '');} validateErrorMessage (errorMessage) {return cy.contains (errorMessage);}} const login = new LoginPage (); export default login;

validateErrorMessage ()method to verify the erroneousness content when the exploiter enters an invalid username and password.

Create a searchPage.jsform to explore the merchandise (T-shirt)

/// & lt; cite type = '' cypress '' / & gt; grade SearchPage {validateSearchResult (searchResult) {return cy.contains (searchResult);} clickOnSearchbutton () {return cy.get (' [name= '' submit_search ''] ') .click ();}} const hunting = new SearchPage (); exportation default hunt;

Creating thevalidateSearchResult ()method to enter the search outcome and creating theclickOnSearchButton ()method to click on the search push

Create Test Class

Create loginTest.spec.jsfamily to cover scenario login with valid / invalid user

meaning login from `` .. / .. /Pages/LoginPage/loginPage ''; // Scenario 1: Login with Valid credential Given (`` I navigate to the Website '', () = & gt; {cy.visit (`` http: //automationpractice.com/ '');}); When (`` I entered valid credential '', (datatable) = & gt; {datatable.hashes () .forEach ((constituent) = & gt; {login.enterUserNamePassword (element.email, element.validpassword);});}); When (`` User click on sign in button '', () = & gt; {login.clickOnSignInButton ();}); Then (`` Validate the title after login '', () = & gt; {login.verifyPageTitle ();}); // Scenario 2: Login with Invalid credential and Verify error messsage When (`` I enter invalid credential '', (datatable) = & gt; {datatable.hashes () .forEach ((element) = & gt; {login.enterUserNamePassword (element.email, element.invalidpassword);});}); When (`` User click on sign in button '', () = & gt; {login.clickOnSignInButton ();}); Then (`` Error message should display '', (datatable) = & gt; {datatable.hashes () .forEach ((element) = & gt; {login.validateErrorMessage (element.errormessage);});});

Create searchTest.spec.jsclass to search the product

import login from `` .. / .. /Pages/LoginPage/loginPage ''; spell lookup from `` .. / .. /Pages/SearchPage/searchPage ''; // Scenario 1: Login with Valid crediential Given (`` I navigate to the Website '', () = & gt; {cy.visit (`` http: //automationpractice.com/ '');}); When (`` I participate valid crediential '', (datatable) = & gt; {datatable.hashes () .forEach ((element) = & gt; {login.enterUserNamePassword (element.email, element.validpassword);});}); When (`` User click on mark in button '', () = & gt; {login.clickOnSignInButton ();}); // Scenario 2: Do Search When (`` I entered the search criteria '', (datatable) = & gt; {datatable.hashes () .forEach ((element) = & gt; {cy.get (`` # searchbox '') .type (element.serachtext);});}); And (`` Click on serach button '', () = & gt; {search.clickOnSearchbutton ();}); Then (`` Validate the T-shirt name '', (datatable) = & gt; {datatable.hashes () .forEach ((component) = & gt; {search.validateSearchResult (element.tshirtName);});});

Conclusion

Executing the Cucumber framework on real browsers gives accurate results. Use to run your Cypress tests on an extensive list of browsers and peregrine devices, with support for CI and Local Testing.

BrowserStack allows you to essay your apps and websites on the for exact cross browser testing and helps detect bugs and test in.

Related Guides