How to test reCAPTCHA when running load tests

How to disable reCAPTCHA for testing purposes during a load test, using Flood Element, a Puppeteer-based automated tool

The reCAPTCHA process is a very common security verification practice used widely across the Web. There are different types of CAPTCHA plugins and they have evolved over the years. The one we will look at in this article is one of the most common - called reCAPTCHA.

reCAPTCHA is a plugin that initially monitors various user behaviours and culminates in a single checkbox that, once clicked, will show a number of images to be selected based on a simple question.

 

In the above example, we can see it is asking the user to only select images that contain cats.

reCAPTCHA plugins are usually combined with a login or similarly important action to help identify whether the end user is an actual human or an unwanted automated tool masquerading as one.

One problem solved, another introduced.

However, while reCAPTCHA solves this type of problem quite well, it also introduces a new problem specifically for QA Testers needing to carry out Functional or Load Testing activities.

Automated tools used to try and circumvent these reCAPTCHA-enabled sites are very similar to (if not the same) tools used to legitimately test these same websites for load testing or functional test automation activities.

Getting around reCAPTCHA while testing

 

Let's firstly look at what's involved in the actual deployment of a typical reCAPTCHA plugin. At the moment, reCAPTCHA comes in two versions - v2 and v3.

v2 is older but still fully supported and is still very useful for simple implementations. v3 is more suited for advanced implementations and for companies who would likely want more data about their actual traffic.

For reCAPTCHA v3, it is possible to create a separate identification key solely for test environments as opposed to a key used on your actual Production site. This is very helpful as you can use a 'test' key to effectively bypass the reCAPTCHA question for testing purposes, and all verification requests will pass.

For reCAPTCHA v2, a slightly different way of doing this is to use some pre-generated public test keys as follows:

bash
Site key:6LeIxAcTAAAAAJcZVRqyHh71UMIEGNQ_MXjiZKhI
Secret key:6LeIxAcTAAAAAGG-vFI1TnRWxMZNFuojJ4WifJWe

 

You can find more information here.

 

Once either of these test keys have been implemented, you will see the following message in red on the page for the reCAPTCHA plugin.

 

Scripting for reCAPTCHA

 

As an example, we can use an awesome load testing tool called Flood Element - but first we'll need to investigate how the plugin is integrated into the actual page.

Luckily, Google provides an example for us to be able to check out.

 

To help us understand how the plugin isimplemented, let's take a look at the actual code by using the Inspect function available in Google Chrome.

We can see that the plugin is contained within an iframe, which makes interacting with it a bit more complicated for most automation tools.

 

For Flood Element we can use the following identification properties so it can recognise the iframe and interact with any objects within it.

 

js
 //let's declare the iframe object and identify it from a unique part of the url
  const frameReCAPTCHA = browser.page
    .frames()
    .find(frame => frame.url().includes('api2/anchor?ar=1&k'))

This code sample essentially tells Flood Element to look for the standard reCAPTCHA URL containing 'api2/anchor?ar=1&k'.

We can now access the reCAPTCHA checkbox object that is required to be interacted with. Once again, we can get the properties of this object from the code itself.

The object can be accessed and selected with the following code in our Flood Element script.

 

js
  //get the css locator for the checkbox object
  let css_reCAPTCHA = '#recaptcha-anchor >div.recaptcha-checkbox-border'

  //let's wait for the checknox object within the iframe
  await frame_reCAPTCHA.waitForSelector(css_reCAPTCHA) 

  //click on the reCAPTCHA checkbox
  await frame_reCAPTCHA.click(css_reCAPTCHA)

Now, when playing this script back, we should see the reCAPTCHA checkbox being checked successfully, and if everything has worked, you'll see it showing as displayed here:

 

Common problems in testing reCAPTCHA 

Since the plugin is implemented as an iframe, we've been made aware of a related issue that may require some extra code to be placed within the Flood Element script when accessing iframes in what are called OOPIF's or 'Out Of Process IFrames'.

 More information about Chromium support for OOPIF's here.

OOPIF's are a technique which allows a child frame of a page to be rendered by a different process than its parent frame. This poses a problem for a lot of automated tools that cannot interact with these types of iframes.

Thankfully, not for Flood Element. We can simply add a flag in our test settings as follows:

 

js
launchArgs:['--disable-features=site-per-process'],

 

Putting it all together

 

Flood Element can be a very useful way to help load test your reCAPTCHA-enabled applications quickly and accurately.  We’d encourage you to take advantage of the reCAPTCHA example script and to test it out at scale using Flood.

Start load testing now

It only takes 30 seconds to create an account, and get access to our free-tier to begin load testing without any risk.