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

Question

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?

You're trying to access content within an iFrame. If you own the iFrame, this is doable, if you don't, it's not. Similar question/response here. https://stackoverflow.com/questions/364952/how-can-i-access-the-contents-of-an-iframe-with-javascript-jquery — Matthew M., May 17 '22 at 17:20
So if the iframe contains the source to another domain it means I don't own it? — Lukaso, May 18 '22 at 11:10

score 1 · Answer 1 · answered May 18 '22 at 07:41

1

You should use t.switchToIframe(selector) to switch to iFrame. You can learn more in the documentation: https://testcafe.io/documentation/402681/reference/test-api/testcontroller/switchtoiframe

answered May 18 '22 at 07:41

Alexey Popov

1,033
1
4
12

I tried what you suggested but testcafe can not find the selector, for which I used the name of my iframe (.switchToIframe('.a-x4nn9btmira')) and tried it also with the title of the iframe (.switchToIframe('.reCAPTCHA')). Matthew M. in the above comment suggested that it can not be done if I do not own the iframe. – Lukaso May 18 '22 at 13:27
You use an incorrect selector. `.` is used to find elements by `class`, not by `title` or `name`. Please read documentation about [CSS selectors](https://www.w3schools.com/cssref/css_selectors.asp). Also, I see that the iFrame has a dynamic `name`, which means you won't be able to find this element by the `name` attribute. You can do this by a title with the following selector: `[title="reCAPTCHA"]` – Alexey Popov May 19 '22 at 06:49

score 0 · Accepted Answer · answered May 22 '22 at 14:05

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.

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

2 Answers2