Search
⌘K
    to navigateEnterto select Escto close

    Writing a test case in cypress

    • The proper format can be dividing our test case into three to four logical parts.
    1. Setup - Action to be performed before actual test part. e.g navigate to a section via navbar. The common part of the setup can be added in before or beforeEach.
    2. Exercise - The actual test part e.g. type text and click on submit button.
    3. Assertion - Verifying the exercise part e.g. asserting the success message.
    4. Teardown - This is done after performing assertion. This might not needed for each of test case. Basically in teardown, we restore the state of the app.

    The simplest example could be to write a test case to add a customer:

    1describe("Customers", () => {
    2  it("should add a customer", () => {
    3    /* Setup */
    4    //navigate to customers page
    5
    6    /* Exercise */
    7    // Commands to add customer
    8
    9    /* Assertion */
    10    // Assert that customer is added.
    11
    12    /* Teardown if any */
    13  });
    14});

    All the test scenarios (both positive and negative) for a functionality can be written in a single test case. We can separate the test scenarios by a comment and empty line.

    Reasons to keep all the scenarios in a single test case?

    1. To reduce the overall test execution time. Most of the applications which we work on are powered by front-end frameworks like react. So to test all the scenarios we don't need to refresh the page, and hence it takes less time.
    2. Cypress dashboard treats each it block as a separate test. Cypress dashboard service charges us for each test. If we have less tests, we will be charged less comparatively.

    Refer to the example in the following section to get the proper idea.

    For example,

    Suppose we want to create a new task, we can write a test case covering all the scenarios:

    We can start with the cancel functionality, validations, create a new task, edit a new task and delete a new task.

    Please refer to the code below to get a proper idea.

    1import { fake } from "Fixtures/fake";
    2import { tasksSelectors } from "Selectors/defaultTasks";
    3import { commonSelectors } from "Selectors/common";
    4import { tasksTexts } from "Texts/defaultTasks";
    5import { commonTexts } from "Texts/common";
    6import {
    7  verifyMandatoryFieldValidation,
    8  addNewTaskViaUI,
    9  navigateToNewTaskPage,
    10  navigateToEditTaskPage
    11} from "Support/utils/defaultTasks";
    12
    13describe("New task", () => {
    14  const taskName = fake.uniqueDepartment;
    15  const editTaskName = fake.uniqueDepartment;
    16
    17  beforeEach(() => {
    18    cy.login();
    19
    20    cy.contains(commonSelectors.tabButton, commonTexts.more).click();
    21    cy.contains(commonSelectors.settingsTab, tasksTexts.defaultTasks).click();
    22    cy.get(tasksSelectors.defaultTaskHeading).should(
    23      "have.inSensTrimmedText",
    24      tasksTexts.defaultTasks
    25    );
    26
    27    navigateToNewTaskPage();
    28  });
    29
    30  it("should verify new task operations", () => {
    31    // verify cancel button functionality
    32    cy.clearAndType(tasksSelectors.nameTextField, taskName);
    33    cy.get(tasksSelectors.cancelButton).click();
    34
    35    cy.get(tasksSelectors.defaultTaskHeading).should(
    36      "have.inSensTrimmedText",
    37      tasksTexts.defaultTasks
    38    );
    39
    40    // add new task
    41    navigateToNewTaskPage();
    42    verifyMandatoryFieldValidation();
    43    addNewTaskViaUI(taskName);
    44
    45    // edit
    46    navigateToEditTaskPage(taskName);
    47    verifyMandatoryFieldValidation();
    48    cy.clearAndType(tasksSelectors.nameTextField, editTaskName);
    49    cy.get(tasksSelectors.submitButton).click();
    50
    51    cy.verifyToastMessage(tasksTexts.taskUpdatedMessage);
    52    cy.contains(tasksSelectors.nameRow, editTaskName).should("exist");
    53
    54    // delete
    55    cy.contains(tasksSelectors.tableRow, editTaskName).within(() => {
    56      cy.get(tasksSelectors.deleteButton).click();
    57    });
    58
    59    cy.verifyToastMessage(tasksTexts.taskDeletedMessage);
    60    cy.contains(tasksSelectors.nameRow, editTaskName).should("not.exist");
    61  });
    62});

    As mentioned before we wrote only 1 test, namely, 'should verify new task operations' which contains all the test scenarios.

    Previous
    Next