Pre-Condition:
For Cucumber step up please go through this blog
What is Data Table in Cucumber?
Data tables are used when we need to test numerous input parameters of a web application.
What is Background in Cucumber?
Background in Cucumber is used to define a step or series of steps that are common to all the tests in the feature file.
Scenario Covered
Web -Site http://automationpractice.com/ used for covering scenario
Scenario 1: Login as a new sign up user with valid data
Scenario 2: Login as a new sign up user with invalid data
Scenario 3: Search T-shirts from the site
Feature file looks like below
Steps definition looks like below
// Scenario 1
Given(“I navigate to the Website”, () => {
cy.visit(“http://automationpractice.com/”);
});
When(“I entered valid crediential”, (datatable) => {
datatable.hashes().forEach((element) => {
cy.contains(“Sign in”).click();
cy.get(“#email”).clear();
cy.get(“#email”).type(element.email);
cy.get(“#passwd”).clear();
cy.get(“#passwd”).type(element.validpassword);
});
});
When(“User click on sign in button”, () => {
cy.get(“#SubmitLogin”).click();
});
Then(“Validate the title after login”, () => {
cy.title().should(“eq”, “My account — My Store”);
});
// Scenario 2
When(“I entered invalid crediential”, (datatable) => {
datatable.hashes().forEach((element) => {
cy.contains(“Sign in”).click();
cy.get(“#email”).clear();
cy.get(“#email”).type(element.email);
cy.get(“#passwd”).clear();
cy.get(“#passwd”).type(element.invalidpassword);
});
});
When(“User click on sign in button”, () => {
cy.get(“#SubmitLogin”).click();
});
Then(“Error message should display”, (datatable) => {
datatable.hashes().forEach((element) => {
cy.contains(element.errormessage);
});
});
// Scenario 3
When(“I entered the search criteria”, (datatable) => {
datatable.hashes().forEach((element) => {
cy.get(“#searchbox”).type(element.serachtext);
});
});
And(“Click on serach button”, () => {
cy.get(‘[name=”submit_search”]’).click();
});
Then(“Validate the T-shirt name”, (datatable) => {
datatable.hashes().forEach((element) => {
cy.contains(element.tshirtName);
});
});
Video of all steps is attached below
Result