英文:
Why is local storage set in beforeEach not persistent in actual cypress test?
问题
'Add Article'按钮仅在用户已登录时显示（我们在本地存储中有一个特定值的 'user' 键）
即使我在 beforeEach 方法中将 'user' 键设置为本地存储中，测试仍会失败，因为它无法找到 'New Article' 按钮，显然用户看起来不像已登录
beforeEach(() => {
let res;
cy.request({
method: "POST",
url: "http://localhost:3000/api/users/login",
body: {
"user": {
"email": "test@test.com",
"password": "test"
}
}
}).then(response => {
res = response
})
cy.visit("http://localhost:3000", {
onBeforeLoad: function(win) {
win.localStorage.setItem('user', JSON.stringify(res.body.user))
}
})
})
it("Add Article", () => {
cy.contains("New Article").click()
cy.get("input[placeholder='Article Title']").type("Article on cypress")
cy.get("input[placeholder='What\\'s this article about?']").type("Topic is cypress")
cy.get("[placeholder='Write your article (in markdown)']").type("Content of article")
cy.get("input[placeholder='Enter tags']").type("Test Automation")
cy.contains("button", "Publish Article").click()
cy.contains("button", "Publish Article").click()
})
英文:
The 'Add Article' button is present only if the user is logged in (we have in local storage 'user' key with a specific value)
Even if I set the 'user' key to local storage in beforeEach method, the test fails because it can not find the 'New Article' button, because apparently the user does not appear as logged in
beforeEach(() => {
let res;
cy.request({
method: "POST",
url: "http://localhost:3000/api/users/login",
body: {
"user": {
"email":"test@test.com",
"password":"test"
}
}
}).then(response => {
res = response
})
cy.visit("http://localhost:3000", {
onBeforeLoad: function(win) {
win.localStorage.setItem('user', JSON.stringify(res.body.user))
}
})
})
it("Add Article", () => {
cy.contains("New Article").click()
cy.get("input[placeholder='Article Title']").type("Article on cypress")
cy.get("input[placeholder='What\\'s this article about?']").type("Topic is cypress")
cy.get("[placeholder='Write your article (in markdown)']").type("Content of article")
cy.get("input[placeholder='Enter tags']").type("Test Automation")
cy.contains("button", "Publish Article").click()
cy.contains("button", "Publish Article").click()
})
答案1
得分: 2
使用在命令之外定义的“闭包”变量通常会很棘手，因为像cy.request()这样的命令需要时间来解析。
您可以尝试将访问操作移到.then()回调内部，以确保该值来自响应，并且不要依赖于闭包变量。
beforeEach(() => {
cy.request({
...
}).then(response => {
cy.visit("http://localhost:3000", {
onBeforeLoad: function(win) {
win.localStorage.setItem('user', JSON.stringify(response.body.user))
}
})
})
英文:
Using "closure" variables that are defined outside of commands is often dicey, because the commands like cy.request() take time to resolve.
You can try moving the visit inside the .then() callback, which guarantees the value is coming from the response, and don't rely on the closure variable.
beforeEach(() => {
cy.request({
...
}).then(response => {
cy.visit("http://localhost:3000", {
onBeforeLoad: function(win) {
win.localStorage.setItem('user', JSON.stringify(response.body.user))
}
})
})
答案2
得分: 2
另一种方法是将响应保存到别名中。您可能会在cy.request()的回调函数内部调用cy.visit()时遇到问题。别名是在这种情况下效果很好的外部变量替代品。
let res
beforeEach(() => {
cy.request({
...
}).as('res') // 在这里保存到别名
cy.get('@res').then(response => {
cy.visit("http://localhost:3000", {
onBeforeLoad: function(win) {
win.localStorage.setItem('user', JSON.stringify(response.body.user))
}
})
})
})
英文:
Another way is to save the response to an alias. You may experience problems invoking cy.visit() inside the callback function of cy.request(). An alias is an alternative to external variables that works well in this situation.
let res
beforeEach(() => {
cy.request({
...
}).as('res') // save to alias here
cy.get('@res').then(response => {
cy.visit("http://localhost:3000", {
onBeforeLoad: function(win) {
win.localStorage.setItem('user', JSON.stringify(response.body.user))
}
})
})
})
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论