After implementing an invisible v2 Google reCAPTCHA (the annoying box on a form that asks you to prove your humanity) on a client site, I realized I had no idea how to test it. Like other developers encountering the unfamiliar, I Googled it.
I learned that once you've implemented the v2 reCAPTCHA and set it as invisible (the least annoying option), you can use Chrome DevTools to mimic a bot as a device. This is similar to how you would do responsive testing for specific phone/tablet models.
Here's how to do it:
- Navigate to the form page with the reCAPTCHA and open Chrome DevTools by right-clicking the page and hitting 'inspect' or by typing CMD + OPT + I (Mac).
- Go to the DevTools Settings (the gears icon close to the top right corner).
- In the left sidebar, choose Devices.
- Click the button at the top to 'Add custom device'.
- You can call the device whatever you want, but it might be helpful for future you to name it something relevant. I called mine 'Bot'.
- Device size and type don't matter. I left mine at the defaults of 400x700 and 'Mobile'.
- The user-agent string must be set to 'Googlebot/2.1'. Click 'Add'.
- Close settings, but stay in DevTools. Select the 'toggle device toolbar' (the responsive icon at the top left of DevTools). In the dropdown, you should see your new device name (ex. Bot). Select it.
- Complete and submit your form. As long as your 'Bot' device is selected in DevTools, the reCAPTCHA image test will activate.