Testcafe: Click on checkbox inside a virtual element (#document)

So here is the HTML section that describes my reCAPTCHA element and the blue coloured part is the one I’m trying to access:

I am aware that for the reCAPTCHA elements there are other workarounds. But I’m curious if it is possible just to click on the checkbox because the test does anyway not appear and it passes automatically when I click on the checkbox manually.

So far I have tried out this code:

import { Selector } from 'testcafe';

fixture`Starting test 02.`
    .page`https://etherscan.io/register`;

test('Test 02', async t => {
    const checkbox = Selector('.g-recaptcha').find('div').find('div').find('iframe');
    await t
        .click(checkbox, { offsetX: 20 , offsetY: 25 })
});

But I don’t know how to get inside the #document element. What I’m wondering is that my final element is of type “span” and not “input” but it contains a list of events where “click” is included. Is this possible to access this span element with testcafe and trigger a click event? Do you have maybe any other suggestions what I could try out?

Answer

So the solution for this is as follows:

import { Selector } from 'testcafe';
    
fixture`Starting test.`
    .page`https://etherscan.io/register`;
    
test('Test', async t => {
    // Switch to the recaptcha iframe element and click on the checkbox
    await t
        .switchToIframe(Selector('iframe').withAttribute('title','reCAPTCHA'))
        .click('#recaptcha-anchor.recaptcha-checkbox.goog-inline-block.recaptcha-checkbox-unchecked.rc-anchor-checkbox');
});

But I have to mind that when you use testcafe google’s reCAPTCHA will always give you some test and never just check the box without any testing as it can happen when you do it by hand.