Cypress自动化测试：如何获取浏览器网络中的6位登录验证码

完全可以实现，核心思路是用Cypress的cy.intercept()方法拦截触发验证码发送的网络请求，从响应数据里提取6位验证码，再自动填入输入框。具体步骤和修改后的代码如下：

• 在触发验证码请求前，设置拦截规则，监听对应的login接口请求（需根据实际请求方法调整，比如POST/GET），并给请求起别名方便后续调用
• 点击获取验证码的按钮后，等待拦截的请求完成，从响应体中提取验证码
• 将提取到的验证码填入输入框

修改后的测试代码：

describe('login', () => {
        
    beforeEach(() => {
        cy.visit('url from the website');
    })

    it('login', () => {
        // 进入登录页面
        cy.get('.css-90db6r > .chakra-button').click();

        // 输入CPF
        cy.get('#cpf').type('cpfnumber');

        // 拦截login接口请求，别名设为getVerificationCode
        // 注意：请根据实际请求方法（POST/GET）和接口路径调整参数
        cy.intercept('POST', '/api/login').as('getVerificationCode');

        // 点击按钮触发验证码发送
        cy.get('.chakra-stack > .chakra-button').click();

        // 等待请求完成，从响应中提取6位验证码
        cy.wait('@getVerificationCode').then((interception) => {
            // 假设验证码在响应体的verificationCode字段下，根据实际结构调整
            const verificationCode = interception.response.body.verificationCode;
            // 填入验证码输入框
            cy.get('.css-k008qs > :nth-child(1)').type(verificationCode);
        });

    })

})

需要注意的细节：

• 请根据实际项目的接口路径、请求方法（POST/GET）调整cy.intercept()的参数
• 验证码在响应体中的字段名可能不同，需要根据浏览器网络面板里的响应结构修改提取逻辑（比如有的可能是code、captcha等）
• 如果验证码是在请求参数里而不是响应体，也可以从interception.request.body中提取

内容的提问来源于stack exchange，提问作者Vinícius de Lima Cainé