fix(playwright): skip unloaded iframes #1060

straker · 2024-05-13T15:12:35Z

Pulled out of #1048. Starting in Playwright 1.41.0 (using Chrome version 121.0.6167.57) Playwright is no longer loading the lazy loaded iframe that is out of view. Updated the version of Playwright and updated the tests to now account for this.

QA notes: Test a lazy loaded iframe with Playwright > 1.41.0 and ensure Playwright will complete an analyze of the page

straker · 2024-05-13T15:12:59Z

packages/playwright/src/index.ts

@@ -185,7 +185,14 @@ export default class AxeBuilder {

  private async inject(frames: Frame[]): Promise<void> {
    for (const iframe of frames) {
-      await iframe.evaluate(await this.script());
+      const race = new Promise((_, reject) => {


The newer versions of Playwright with the update to Chrome, combined with our changes to the lazy loaded frame test now make it so Playwright is not loading the lazy loaded iframe when it is outside the viewport.

Playwright does not have a pageload timeout like all the other drivers, and neither does the evaluate function have a timeout option. So this was the only other choice to have the lazy loaded iframe not hang indefinitely.

Zidious

One comment inline -

packages/playwright/src/index.ts

Resolved

## [4.9.1](v4.9.0...v4.9.1) (2024-05-15) ### Bug Fixes * **playwright:** skip unloaded iframes ([#1060](#1060)) ([d30dae4](d30dae4)) * Update axe-core to v4.9.1 ([#1055](#1055)) ([8644fbd](8644fbd)) No qa needed

padmavemulapati · 2024-05-17T13:10:51Z

Verified with the latest canary-build (4.7.4-62fd241.0)
Lazy-loaded iframes are scanning properly now, not hanging,

1. Here is iframes snippets:

lazyloadedIframe.html

<!DOCTYPE html>
<!DOCTYPE html>
<html lang="en" id="lazy-loading-iframe-root">
  <head>
    <title>Lazy Loading Iframe Root</title>
  </head>
  <body>
    <main>
      <h1>iframe context test</h1>
      <div style="margin-top: 3000vh">
        <iframe src="iframes/lazy.html" id="ifr-lazy" loading="lazy"></iframe>
      </div>
    </main>
  </body>
</html>

2. for this iframes - directory has a lazy.html file too

./iframes.lazy.html

<!DOCTYPE html>
<html lang="en">
  <head>
    <title>Lazy</title>
  </head>
  <body>
    <h1>Lazy</h1>
    <div style="margin-top: 3000vh">
      <iframe id="lazy-iframe" src="https://www.youtube.com/embed/REDRiwmNunA" title="MONTHLY SPOTLIGHT" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" loading="lazy"></iframe>
      <iframe src="baz.html" id="lazy-baz"></iframe>
    </div>
  </body>
</html>

3. for Playwright 1.44.0 Version and v1.42.1 :

TestScript:

const { AxeBuilder } = require('@axe-core/playwright')
const playwright = require('playwright')
const fs = require('fs')
const axe = require('axe-core')

;(async () => {
  const browser = await playwright.chromium.launch({ headless: true })
  const context = await browser.newContext()
  const page = await context.newPage()
  await page.goto('http://localhost:8081/iframesfixture.html')

  try {
   const results = await new AxeBuilder({page}).analyze();
    fs.writeFileSync('./lazyloadedIframes144.json', JSON.stringify(results, null, 4))
  } catch (e) {
    console.error(e)
  }

  await browser.close()
})()

Result for 1.44.0:

Result for 1.42.1:

4. For Puppeteer v22.9.0 and v22.6.3.

test-script:

const { AxePuppeteer } = require('@axe-core/puppeteer');
const puppeteer = require('puppeteer');
const fs = require('fs');

(async () => {
  const browser = await puppeteer.launch({ headless: false });
  const page = await browser.newPage();
  await page.setBypassCSP(true);
  await page.goto('http://localhost:8081/iframesfixture.html');
  const results = await new AxePuppeteer(page).analyze();
    fs.writeFile("./lazyframes_frametested.json", JSON.stringify(results, null,4),(err)=>
    {if(err){
        console.error(err);
        return;
        };
        console.log("File has been created");
    })

  await page.close();
  await browser.close();
})();

Results:
For 22.9.0

For 22.6.3

5.for webdriverjs - selenium-webdriver v4.21.0 & v4.19.0:

Test-script:

const { AxeBuilder } = require('@axe-core/webdriverjs');
const { Builder } = require('selenium-webdriver');
const chrome = require('selenium-webdriver/chrome');
const fs = require('fs');

(async () => {
  const driver = new Builder()
    .forBrowser('chrome')
    .setChromeOptions(new chrome.Options().headless())
    .build();
  await driver.get('http://localhost:8081/iframesfixture.html');
  try {
    const results = await new AxeBuilder(driver).analyze();
    fs.writeFile("./lazyiframestest.json", JSON.stringify(results, null,4),(err)=>
    {if(err){
        console.error(err);
        return;
        };
        console.log("File has been created");
    })
  } catch (e) {
    // do something with the error
  }

  await driver.quit();
})();

Result:
For 4.21.0

For 4.19.0

5. for CLI (selenium-webdriver v4.21.0 & 4.19.0)-

command is `axe http://localhost:8081/iframesfixture.html --save ./iframesresult1`

for selenium webdriver v4.21.0

for selenenium webdriver v4.19.0

6. for webdriverio:

TestScript:

const AxeBuilder = require('@axe-core/webdriverio').default;
const { remote } = require('webdriverio');
const fs = require('fs');

(async () => {
  const client = await remote({
    logLevel: 'error',
    capabilities: {
      browserName: 'chrome'
    }
  });

  await client.url('http://localhost:8081/iframesfixture.html');

  const builder = new AxeBuilder({ client });
  const results = await builder.analyze();
    fs.writeFile("./lazyiframestest.json", JSON.stringify(results, null,4),(err)=>
    {if(err){
        console.error(err);
        return;
        };
        console.log(results);
    })
   client.deleteSession();
})();

Result:

for 8.36.1

for 8.35.1

Environment:

Label	Value
Product	axe-core-npm
Version	4.9.2-a2f07c5.0
Playwright	1.44.0 & 1.42.1
Puppeteer	22.9.0 & 22.6.3
WebdriverIO	_8.36.1 & 8.35.1 _
Selenium-webdriver(WebdriverJS & CLI)	_ v4.21.0 & 4.19.0 _
OS-Details	_MAC- M1-14.4 & Windows11 _
BrowserDetails	Chrome Version 124.0.1 (Official Build) (64-bit) & Firefox 125.0.3

[![Mend Renovate](https://app.renovatebot.com/images/banner.svg)](https://renovatebot.com) This PR contains the following updates: | Package | Change | Age | Adoption | Passing | Confidence | |---|---|---|---|---|---| | [@axe-core/playwright](https://togithub.com/dequelabs/axe-core-npm) | [`4.9.0` -> `4.9.1`](https://renovatebot.com/diffs/npm/@axe-core%2fplaywright/4.9.0/4.9.1) | [![age](https://developer.mend.io/api/mc/badges/age/npm/@axe-core%2fplaywright/4.9.1?slim=true)](https://docs.renovatebot.com/merge-confidence/) | [![adoption](https://developer.mend.io/api/mc/badges/adoption/npm/@axe-core%2fplaywright/4.9.1?slim=true)](https://docs.renovatebot.com/merge-confidence/) | [![passing](https://developer.mend.io/api/mc/badges/compatibility/npm/@axe-core%2fplaywright/4.9.0/4.9.1?slim=true)](https://docs.renovatebot.com/merge-confidence/) | [![confidence](https://developer.mend.io/api/mc/badges/confidence/npm/@axe-core%2fplaywright/4.9.0/4.9.1?slim=true)](https://docs.renovatebot.com/merge-confidence/) | --- ### Release Notes <details> <summary>dequelabs/axe-core-npm (@axe-core/playwright)</summary> ### [`v4.9.1`](https://togithub.com/dequelabs/axe-core-npm/releases/tag/v4.9.1): Release 4.9.1 [Compare Source](https://togithub.com/dequelabs/axe-core-npm/compare/v4.9.0...v4.9.1) #### What's Changed - chore: bump ip from 1.1.8 to 1.1.9 by [@dependabot](https://togithub.com/dependabot) in [dequelabs/axe-core-npm#1023 - test(cli): add test to cover selenium-webdriver <4.17.0 by [@michael-siek](https://togithub.com/michael-siek) in [dequelabs/axe-core-npm#1038 - chore: merge master into develop by [@github-actions](https://togithub.com/github-actions) in [dequelabs/axe-core-npm#1041 - chore: bump undici from 5.28.3 to 5.28.4 by [@dependabot](https://togithub.com/dependabot) in [dequelabs/axe-core-npm#1042 - chore: update test-fixtures to fix lazy load iframe by [@straker](https://togithub.com/straker) in [dequelabs/axe-core-npm#1053 - docs(react): Update React support information. Offer axe Developer Hub by [@ballendq](https://togithub.com/ballendq) in [dequelabs/axe-core-npm#1047 - fix: Update axe-core to v4.9.1 by [@straker](https://togithub.com/straker) in [dequelabs/axe-core-npm#1055 - chore: RC v4.9.1 by [@github-actions](https://togithub.com/github-actions) in [dequelabs/axe-core-npm#1057 - chore: Update axe-core to v4.9.1 by [@attest-team-ci](https://togithub.com/attest-team-ci) in [dequelabs/axe-core-npm#1056 - fix(playwright): skip unloaded iframes by [@straker](https://togithub.com/straker) in [dequelabs/axe-core-npm#1060 - chore: bump the npm-low-risk group across 1 directory with 28 updates by [@dependabot](https://togithub.com/dependabot) in [dequelabs/axe-core-npm#1061 - chore: bump ejs from 3.1.9 to 3.1.10 by [@dependabot](https://togithub.com/dependabot) in [dequelabs/axe-core-npm#1049 - ci: update sync to master to include team-reviewers by [@michael-siek](https://togithub.com/michael-siek) in [dequelabs/axe-core-npm#1062 - chore: RC v4.9.1 by [@github-actions](https://togithub.com/github-actions) in [dequelabs/axe-core-npm#1065 - Release v4.9.1 by [@dequejenn](https://togithub.com/dequejenn) in [dequelabs/axe-core-npm#1068 **Full Changelog**: dequelabs/axe-core-npm@v4.9.0...v4.9.1 </details> --- ### Configuration 📅 **Schedule**: Branch creation - At any time (no schedule defined), Automerge - At any time (no schedule defined). 🚦 **Automerge**: Enabled. ♻ **Rebasing**: Whenever PR becomes conflicted, or you tick the rebase/retry checkbox. 🔕 **Ignore**: Close this PR and you won't be reminded about these updates again. --- - [ ] If you want to rebase/retry this PR, check this box --- This PR has been generated by [Mend Renovate](https://www.mend.io/free-developer-tools/renovate/). View repository job log [here](https://developer.mend.io/github/camunda/zeebe).

fix(playwright): skip unloaded iframes

b57bfd0

straker requested a review from a team as a code owner May 13, 2024 15:12

straker commented May 13, 2024

View reviewed changes

straker mentioned this pull request May 13, 2024

chore: bump the npm-low-risk group with 28 updates #1048

Closed

Zidious previously requested changes May 13, 2024

View reviewed changes

packages/playwright/src/index.ts Show resolved Hide resolved

throw only in run partial

41032a0

Zidious approved these changes May 13, 2024

View reviewed changes

straker merged commit d30dae4 into develop May 13, 2024
30 checks passed

straker deleted the playwright-lazy branch May 13, 2024 17:46

github-actions bot mentioned this pull request May 15, 2024

chore: RC v4.9.1 #1065

Merged

dequejenn mentioned this pull request May 20, 2024

Release v4.9.1 #1068

Merged

data-sync-user mentioned this pull request Jun 3, 2024

Bump @axe-core/react from 4.9.0 to 4.9.1 MozillaFoundation/foundation.mozilla.org#12380

Open

gurudeep9 mentioned this pull request Jun 23, 2024

[Snyk] Upgrade @axe-core/playwright from 4.9.0 to 4.9.1 gurudeep9/mattermost-test#3

Open

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

fix(playwright): skip unloaded iframes #1060

fix(playwright): skip unloaded iframes #1060

straker commented May 13, 2024 •

edited

Loading

straker May 13, 2024 •

edited

Loading

Zidious left a comment

padmavemulapati commented May 17, 2024 •

edited

Loading

command is `axe http://localhost:8081/iframesfixture.html --save ./iframesresult1`

fix(playwright): skip unloaded iframes #1060

fix(playwright): skip unloaded iframes #1060

Conversation

straker commented May 13, 2024 • edited Loading

straker May 13, 2024 • edited Loading

Choose a reason for hiding this comment

Zidious left a comment

Choose a reason for hiding this comment

padmavemulapati commented May 17, 2024 • edited Loading

command is axe http://localhost:8081/iframesfixture.html --save ./iframesresult1

Environment:

straker commented May 13, 2024 •

edited

Loading

straker May 13, 2024 •

edited

Loading

padmavemulapati commented May 17, 2024 •

edited

Loading

command is `axe http://localhost:8081/iframesfixture.html --save ./iframesresult1`