使用Cypress测试Vue应用时无法登录问题求助

问题描述 #

我正在尝试使用Cypress为Vue应用搭建E2E测试。在常规Chrome浏览器中可正常登录该应用，但Cypress启动的浏览器无论通过Cypress自动登录还是手动登录均失败。请问是否遗漏了相关配置？

Vue登录组件代码 #

<template> 
  <div class="d-flex justify-content-center"> 
    <div class="field is-horizontal"> 
      <div class="field-label is-normal"> 
        <label class="label">Username</label> 
      </div> 
      <div class="field-body"> 
        <div class="field"> 
          <div class="control"> 
            <input v-model="username" class="input" type="text" placeholder="Your username"> 
          </div> 
        </div> 
      </div> 
    </div> 
    <div class="field is-horizontal"> 
      <div class="field-label is-normal"> 
        <label class="label">Password</label> 
      </div> 
      <div class="field-body"> 
        <div class="field"> 
          <div class="control"> 
            <input v-model="password" class="input" type="password" placeholder="Your password"> 
          </div> 
        </div> 
      </div> 
    </div> 
    <div class="field is-horizontal"> 
      <div class="field-label"> 
        <!-- Left empty for spacing --> 
      </div> 
      <div class="field-body"> 
        <div class="field"> 
          <div class="control text-center"> 
            <button v-on:click="login()" class="button is-primary"> Login </button> 
          </div> 
        </div> 
      </div> 
    </div> 
  </div> 
</template>

Cypress测试代码 #

describe('Logging in', () => { 
  it('Logs in as admin', () => { 
    cy.visit('/') 
      .get('input[type="text"]') 
      .type('Admin') 
      .get('input[type="password"]') 
      .type('Pass1234') 
      .get('button').click() 
      .location().should((loc) => { 
        expect(loc.pathname).to.eq('/dashboard-main/dashboard'); 
      }) 
  }) 
})

排查与解决方案 #

我之前也碰到过类似的Cypress登录失败问题，结合相关经验，大概率是Cookie策略或浏览器安全限制导致的，给你几个具体的排查和解决方向：

• 调整Cypress的Cookie与安全配置
  很多登录接口返回的Cookie会设置SameSite属性，而Cypress默认的浏览器配置可能限制这类Cookie的写入。你可以在cypress.config.js中修改以下配置：

  module.exports = defineConfig({
    e2e: {
      // 处理第三方代码的阻塞问题
      experimentalModifyObstructiveThirdPartyCode: true,
      // 如果前端与登录接口是跨域域名，关闭Chrome的Web安全限制（仅测试环境使用）
      chromeWebSecurity: false,
      // 调整Cookie的SameSite策略，匹配后端返回的设置
      cookies: {
        sameSite: "none"
      }
    }
  })
  

• 检查登录请求与Cookie状态
  在Cypress测试运行时，点击界面右上角的DevTools按钮打开控制台，切换到Network面板：

  • 确认登录接口的返回状态码是否为200
  • 查看Response Headers里的Set-Cookie字段是否符合预期
  • 切换到Application面板，检查Cookie是否成功写入浏览器

• 排查手动登录的控制台报错
  既然手动在Cypress浏览器里登录也失败，直接在该浏览器的控制台中查看报错信息，比如是否有Cookie blocked或跨域相关的提示，这能快速定位核心问题。

• 临时绕过登录的方案
  如果只是想快速推进后续测试，可以在测试前直接设置登录状态的Cookie：

  beforeEach(() => {
    // 替换为你的实际Cookie名和登录后获取的Token值
    cy.setCookie('auth_token', 'your-valid-auth-token')
  })
  

  不过这只是临时方案，还是建议优先解决根本的Cookie配置问题。

内容的提问来源于stack exchange，提问作者Boris K