如何从赛普拉斯测试呼叫第三方网站获取Captcha图像的文本？

Question

我需要获取“验证码”图像的文本并进行计算，并在提交表单时在文本字段中输入值。我发现第三方库就是这样做的。我的问题是如何在赛普拉斯测试中调用第三方库（https://somesite）？或者有没有其他简单的方法来使用JavaScript获取验证码图像，有人可以建议如何实现这一点？

describe('Check the submission of form', function() {
      it.only('Verify the submission of form', function() {
        const getCaptcha = () => {      
            // How to call the third party url here or some where ???
            return text  // these text retured are numbers and this look like '35+12 =?'
          }
         cy.visit("testUrl")
         cy.wrap({ name: getCaptcha })   
         cy.get('input[name="textinput1"]').type('Mazda')
         cy.get('input[name="textinput2"]').clear().type('Axela')
         ....// rest of the code 
      })
    })

Answer 1

如果我理解正确，您想访问您使用验证码控制的网站，获取捕获图像，然后将其发送到第三方API以解析验证码，然后继续登录该网站。

您可以使用cy.request来呼叫第三方API：

cy.request('POST', 'http://somesite', body).then((response) => {
    // do something with response.body
})

要从登录屏幕获取验证码图像，您可以使用以下内容：

describe('my website', () => {
    it('should accept typing after login', () => {
        cy.visit('testURL')
        cy.get('a selector to target your #captcha img').then((captchaImg) => {
            // Now you will have the captcha image itself
            const body = { captchaImg } // prepare the body to send to the 3rd party API
            cy.request('POST', 'http://somesite', body).then((response) => {
                // Process the response to extract the field that you are interested in
                // For instance, you could pull out the string '55+20='
                let captchaText = getCaptchaText(response.body)
                let captchaAnswer = getCaptchaAnswer(captchaText)
                cy.get('captcha text input field').type(captchaAnswer)
                // You will probably need to click a submit button

                // Test the site here, now that you have logged in
                cy.get('input[name="textinput1"]').type('Mazda')
                // assert something
                cy.get('input[name="textinput2"]').clear().type('Axela')
                // assert something else     
            })
        })
    })
})

执行此额外请求每次测试都会大大减慢测试速度。因此，最好一次测试登录流程，然后尝试一些替代方法来绕过站点的登录流程以进行其余测试。至少，您可以尝试将captcha相关的测试逻辑放入before钩子中，然后运行一组测试。

赛普拉斯建议不要在测试中访问第三方网站，原因有几个，记录在this answer中。他们还建议不要测试您无法控制的网站。但是访问第三方API可以使用cy.request完成。