在运行赛普拉斯测试时，令牌集被删除 [英] Token set gets removed while running the cypress test

问题描述

您知道为什么在赛普拉斯测试运行期间会删除localStorage中设置的令牌吗？
我在commands.js文件中编写了 loadToken（）函数，运行测试时我可以看到已设置令牌，但是只要 cy.visit（'/ dashboard' ）被调用，令牌将被删除/消失并仍显示登录页面，并且不允许登录。同样的方式正在处理其他一些项目。
注意：当我们实际点击baseUrl [

解决方案

此塞浦路斯示例食谱显示了一些在本地存储和cy.visit（）中使用令牌的不同模式。

  //但在访问页面
之前先设置用户// //认为它已经过
 beforeEach（function setUser（）{
 cy.visit（'/'，{
 onBeforeLoad（win）{
 //和页面完成加载之前） 
 //在本地存储中设置用户对象
 win.localStorage.setItem（'user'，JSON.stringify（user））
}，
}）
 //应该打开页面，并且用户应该登录
}）
  

I假定 onBeforeLoad（）回调用于解决cy.visit（）清除本地存储的问题。

所以，您的代码将是这样的

  beforeEach（function setTokensAndVisit（） {
 cy.fixture（'tokenData.json'）。then（tokenData => {
 cy.visit（'/ dashboard'，{
 onBeforeLoad（win）{

 //在这里设置cookie或用tokenData加载localStorage，
 //根据您的应用检查用户的授权的方式。 
 
 //在SPA应用程序中，此检查很可能在路由器
 
}，
}）
}）
中完成}）
  

Any idea why the 'token' set in localStorage is removed during cypress test run ? I have 'loadToken()' function written in commands.js file, while running the test i could see the token is being set, but as soon as cy.visit('/dashboard') is called, the token gets removed/disappeared and still displays the login page and doesnt allow to login. The same way was working with some other projects. note: When we actually hit the baseUrl [https://some-url.net] it actually add following extension to url '/auth/login'

Cypress.Commands.add('loadTokens', () => {
    return cy.fixture('tokenData.json').then(data => {
        const keys = Object.keys(data);
        keys.forEach(key => {
            window.localStorage.setItem(key, data[key]);
        });
    });
});

I am calling the loadTokens() and loginRequest() inside before each;

context('Login and Logout test',()=>{
before(()=>{
cy.visit('/');
})

beforeEach(() => {
cy.loadTokens();
cy.loginRequest();
})

it.only('Check whether the login is possible',()=>{
    cy.viewport(1600, 1000); 
    cy.get('#offCanvasLeft > ul > li > a > span').eq(1).invoke('text').then((text)=>{
        expect(text).to.equal("Dashboard");
    }) 
})

})

Cypress.Commands.add('loginRequest', () => {
  const accessToken = localStorage.getItem('tokens');
    var cookieValue = document.cookie.split(';');
    cy.request({
      method: 'GET',
      url: baseUrl+`/dashboard`,
      headers: {
        'content-type': 'text/html',
        'tokens': `${accessToken}`,
        'cookie': `${cookieValue}`
      }
    })
  })

//cypress.json file:

{
  "baseUrl": "https://some-url.net",
  "numTestsKeptInMemory": 3,
  "chromeWebSecurity": false
}

//Before the cypress test hit the cy.visit() command, I am able to see the tokens set.

解决方案

This Cypess example recipe shows a slightly different pattern for using tokens in local storage and cy.visit().

// but set the user before visiting the page
// so the app thinks it is already authenticated
beforeEach(function setUser () {
  cy.visit('/', {
    onBeforeLoad (win) {
      // and before the page finishes loading
      // set the user object in local storage
      win.localStorage.setItem('user', JSON.stringify(user))
    },
  })
  // the page should be opened and the user should be logged in
})

I presume the onBeforeLoad() callback is used to overcome the problem you are experiencing where cy.visit() clears down local storage.

So, your code would be something like this

beforeEach(function setTokensAndVisit () {
  cy.fixture('tokenData.json').then(tokenData => {
    cy.visit('/dashboard', {
      onBeforeLoad (win) {

        // Set cookie or load localStorage with tokenData here,
        // depending on how your app checks that user is authorized.

        // In a SPA app, this check is likely to done in the router

      },
    })
  })
})

这篇关于在运行赛普拉斯测试时，令牌集被删除的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！