最近用Cypress做页面自动化的时候遇到一个问题,前端页面网站与后台登录接口的网站,不属于同一个域名下。
从页面上点击登录按钮之后会报出访问登录接口的请求被cancel,原来的代码如下:
describe('My test case', function () {
it.only('visit home page and sign in', function () {
cy.visit('https://portal-dev.keyid.cn/login') //访问登录地址
cy.get('.el-button').click() //点击登录按钮
cy.visit('https://portal-dev.keyid.cn/home')
})
})
报错如截图所示:
解决办法是用cy.request请求直接调用登录接口
describe('My test case', function () {
before('sign in', function(){
cy.request({
method: 'POST',
url: 'https://api-dev.keyid.cn/scrm-api/admin/auth/login',
form: true,
body: {
account: "17717823623",
password: "password"
},
})
})
it.only('visit home page', function () {
cy.visit('https://portal-dev.keyid.cn/home')
})
})
但是home页面仍然没有正常显示,查看一下Cookies、Local Storage和Session Storage,可以发现cookies已经被设置上了值,其他两项都是空白的。
手动登录一下该网站,查看一下Cookies、Local Storage和Session Storage,可以发现Local Storage里面有2个值,Session Storage里面没有值。
只需要在登录成功后通过window.localStorage.setItem增加一下local storage就行。因此最终代码如下:
describe('My test case', function () {
before('sign in', function(){
cy.request({
method: 'POST',
url: 'https://api-dev.keyid.cn/scrm-api/admin/auth/login',
form: true,
body: {
account: "17717823623",
password: "password"
},
}).then(resp => {
const localStorage_1 = { "expire": -1, "val": resp.body.data }
const localStorage_2 = { "expire": -1, "val": `${resp.body.data.login_token}` }
window.localStorage.setItem('ark-zw-scrm-session', JSON.stringify(localStorage_1))
window.localStorage.setItem('admin-auth-token', JSON.stringify(localStorage_2))
})
})
it.only('visit home page', function () {
cy.visit('https://portal-dev.keyid.cn/home')
})
})
至此就可以正常显示页面啦。