Как позвонить на сторонний сайт из Cypress test, чтобы получить текст изображения Captcha?

Question

Мне нужно получить текст изображения "captcha", рассчитать его и ввести значение в текстовое поле при отправке формы. Я обнаружил, что сторонняя библиотека, которая делает это. У меня вопрос, как вызвать стороннюю библиотеку ( https://somesite/) в тесте Cypress? Или есть какой-то другой простой способ получить изображение с помощью 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     
            })
        })
    })
})

Выполнение этого дополнительного запроса каждый тест значительно замедлит ваши тесты. Поэтому лучше один раз протестировать поток входа в систему, а затем попробовать некоторые альтернативные методы, чтобы обойти поток входа в систему вашего сайта для остальных тестов. По крайней мере, вы можете попробовать поместить тестовую логику, связанную с капчей, в ловушку before, а затем запустить набор тестов.

Cypress рекомендует не посещать сторонние сайты в ваших тестах по нескольким причинам, описанным в этом ответе. И они также рекомендуют против тестирования сайтов, которые вы не контролируете. Но доступ к стороннему API можно сделать с помощью cy.request,