I worry that I'm doing this incorrectly, but the docs don't have an explicit example that I've found.

I have a test that walks thru the login flow. I also want to verify that certain values have been set inside localStorage once we're logged in.

When I do the following, I get an AssertionError, "expected null to exist":

describe("Trying to log in...", function() {
  it("Visits the Home Page", function() {
    cy.visit("/") // Uses baseUrl prefix from config

    // [ ... snip ... ]

    // Form should be visible and fillable now!
    cy.get("form")
      .should("be.visible")
      .within(() => {
        cy.findByLabelText(/email address/i)
          .should("exist")
          .should("be.visible")
          .click() // Clicking the label should focus the element:
          .type("[test username]")
        cy.findByLabelText(/password/i)
          .click()
          .type("[test password]")
        cy.findByText(/sign in/i).click()
      })

    // Now we're logged in... 

    cy.url().should("include", "home")

    // ========= THE FOLLOWING BREAKS: =======================
    // Check for our localStorage item:
    expect(localStorage.getItem("KeyToOurValue")).to.exist()
  })
})

However, if I put that expect in a callback to the last should, it seems to work?

describe("Trying to log in...", function() {
  it("Visits the Home Page", function() {
    cy.visit("/") // Uses baseUrl prefix from config

    // [ ... snip ... ]

    // Form should be visible and fillable now!
    cy.get("form")
      .should("be.visible")
      .within(() => {
        cy.findByLabelText(/email address/i)
          .should("exist")
          .should("be.visible")
          .click() // Clicking the label should focus the element:
          .type("[test username]")
        cy.findByLabelText(/password/i)
          .click()
          .type("[test password]")
        cy.findByText(/sign in/i).click()
      })

    // Now we're logged in... 

    cy.url().should("include", "home", ()=> {
        // ========= THE FOLLOWING WORKS! ========
        // Check for our localStorage item:
        expect(localStorage.getItem("KeyToOurValue")).to.exist()
    })
  })
})

Is that how I should do this?

It seems like I should be able to do it the first way?

What's the correct way to asset something about localStorage values after a certain cy line has run?

I worry that I'm doing this incorrectly, but the docs don't have an explicit example that I've found.

I have a test that walks thru the login flow. I also want to verify that certain values have been set inside localStorage once we're logged in.

When I do the following, I get an AssertionError, "expected null to exist":

describe("Trying to log in...", function() {
  it("Visits the Home Page", function() {
    cy.visit("/") // Uses baseUrl prefix from config

    // [ ... snip ... ]

    // Form should be visible and fillable now!
    cy.get("form")
      .should("be.visible")
      .within(() => {
        cy.findByLabelText(/email address/i)
          .should("exist")
          .should("be.visible")
          .click() // Clicking the label should focus the element:
          .type("[test username]")
        cy.findByLabelText(/password/i)
          .click()
          .type("[test password]")
        cy.findByText(/sign in/i).click()
      })

    // Now we're logged in... 

    cy.url().should("include", "home")

    // ========= THE FOLLOWING BREAKS: =======================
    // Check for our localStorage item:
    expect(localStorage.getItem("KeyToOurValue")).to.exist()
  })
})

However, if I put that expect in a callback to the last should, it seems to work?

describe("Trying to log in...", function() {
  it("Visits the Home Page", function() {
    cy.visit("/") // Uses baseUrl prefix from config

    // [ ... snip ... ]

    // Form should be visible and fillable now!
    cy.get("form")
      .should("be.visible")
      .within(() => {
        cy.findByLabelText(/email address/i)
          .should("exist")
          .should("be.visible")
          .click() // Clicking the label should focus the element:
          .type("[test username]")
        cy.findByLabelText(/password/i)
          .click()
          .type("[test password]")
        cy.findByText(/sign in/i).click()
      })

    // Now we're logged in... 

    cy.url().should("include", "home", ()=> {
        // ========= THE FOLLOWING WORKS! ========
        // Check for our localStorage item:
        expect(localStorage.getItem("KeyToOurValue")).to.exist()
    })
  })
})

Is that how I should do this?

It seems like I should be able to do it the first way?

What's the correct way to asset something about localStorage values after a certain cy line has run?

• javascript
• testing
• cypress

• The advice in the accepted answer is spot on, however, the code above here did not work for me. When my assertions ran .to.exist() was not a function, so I ended up having to do expect(localStorage.getItem("KeyToOurValue")).to.be.a("string") or expect(localStorage.getItem("KeyToOurValue")).to.be.a("undefined") for the absence of a value. – themetzmeier Commented Apr 20, 2022 at 2:07

1 Answer 1

Should you assert localStorage inside the should block? Yes, you should. Check out the official example from Cypress

For cy-commands (cy.put, cy.get ...), they're enqueued and runs one after another later by Cypress. On the other hand, non cy-commands (expect) are executed right away. Hence, your localStorage is not available if you leave expect outside should() because sign-in is not finished yet.

By moving expect inside should, that means it's run after cy.url() is done. Since cy.url is the last item in Cypress' internal queue, the other cy commands (cy.visit, cy.get, cy.findBy...) have been completed by this point.