Unable to switch iframe

What is your Scenario?

I am attempting to switch to an iframe using TestCafe.

What is the Current behavior?

When attempting to switch to an iframe, TestCafe does not think that it has loaded and displays the following message:

“Content of the iframe in which the test is currently operating did not load.”

What is the Expected behavior?

TestCafe successfully switches to the iframe

What is your public website URL? (or attach your complete example)

https://www.terrific.ie/dealer/bradys-of-castleknock/finance/45784/13295

Note this vehicle may not be available at some point

What is your TestCafe test code?

import { Selector, t } from "testcafe";

fixture(`Quick Test`);

test
 .page(`https://www.terrific.ie/dealer/bradys-of-castleknock/finance/45784/13295`)(
  `Quick Test`,
  async () => {
      await t
       .click(`.submit-outer`)
       .expect(Selector(`.car-summary-box`).visible)
       .ok()
       .expect(Selector(`.cw-finance-plugin.plugin-loaded`).visible)
       .ok()
       .switchToIframe(`.cw-finance-plugin.plugin-loaded`)
       .click(`.cw-checkmark`)
       .debug();
  });

Your complete configuration file

No response

Your complete test report

No response

Screenshots

No response

Steps to Reproduce

1. Run the attached code

TestCafe version

1.18.4

Node.js version

v14.19.0

Command-line arguments

testcafe chrome

Browser name(s) and version(s)

Chrome latest

Platform(s) and version(s)

No response

Other

This has been reproduced by Aleksey as per this stackoverflow question:

https://stackoverflow.com/questions/71528890/how-does-testcafe-decide-an-iframe-has-loaded/71558047

[kacy-weakley]

We also have this issue, intermittently. In case it helps, try this test sample:

import {Selector} from "testcafe";

fixture`TestCafe Demo Test`
  .beforeEach(async t => {
    await t
    .maximizeWindow()
    .navigateTo("https://mailchimp.com/login")
      .expect(Selector("div").withAttribute("data-mc-el", "loginAnnouncementAnimation")
        .with({ visibilityCheck: true }).exists).ok()
      .typeText(Selector("#username"), "abc123") // Enter your username here
      .typeText(Selector("#password"), "abc123") // Enter your password here
      .click(Selector("button[value='log in']"));
  })

test('Create email campaign', async t => {
  await t.click(Selector("li a").withAttribute("href", "#/create-campaign"))
    .click(Selector("div[role = 'listitem']").withText("Email"))
    .click(Selector("a span").withExactText("Regular"))
    .typeText(Selector("input").withAttribute("name", "textValue"), "Test Campaign")
    .click(Selector("button").withText("Begin"))
    .switchToMainWindow();

  const loadingFrame = Selector("[class *= 'frame'] [class *= 'loading']");
  await loadingFrame();
  if (await loadingFrame.exists) {
    await t
      .expect(loadingFrame.classNames)
      .notMatch(/active/, "container loading frame active", {timeout: 60000})
      .switchToIframe(Selector("#fallback:not([title *='Loading'])").with({visibilityCheck: true, timeout: 30000}));
  }
  await t
    .expect(Selector("[data-dojo-attach-point='itemContent'] img").with({ visibilityCheck: true }).exists).ok({timeout: 20000})
    .click(Selector("button").withText("Design Email"))
    .click(Selector("button").withAttribute("data-dojo-attach-point", "selectInlineEditorButton"))
});

[Artem-Babich]

Hi @kacy-weakley,

I just tested your code in the latest version of TestCafe and see that the test is completed correctly. Please try the latest version on your side. As for the original issue described in this ticket, unfortunately, we cannot continue our research until we have a simple project illustrating the issue without third-party libraries.