End-to-end testing an application with integrated captcha

In this article, we explain how you can test your application with E2E tests, even if it is protected by a captcha.

What are E2E tests?

End-to-end tests are a test method in which the system is tested as a whole from the customer's perspective. This helps developers to find errors from the user's perspective at an early stage. For this reason, E2E tests are very often carried out in the various test phases before a release. Popular tools for this type of testing currently include Playwright, Selenium and Cypress.

What are the problems with E2E tests and captchas?

Due to ever shorter release cycles, it is important to minimise the manual testing effort for E2E tests. The majority of tests should therefore be automated. These take control of a selected browser and test the application from the customer's perspective.

And here we come to a common problem with captchas. These are there to protect your application from bots that act in a similar way to your E2E tools. Therefore, you often have no choice but to remove the captcha during the test stage. However, there is always a risk that problems will occur during live integration, as the interaction between the form and captcha, for example, could not be tested.

What solution does CaptchaFox provide?

In order to successfully test your application with the integrated captcha, CaptchaFox offers you a test key for this case, which you can find in our documentation. This test key can only be used in combination with a specific secret key on your backend.

To be able to use this as effectively as possible, it is advisable to work with different environments. In our example below, we show you how you can do this in an Angular application.

Example using Angular

To create different environments, you can use Angular's CLI and execute the following command to create application environments. In Angular, application environments are configurations that allow you to define different settings (such as API URLs or debug flags) for different environments (e.g. development, production). They are typically saved in separate files and selected during the build process depending on the target environment.

1ng generate environments

You should now find the following folder structure in your project:

1project
2│
3└───app
4│   │   app.component.html
5│   │   app.component.ts
6│   
7└───environment
8    │   environment.ts
9    │   environment.development.ts
10    │   environment.staging.ts

In the newly generated environment.ts, you can now add all the environment variables that you need for your live environment, such as the site key for CaptchaFox that you generated in the portal.

1export const environment = {
2  production: true,
3  apiUrl: 'your-website.url'
4  captchaFox: 'your-sitekey'
5};

Next, you can define the environment variables for your test stage. To do this, open the environment.staging.ts file and add the environment variables here too. Make sure that you use the variables that you need for the tests. In our example, it looks like this:

1export const environment = {
2  production: false,
3  apiUrl: 'your-website.url'
4  captchaFox: 'sk_11111111000000001111111100000000'
5};

You can also use the test key used here for your tests. You can also find it in our documentation. By using this sitekey, the captcha for the end-to-end test will always return a successful response.

To build your application in the test environment, simply execute the following command:

1ng build --configuration=staging

With the received Sitekey, you can now test your application in different development environments by including the captcha in your preferred environment and checking the functionality accordingly. This allows you to validate the behaviour of the application in both the development and production environments.

If you want to dive deeper into the integration, you can read the official documentation.