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:
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.
//let's declare the iframe object and identify it from a unique part of the url
const frameReCAPTCHA = browser.page
.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.
//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
//click on the reCAPTCHA checkbox
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:
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.