Cypress：添加允许 LocalStorage 的选项

Question

以下事实：

第 'X' 页打开 -> cy.visit('/x');
选中复选框 'A'-> cy.checkCheckbox('A');
关闭浏览器或重新打开页面 ??????
检查复选框 'A' 是否仍处于选中状态 cy.VerifyCheckBox('A', 'checked');

到第 3 步：如果我只使用命令 'cy.visit('X);' 那么 Cypress 会清除缓存并且我的自定义设置会丢失。

我知道有一个命令 'Cypress.LocalStorage'，但我不知道如何在我的案例中使用它。

感谢您的帮助！

Answer 1

我相信你可以访问你的页面，设置本地存储值，然后验证复选框。粗略地说，它看起来像：

cy.visit('/projects');
cy.window().then((window) => {
  window.localStorage.setItem('myLocalStorageItem', value);
})
cy.VerifyCheckBox('A', 'checked');

它并没有完全模仿用户的工作流程，但总体上是一样的——当 localStorage 项设置为某个值时会选中该复选框。

Answer 2

我会遵循@agoff 使用的模式，但使用 window:before:load 事件。

这种方式将捕获在页面加载期间清除值的任何回归。

// verify that CheckboxA sets local storage
cy.visit('/projects')
cy.checkCheckbox('A')
cy.window().then((window) => {
  expect(window.localStorage.getItem('myLocalStorageItem')).to.eq(value)
})

// verify that reload retains localStorage value
cy.on('window:before:load', (win) => {      
  // should fire after Cypress clears localStorage
  window.localStorage.setItem('myLocalStorageItem', value)  
}) 
cy.reload()
cy.VerifyCheckBox('A', 'checked')

Answer 3

非常感谢您的回答。我仍然无法为 'setItem'.

输入正确的值

选中的复选框包含 class 'ag-checked'。这可能是我需要作为信息包含在 'setItem' 中的值吗？

我本以为会自动从缓存中读取必要的数据。

Answer 4

谢谢大家！

我找到了最适合我的解决方案。

首先我安装了 cypress-localstorage-commands 那么：

it('open Website and check Checkbox A', () => {
    ... cy.saveLocalStorage();
});
                                                                  
it('open Website and verify Checkbox A', () => {
    cy.restoreLocalStorage(); ... 
});

Answer 5

我找到了解决我的问题的第二种方法。我在我的测试用例的开头添加了这个（在描述中，请注意）：

beforeEach(() => {
        cy.restoreLocalStorage().then(() => {
            cy.log('Storage restored');
        })
    });

    afterEach(() => {
        cy.saveLocalStorage().then(() => {
            cy.log('Storage saved');
        })
    });

希望能帮到你！让我知道！

Cypress：添加允许 LocalStorage 的选项

Cypress: Add option to allow LocalStorage

javascript

browser-cache

local-storage

typescript

cypress