Unleashing the Power of Cypress Testing: Part 3

Introduction:

Welcome back to the next chapter of our Cypress exploration! In the previous blog (https://manage.wix.com/dashboard/93eea007-719d-4338-a355-03d333fb982c/blog/33ae817f-184d-4d1e-a348-ad6a9a7a32e7/edit?tab=published&lang=en) the foundational elements of Cypress—WebLocators, Conditional, and Navigational Commands—essential components that form the bedrock of effective testing knowledge has been gained.

As we progress on this journey, our focus now shifts to a crucial aspect of testing - interaction with the browser and handling various elements on the web page. In this second part, we'll delve deep into Cypress Browser Commands, mastering the art of navigating through pages, handling dropdowns and checkboxes, and employing strategic wait commands for seamless and robust testing. So, without further ado, let's dive into the world of Browser Commands, Dropdowns, Checkboxes, and Wait Strategies with Cypress.

IV- Browser Commands:

Cypress provides a few browser-related commands that allow you to interact with the browser's behavior or manipulate certain settings. Here are some commonly used browser commands in Cypress:

1. Clear Browser Cookies:

// Clear browser cookies

cy.clearCookies();

• Explanation:

• The cy.clearCookies() command clears all cookies in the current browser.

• 
  

2. Clear Browser Local Storage:

// Clear browser local storage

cy.clearLocalStorage();

Explanation:

• The cy.clearLocalStorage() command clears all items in the browser's local storage.

3. End the Test:

Cypress doesn't require explicit "closing" or "quitting" of the browser. A Cypress test is a series of commands executed in a chain, and the test naturally ends when the command chain completes. You can use the cy.end() command at the end of your test if you want to explicitly mark the end of the test.

// Cypress test commands...

// End the test

cy.end();

V- Wait Commands

Cypress operates differently from traditional Selenium-based testing frameworks and, as a result, does not have explicit "wait" commands in the same sense. Cypress commands are inherently "waited for" by design, and they automatically retry until the specified condition is met or a timeout occurs. This built-in waiting behavior is a key feature of Cypress and is intended to eliminate the need for explicit waits and sleeps.

Here are some aspects of how Cypress handles waiting:

1. Automatic Waiting:

Cypress automatically waits for commands and assertions to pass before moving on to the next command. This eliminates the need for explicit waits in your test scripts.

2. Retry Mechanism:

Cypress commands are retried until the specified conditions are met or the default timeout is reached. This improves the reliability of tests in dynamic web applications.

3. Assertions Act as Waits:

Assertions in Cypress act as implicit waits. The test runner retries the assertion until it passes or times out.

4.Custom Wait Strategies:

While Cypress doesn't have explicit wait commands, you can use the should command to specify conditions that need to be met before proceeding. Additionally, you can use custom JavaScript logic within your test to achieve more specific waiting requirements.

// Example of using a custom wait using the `should` command

cy.get('.loading-spinner').should('not.exist');

• Explanation:

• cy.get('.loading-spinner'): This command is selecting an element with the class 'loading-spinner'. It might be an element that indicates some loading activity on the page, such as a spinner.

• .should('not.exist'): The should command is an assertion command in Cypress. In this context, it asserts that the selected element (with class 'loading-spinner') should not exist in the DOM.

• Usage Scenario:

• This command is commonly used when you want to wait for a loading spinner or a similar element to disappear before proceeding with the next actions in your test.

• For example, imagine a scenario where a loading spinner appears while an asynchronous operation is in progress. You can use this command to wait until the spinner disappears, indicating that the operation has completed.

How it Works:

• Cypress will automatically retry this command until the specified condition ('not.exist') is met or until the default timeout is reached. The default timeout is configurable in Cypress settings.

• The test will proceed to the next command only when the loading spinner element is no longer present in the DOM.

V-Handling CheckBoxes

Handling checkboxes in Cypress is straightforward. Cypress provides commands and assertions that allow you to easily interact with and verify the state of checkboxes. Here are some common scenarios:

1. Checking a Checkbox:

// Check a checkbox

cy.get('#myCheckbox').check();

• Explanation:

• The cy.get('#myCheckbox') command selects the checkbox with the specified ID ('myCheckbox').

• .check() is a command that checks (selects) the checkbox.

2. Unchecking a Checkbox:

// Uncheck a checkbox

cy.get('#myCheckbox').uncheck();

• Explanation:

• The cy.get('#myCheckbox') command selects the checkbox with the specified ID ('myCheckbox').

• .uncheck() is a command that unchecks (deselects) the checkbox.

3. Verifying Checkbox State (Asserting):

// Assert that a checkbox is checked

cy.get('#myCheckbox').should('be.checked');

// Assert that a checkbox is unchecked

cy.get('#myCheckbox').should('not.be.checked');

4. Checking Multiple Checkboxes:

// Check multiple checkboxes using a class selector

cy.get('.checkbox-class').check();

Explanation:

• The cy.get('.checkbox-class') command selects multiple checkboxes with the specified class ('checkbox-class').

• .check() is then applied to all selected checkboxes, checking all of them.

VI- Handling DropDowns:

Handling dropdowns in Cypress involves selecting options, verifying the selected value, and interacting with the dropdown in different ways. Here are examples of how you can handle dropdowns in Cypress:

1. Selecting an Option from a Dropdown:

Assuming you have an HTML dropdown like this:

<select id="myDropdown">

  <option value="option1">Option 1</option>

  <option value="option2">Option 2</option>

  <option value="option3">Option 3</option>

</select>

You can use Cypress commands to interact with it:

// Select an option by its value

cy.get('#myDropdown').select('option2');

// Select an option by its value

cy.get('#myDropdown').select('option2');

2. Verifying the Selected Option:

// Verify that a specific option is selected

cy.get('#myDropdown').should('have.value', 'option2');

3. Selecting an Option by Index:

// Select an option by its index (0-based)

cy.get('#myDropdown').select(1); // Selects the second option ('Option 2')

4. Asserting the Existence of Options:

// Assert that the dropdown has certain options

cy.get('#myDropdown').should('have.length', 3); // Assuming three options

cy.get('#myDropdown').should('contain', 'Option 1');

cy.get('#myDropdown').should('contain', 'Option 2');

cy.get('#myDropdown').should('contain', 'Option 3');

 This blog has been a dedicated exploration into the foundational elements of Cypress—Browser Commands, Dropdowns, Checkboxes, and Wait Strategies with Cypress. "As we conclude this phase of our exploration into Cypress, it's crucial to recognize that what we've delved into represents only the beginning. There's much more to explore and learn beyond what we've touched upon.

Happy testing, and stay tuned for the next chapter!