如何在 cypress 中设置本地存储

Posted 2023-04-15

【中文标题】如何在 cypress 中设置本地存储

【英文标题】：How to set local storage in cypress

【发布时间】：2021-06-28 00:57:42

【问题描述】：

我有一个简单的测试

describe('Page Test', () => 
  it('button has "contact-next-disabled" class', () => 
    cy.get('.contact-next-disabled')
  )
)

但是运行测试后，cypress 报错

  34 | useEffect(() => 
  35 |   const _contact = getLocalStorage()
> 36 |   if (!_contact.categories.length && !_contact.categoryNameEtc) 
     |                ^
  37 |     PGToaster.showDanger('Please select a category.')
  38 |     router.push('/contact/a-type')
  39 |   

我的 getLocalStorage 函数位于与我正在测试的文件不同的文件中

export const getLocalStorage = () => 
  const contact = JSON.parse(window.localStorage.getItem('contact'))
  return contact

与我的setLocalStorage 函数一起使用

export const setLocalStorage = (contact) => 
  const _contact = getLocalStorage()
  const updateContact = 
    ..._contact,
    ...contact
  
  window.localStorage.setItem('contact', JSON.stringify(updateContact))

如果我重写

if (!_contact.categories.length && !_contact.categoryNameEtc)

到

if (!_contact?.categories.length && !_contact?.categoryNameEtc)

错误消失了，但我只想在我的 cypress 测试中设置本地存储，而不是重写我的代码。我该怎么做？

【参考方案1】：

根据cy.clearLocalStorage()的文档

赛普拉斯会在每次测试之前自动运行此命令，以防止在测试之间共享状态。除非您在单个测试中使用它来清除 localStorage，否则您不需要使用此命令。

您可以使用hooks 设置您的测试：

before(() => 
  // set localStorage
)

或者您可以使用像 cypress-localstorage-commands 这样的插件来保留赛普拉斯测试之间的 localStorage。