Skip to content

Tabbing through iframe in Firefox doesn't work #2693

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom
Closed
aquaductape opened this issue Sep 23, 2021 · 2 comments · Fixed by #2700
Closed

Tabbing through iframe in Firefox doesn't work #2693

aquaductape opened this issue Sep 23, 2021 · 2 comments · Fixed by #2700
Assignees
@LavrovArtem
Labels
FREQUENCY: level 1 TYPE: bug

Comments

@aquaductape
Copy link

aquaductape commented Sep 23, 2021 •
edited
Loading

What is your Scenario?

There's two buttons and in between them is a same domain iframe, which contains 3 tabbable elements. The point of the test is to tab through all items including the ones inside the iframe. I've tested in Chrome and it works, but Firefox fails.

This is a testcafe issue because I opened Firefox browser and tabbed through iframe normally.

What is the Current behavior?

After clicking first button, then start tabbing 4 times, it only tabs to iframe's 1st tabbable element and hangs there, test doesn't throw error but hangs.

What is the Expected behavior?

After tabbing 4 times the active element should be the last button, which is not an iframe element.

App Code

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>

<body>
  <button id="first-button">first button</button>
  <br>
  <iframe frameborder="0"></iframe>
  <br>
  <button id="last-button">last button</button>
  <script type="module">
    const iframe = document.querySelector('iframe');
    const doc = iframe.contentWindow.document;
    doc.write('<html><body style="background: #f5f5df;"><div> <h1 style="font-size: 14px">Same Domain Iframe</h1> <button>Button</button> <br><br> <a href="#">Link</a> <br><br> <input type="text" placeholder="Text input..."></body> </html>');
    doc.close()
  </script>
</body>

</html>
fixture`iframes`.page`index.html`;

test("Tab through iframe", async (t) => {
  const lastBtnId = await Selector("#last-button").id;
  await t.click("#first-button");
  await t.pressKey("tab").pressKey("tab").pressKey("tab").pressKey("tab");
  await t.expect(await t.eval(() => document.activeElement.id)).eql(lastBtnId);
});

Your Environment details:

  • node.js version: v14.17.6
  • browser name and version: Firefox 92.0 (64-bit), Chrome 93.0.4577.82 (64-bit)
  • platform and version: Linux Ubuntu 20.04.3 LTS x86_64
@aquaductape aquaductape changed the title Tabbing through iframe in Firefox hangs (doesn't work) Tabbing through iframe in Firefox doesn't work Sep 23, 2021
@aquaductape
Copy link
Author

aquaductape commented Sep 23, 2021 •
edited
Loading

Ok I found a work around, if I delay iframe content creation in the script, then the tabbing works normal and test passes.

For delay, timeout amount varies based on the project, in this example, timeout of 0ms works, but for my project I had to bump it up for 50 ms.

updated script inside html file

setTimeout(() => {
  run()
})

function run() {
  const doc = iframe.contentWindow.document;
  doc.write('<html><body style="background: #f5f5df;"><div> <h1 style="font-size: 14px">Same Domain Iframe</h1> <button>Button</button> <br><br> <a href="#">Link</a> <br><br> <input type="text" placeholder="Text input..."></body> </html>');
  doc.close()
}

updated html

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>

<body>
  <button id="first-button">first button</button>
  <br>
  <iframe frameborder="0"></iframe>
  <br>
  <button id="last-button">last button</button>
  <script type="module">
    const iframe = document.querySelector('iframe');

    setTimeout(() => {
      run()
    })

    function run() {
      const doc = iframe.contentWindow.document;
      doc.write('<html><body style="background: #f5f5df;"><div> <h1 style="font-size: 14px">Same Domain Iframe</h1> <button>Button</button> <br><br> <a href="#">Link</a> <br><br> <input type="text" placeholder="Text input..."></body> </html>');
      doc.close()
    }

  </script>
</body>

</html>

@VasilyStrelyaev
Copy link
Collaborator

Thank you for reporting this. I have reproduced the behavior you described. We will update this thread once we have any news.

@LavrovArtem LavrovArtem linked a pull request Oct 5, 2021 that will close this issue
Uninitialized iframes should correctly behave when they are rewritten #2700
Merged
@LavrovArtem LavrovArtem self-assigned this Oct 5, 2021
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees

@LavrovArtem LavrovArtem

Labels
FREQUENCY: level 1 TYPE: bug
Projects
None yet
Milestone
No milestone
3 participants
@LavrovArtem @VasilyStrelyaev @aquaductape