How to check sessionStorage value with Cypress

In frontend automation testing with Cypress, checking the values of sessionStorage is a common requirement. Cypress provides both direct and indirect methods to access and check sessionStorage. The following is a specific example and steps explaining how to check sessionStorage values in Cypress tests.

1. Accessing sessionStorage

First, to access the browser's sessionStorage in Cypress, use the cy.window() command to access the window object. Then, retrieve the sessionStorage object using the its command.

javascript
cy.window().its('sessionStorage')

2. Retrieving Specific sessionStorage Values

Once you have the sessionStorage object, use the invoke() command to call the getItem method for specific items. For example, to check the value of the item named 'userInfo' in sessionStorage:

javascript
cy.window()
  .its('sessionStorage')
  .invoke('getItem', 'userInfo')
  .then((userInfo) => {
    // Use userInfo here
  });

3. Asserting Values in sessionStorage

After retrieving the value from sessionStorage, perform assertions to verify it meets expected criteria. For instance, if you expect 'userInfo' to store the JSON string {"name":"John","age":30}:

javascript
cy.window()
  .its('sessionStorage')
  .invoke('getItem', 'userInfo')
  .then((userInfo) => {
    const user = JSON.parse(userInfo);
    expect(user.name).to.eq('John');
    expect(user.age).to.eq(30);
  });

4. Example: Complete Test Case

Below is a complete Cypress test case demonstrating how to verify user information stored in sessionStorage after login:

javascript
describe('Session Storage Test', () => {
  it('should store the correct user info in sessionStorage', () => {
    // Assume this is the login step
    cy.visit('/login');
    cy.get('#username').type('John');
    cy.get('#password').type('password123');
    cy.get('#login-button').click();

    // Check sessionStorage
    cy.window()
      .its('sessionStorage')
      .invoke('getItem', 'userInfo')
      .then((userInfo) => {
        const user = JSON.parse(userInfo);
        expect(user.name).to.eq('John');
        expect(user.age).to.eq(30);
      });
  });
});

Summary

Through these steps, you can effectively check sessionStorage values in Cypress. This approach is valuable for verifying browser storage of necessary information in scenarios like user login, configuration changes, or other contexts.

Checking the values of sessionStorage in Cypress is an essential skill, especially when testing web applications that maintain state or information in session storage. The following outlines the steps to use Cypress for verifying sessionStorage values:

Step 1: Accessing sessionStorage

First, access the sessionStorage object within your tests. Since Cypress operates in a browser environment, you can directly retrieve it using the cy.window() command, which provides a reference to the current window.

javascript
cy.window().then((win) => {
  // The `win` object represents the current browser window
  // You can now interact with win.sessionStorage
});

Step 2: Verifying sessionStorage Values

Suppose you want to confirm that a specific key (e.g., 'userToken') in sessionStorage holds a particular value (e.g., 'abc123'). Retrieve this value using win.sessionStorage.getItem() and validate it with an assertion.

javascript
cy.window().then((win) => {
  const userToken = win.sessionStorage.getItem('userToken');
  expect(userToken).to.equal('abc123');
});

Example: Complete Cypress Test Case

Consider an application that stores the userToken in sessionStorage after user authentication. Verify that sessionStorage correctly sets the userToken post-login.

javascript
describe('Session Storage Test', () => {
  it('should store user token in session storage after login', () => {
    // Navigate to the login page
    cy.visit('/login');

    // Input credentials
    cy.get('#username').type('testuser');
    cy.get('#password').type('testpassword');

    // Submit the login form
    cy.get('#loginButton').click();

    // Validate sessionStorage
    cy.window().then((win) => {
      const userToken = win.sessionStorage.getItem('userToken');
      expect(userToken).to.exist;
      expect(userToken).to.equal('abc123'); // Assuming 'abc123' is the token stored upon successful login
    });
  });
});

This test script demonstrates how to check sessionStorage in Cypress, from accessing the browser window to form submission and value verification. By employing this method, you can ensure critical application behaviors—such as user authentication state management—function as expected.

Verifying sessionStorage values in Cypress is a common requirement, especially when validating the functionality of web applications for storing and retrieving session data.

To verify sessionStorage values in Cypress, we typically use the cy.window() command to access the browser's window object and then interact with sessionStorage through it. Here is an example illustrating how to implement this:

javascript
describe('SessionStorage Test', () => {
  it('should verify the value in sessionStorage', () => {
    // First, navigate to the webpage under test
    cy.visit('https://example.com');

    // Access the window object using cy.window()
    cy.window().then((win) => {
      // Retrieve the value for a specific key using sessionStorage.getItem
      const item = win.sessionStorage.getItem('myKey');

      // Assertion to confirm the sessionStorage value matches expectations
      expect(item).to.eq('expectedValue');
    });
  });
});

In this test case, we first navigate to an example webpage. Next, we access the window object via cy.window(). After that, we fetch the value associated with the key 'myKey' from sessionStorage using sessionStorage.getItem('myKey'), and confirm it matches the expected value through the expect() assertion.

This method enables direct interaction with sessionStorage to ensure the stored data is accurate. Furthermore, it demonstrates Cypress's robust capabilities in handling client-side storage.