Testcafe AWS Cognito 登录 - 输入未被识别为可见

Question

我正在构建一个网站，其中一部分使用了 AWS Cognito 登录。我现在想在 TestCafe 中编写 e2e 测试，但我正在努力让 Cognito 登录表单与 TestCafe 一起工作。

当未找到会话时，该页面会将您重定向到正确的 AWS Cognito OAuth“登录”页面。

下面的测试代码会失败

import { Selector } from 'testcafe';

const config = {...};

test('Logging in', async t => {
    await t
        .typeText(Selector('input#signInFormUsername'), config.credentials.username)
        .typeText('input#signInFormPassword', config.credentials.password)
        .click('input[type=submit]');
});

有错误

The element that matches the specified selector is not visible.

...

       21 |});
         22 |
         23 |//then create a test and place your code there
         24 |test('Logging in', async t => {
         25 |    await t
       > 26 |        .typeText(Selector('input#signInFormUsername'), config.credentials.username)
         27 |        .typeText('input#signInFormPassword', config.credentials.password)
         28 |        .click('input[type=submit]');
         29 |});
         30 |

事实上，当我执行测试时

test('Logging in', async t => {
    const usernameInputVisible = usernameInputSelector.visible;
    await t.expect(usernameInputVisible).ok();
});

确实失败了。

奇怪的是 a) 我确实看到了该元素，并且 b) 它既不是 display: none 也不是 visibility: hidden 所描述的 here 可见。

根据 TestCafe，该元素确实存在，因为以下不会失败：

test('Logging in', async t => {
    const usernameInputExists = usernameInputSelector.exists;
    await t.expect(usernameInputExists).ok();
});

我在这里错过了什么？如何让 TestCafe 与 AWS Cognito OAuth 登录页面一起使用？

设置：

$ sw_vers
ProductName:    macOS
ProductVersion: 12.2.1
BuildVersion:   21D62

$ node --version    
v16.14.0

$ testcafe --version
1.18.4

我在 chrome、firefox 和 safari

中测试了这种行为

Answer 1

简单的答案是每个 id 有两个输入，例如signInFormUsername，这样我们就得到了与每个选择器匹配的多个项目。每个选择器的第二个元素是不可见的 (display: none)。解决方法是过滤掉不可见的元素：

test('Logging in', async t => {
    await t
        .typeText(Selector('input#signInFormUsername').filterVisible(), config.credentials.username)
        .typeText(Selector('input#signInFormPassword').filterVisible(), config.credentials.password)
        .click(Selector('input[type=submit]').filterVisible());
});

我不是 100% 相信这是一个好的解决方案。

可以找到原始问题和解决方案here

Testcafe AWS Cognito 登录 - 输入未被识别为可见

Testcafe AWS Cognito Login - Input not recognized as visible

javascript

testing

amazon-cognito

e2e-testing

testcafe