Cypress中如何在test.cy.js使用commands.js返回的验证码

原代码存在语法错误、逻辑时序、值传递三类问题，按以下步骤修改即可正常传入验证码：

• 修复自定义命令的语法错误：补全类型声明闭合标签、修复鉴权头模板字符串语法
• 改造自定义命令的返回逻辑：将xml解析的回调模式接入Cypress Promise链，把提取到的验证码作为命令返回值暴露
• 调整测试用例逻辑：去掉无效的外部依赖引入、修复页面地址错误、合并拆分的测试块保证执行时序正确（验证码获取必须在点击发送验证码之后、输入验证码之前执行）

修正后的 commands.js 代码 #

/// <reference types="cypress" />
import { parseString } from "xml2js";
Cypress.Commands.add('loginByGoogleApi', () => {  
  return cy.request({
    method: 'POST',
    url: 'https://www.googleapis.com/oauth2/v4/token',
    body: {
      grant_type: 'refresh_token',
      client_id:  Cypress.env('googleClientId'),
      client_secret:  Cypress.env('googleClientSecret'),
      refresh_token:  Cypress.env('googleRefreshToken'),
    },   
  }).then(({ body }) => {
    const { access_token } = body
    cy.log('Opening emails including code to verify')
    return cy.request({
      method: 'GET',
      url: 'https://mail.google.com/mail/feed/atom/verifyCode',
      headers: { Authorization: `Bearer ${access_token}` },
    }).then(({ body }) => {
      return new Cypress.Promise((resolve, reject) => {
        parseString(body, function (err, results) {
          if (err) return reject(err)
          const codeTitle = results.feed.entry[0].title[0];
          const code = codeTitle.replace('Chaine confirmation code: ','');
          cy.log(code)
          resolve(code)
        });
      })
    });   
  })
})

修正后的 testFile.cy.js 代码 #

describe('Open login page', () => {   
  it('Enter your email to login', () => {
    cy.visit('https://chaineapp.com/staging/login')
    cy.get('#field-1').click().type('paras@loadtap.com');
    cy.get('[class*="chakra-button css-yg51i0"]').click();
    // 调用自定义命令拿到验证码后直接输入
    cy.loginByGoogleApi().then(code => {
      cy.get('#pin-input-2-0').type(code);
    })
  }) 
})

说明：如果验证码是6位拆分到多个独立输入框的结构，拿到code后可以用code.split('')拆成单字符数组，遍历输入到对应pin输入框即可，当前代码针对单输入框的验证码场景直接可用。

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