Testcafe AWS Cognito Login - Input not recognized as visible

Question

I'm building a website and as a part a AWS Cognito login is used. I now wanted to write e2e test in TestCafe, but I'm struggling to get the Cognito login form to work with TestCafe.

When no session is found, the page will redirect you to the proper AWS Cognito OAuth "login" page.

The following test code will fail

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

with the error

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 |

And in deed, when I execute the test

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

it does fail.

The curious thing is a) I do actually see the element and b) it's neither display: none nor visibility: hidden as descripted here under visible.

The element does exists according to TestCafe as the following does not fail:

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

What am I missing here? How do I get TestCafe to work with the AWS Cognito OAuth login page?

Setup:

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

$ node --version    
v16.14.0

$ testcafe --version
1.18.4

I tested this behaviour in with chrome , firefox and safari

Answer 1

The simple answer is that there are two inputs for each id, eg signInFormUsername , and by this we get multiple items matching each selector. The second element for each selector is invisible ( display: none ). The solution is to filter out the invisible elements:

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

I'm not a 100% convinced that this aa good solution.

Original question and solution can be found here