Como ler o localStorage do navegador com Cypress

Na “pitada de Cypress” de hoje, aprenda como obter valores salvos no localStorage do browser e então executar asserções sobre eles

Nem tudo que acontece no frontend de uma aplicação web é visível ao usuário final.

Para termos as experiências que temos quando utilizamos diferentes ferramentas na web, muita coisa ocorre nos bastidores, e o navegador é grande parte disso.

Imagine uma aplicação de busca, a qual disponibiliza uma funcionalidade de busca rápida, onde botões com os últimos termos buscados são exibidos próximos ao campo de busca, para que seus usuários possam facilmente buscar de novo por estes termos sem precisar digitá-los.

Digamos que um dos requisitos desta funcionalidade é que quando o navegador é fechado e aberto de novo, ou quando ocorre um refresh, tais botões continuem disponíveis.

Uma forma de resolver tal problema é salvar tais informações no localStorage do browser, para que a aplicação possa saber o que apresentar ao usuário na primeira visita, ou após um refresh. Essa lógica deve ser implementada no frontend, é claro.

Com testes de interface gráfica de usuário (GUI) podemos verificar que tais elementos (botões, por exemplo) estão visíveis na tela, mas com Cypress, podemos também acessar o localStorage propriamente dito, com o uso da biblioteca cypress-localstorage-commands.

Dentre as diversas funcionalidades desta biblioteca, neste post irei demonstrar o uso do comando cy.getLocalStorage(item).

Voltemos ao exemplo da aplicação de busca com os botões de busca rápida.

Ah, um último requisito. Somente os últimos 3 termos buscados devem ser exibidos para a busca rápida.

Ok, primeiro é necessário adicionar a seguinte linha de código ao arquivo cypress/support/commands.js.

// cypress/support/commands.js

import 'cypress-localstorage-commands'

E uma possível implementação para o teste seria a seguinte.

// cypress/integration/quickSearch.spec.js

describe('Last searched terms', () => {
  it('shows the last three searched terms for quick searching', () => {
    const termsToSearchFor = [
      'foo',
      'bar',
      'baz'
    ]

    cy.visit('https://example.com/search')

    termsToSearchFor.forEach(term => {
      cy.get('#search-input-field')
        .should('be.visible')
        .clear()
        .type(`${term}{enter}`)
    })

    cy.getLocalStorage('lastSearches')
      .then($lastSearches => {
        expect($lastSearches.includes(termsToSearchFor[0])).to.equal(true)
        expect($lastSearches.includes(termsToSearchFor[1])).to.equal(true)
        expect($lastSearches.includes(termsToSearchFor[2])).to.equal(true)
      })
  })
})

Veja que com o comando cy.getLocalStorage('lastSearches') consigo encadear a chamada da função .then, visto que tal comando executa de forma assíncrona, e na função de callback passo o retorno do item lastSearches do localStorage ($lastSearches), que neste caso é um array de strings. Por fim, realizo a verificação de que todos os três termos buscados encontram-se neste array, representando as últimas buscas.

Interassante, não acha?

A partir daí, poderíamos pensar nos mais diversos cenários, e eles poderiam ser testados tando da perspectiva do que o usuário vê na GUI, como também da pespectiva do que acontece nos bastidores do navegador.

Alguns outros cenários que me vem à mente (os quais não irei implementar, mas só pra você pensar a respeito) são:

• O array com a chave lastSearches retorna a quantidade de dois quando buscando somente por dois termos
• Quando buscando por termos repetidos, os mesmos não são duplicados no mesmo array no localStorage
• Quando busco por mais do que três termos, somente os últimos três ficam disponíveis no mesmo array no localStorage

Que outros cenários vem à sua mente?

---

Gostou desse conteúdo ou acha que seu/sua colega frontend developer vai gostar?

Compartilhe em suas redes. Ficarei agradecido!

---

Este conteúdo foi traduzido para inglês e pode ser encontrado no DEV Community.

---

Quer aprender automação de testes com Cypress na prática? Conheça meus cursos na Escola Talking About Testing, ou no Udemy, e bons testes! 🎉

Ah, saiu o curso avançado de Cypress da Escola TAT! Aproveite para assistir a aula de apresentação.