Testcafe：单击虚拟元素内的复选框（#document）

Question

这里是描述我的 reCAPTCHA 元素的 HTML 部分，蓝色部分是我要访问的部分：

我知道对于 reCAPTCHA 元素还有其他解决方法。但我很好奇是否可以只单击复选框，因为无论如何测试都不会出现，并且当我手动单击复选框时它会自动通过。

到目前为止我已经尝试过这段代码：

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 })
});

但我不知道如何进入#document 元素。我想知道的是，我的最后一个元素是“span”类型而不是“input”类型，但它包含一个事件列表，其中包含“click”。是否可以使用 testcafe 访问此 span 元素并触发点击事件？你有什么我可以尝试的其他建议吗？

Answer 1

您应该使用 t.switchToIframe(selector) 切换到 iFrame。您可以在文档中了解更多信息：https://testcafe.io/documentation/402681/reference/test-api/testcontroller/switchtoiframe

Answer 2

所以解决方法如下：

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');
});

但我必须注意，当您使用 testcafe google 的 reCAPTCHA 时，它会始终为您提供一些测试，绝不会在没有任何测试的情况下只勾选复选框，因为当您手动执行时可能会发生这种情况。

Testcafe：单击虚拟元素内的复选框（#document）

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

html

javascript

testcafe