如何使用Cypress脚本实现Mixpanel平台的登录操作？

1. 基础登录脚本 #

Mixpanel登录页核心元素为邮箱输入框、密码输入框和提交按钮，直接定位这些元素即可完成登录：

describe('Mixpanel登录', () => {
  it('成功登录到仪表盘', () => {
    // 访问Mixpanel登录页面
    cy.visit('https://mixpanel.com/login')

    // 输入账号邮箱
    cy.get('input[name="email"]').type('你的Mixpanel邮箱')

    // 输入账号密码
    cy.get('input[name="password"]').type('你的Mixpanel密码')

    // 点击登录按钮
    cy.get('button[type="submit"]').click()

    // 验证登录成功：确认跳转至仪表盘
    cy.url().should('include', '/dashboard')
    // 可选：验证页面存在用户标识元素（如头像）
    cy.get('.user-profile-avatar').should('be.visible')
  })
})

2. 敏感信息安全处理 #

不要将账号密码硬编码到脚本中，使用Cypress环境变量管理：

• 在项目根目录创建cypress.env.json文件：

{
  "mixpanel_email": "你的Mixpanel邮箱",
  "mixpanel_password": "你的Mixpanel密码"
}

• 修改脚本调用环境变量：

cy.get('input[name="email"]').type(Cypress.env('mixpanel_email'))
// { log: false } 避免密码在测试日志中明文显示
cy.get('input[name="password"]').type(Cypress.env('mixpanel_password'), { log: false })

3. 应对额外验证机制 #

如果你的Mixpanel账号启用了两步验证或验证码，需针对性处理：

• 两步验证（TOTP）：借助cypress-totp插件生成验证码，步骤如下：
  1. 安装插件：npm install cypress-totp --save-dev
  2. 在脚本中调用生成并输入验证码：

  import totp from 'cypress-totp'
  
  it('带两步验证的登录', () => {
    // 完成邮箱密码输入并点击登录后
    const totpSecret = '你的Mixpanel两步验证密钥' // 从账号安全设置中获取
    const verificationCode = totp.generate(totpSecret)
    cy.get('input[name="otp"]').type(verificationCode)
    cy.get('button[type="submit"]').click()
  })
  

• reCAPTCHA验证：建议在测试环境关闭验证码，或使用Mixpanel API密钥进行身份验证；自动化脚本硬解验证码不可靠，不推荐。

4. 优化登录效率 #

使用Cypress的session功能缓存登录状态，避免重复登录：

describe('Mixpanel自动化流程', () => {
  beforeEach(() => {
    cy.session('mixpanel-login', () => {
      cy.visit('https://mixpanel.com/login')
      cy.get('input[name="email"]').type(Cypress.env('mixpanel_email'))
      cy.get('input[name="password"]').type(Cypress.env('mixpanel_password'), { log: false })
      cy.get('button[type="submit"]').click()
      cy.url().should('include', '/dashboard')
    })
  })

  it('修改仪表盘配置', () => {
    cy.visit('https://mixpanel.com/dashboard')
    // 此处添加仪表盘修改的操作代码
  })
})

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