TestCafe, selector is not visible but document.querySelectorAll returns the selector (iframe)

In a TestCafe test I try to switch to an Iframe with the selector bellow:

const iframeCase = Selector('iframe').withAttribute('title', /SR/); 
// I also tried with const iframeCase = Selector("#PegaGadget7Ifr");

But when I run the test, the last test step:

.switchToIframe(iframeCase);

Fails and I receive the following error: The element that matches the specified selector is not visible.

This is the test:

test("First Test", async (t) => {
  await t
    .typeText(username, "this is a username")
    .typeText(password, "this is a password")
    .click(submitButton)
    .click(rocketIconButton)
    .click(caseManager7Button)
    .resizeWindow(1200, 800)
    .click(newCaseButton)
    .click(ServiceRequestButton)
    .switchToIframe(iframeNew)
    .click(doneButton)
    .switchToMainWindow()
    .switchToIframe(iframeCase);
});

When I check the DOM in the debug mode of TestCafe I do see the iframe:

<iframe name="PegaGadget7Ifr" id="PegaGadget7Ifr" border="0" frameborder="0"style="" title="SR-1234" 
data-hammerhead-focused="true"></iframe>

Also when I do a simple document.querySelectorAll('iframe') in the console of the Chrome browser the test is running. It returns the iframe. I also checked if the iframe I'm trying to select is not in a different iframe. But that is not the case.

Did anyone experienced the same issue and what was causing it? Unfortunately I can't share the application under test, since it's is running in a closed corporate environment.

testcafe: 1.10.1
Chrome 87.0.4280.141 / Windows 10.  
node: v14.15.4