CODEWITHSUNDEEP
javascriptcypress
soccerway
soccerway

Reputation: 12011

How to call a third party site from Cypress test to get the text of Captcha image?

I need to get the text of a 'captcha' image and calculate it and enter the value in a text field while submitting a form. I have found that a third party library which does that. My question is how to call the third party library ( https://somesite) in the Cypress test? Or is there any other easy way to get the captcha image using javascript, could someone please advise on how to achieve this? 

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 
      })
    })

Upvotes: 0

Views: 2080

Answers (1)

Craig
Craig

Reputation: 348

If I understand correctly, you want to visit a site you control that uses captcha, get the capture image, then send it to a 3rd party API to resolve the captcha, then continue to login to the site.

You can use cy.request to call a 3rd party API:

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

To get the captcha image from your login screen you could use something like:

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     
            })
        })
    })
})

Doing this extra request each test will slow down your tests considerably. So it is better to test the login flow once, and then try some alternative methods to bypass the login flow of your site for the rest of the tests. At the least, you could try putting the captcha related test logic into a before hook and then run a suite of tests.

Cypress recommend against visiting 3rd party sites in your tests for several reasons, documented in this answer. And they also recommend against testing sites which you don't control. But accessing a 3rd party API can be done with cy.request.

Upvotes: 2

Related Questions