Puppeteer hangs when page has lazy loaded iframe #727

straker · 2023-05-10T20:59:06Z

When a page has an iframe with loading="lazy" attribute and that has not been scrolled into view, Puppeteer will hang indefinitely if you try to interact with a non-loaded iframe (e.g. using frame.$$(selector) never throws nor completes). What that means is if you try to scan a page with such an iframe the analyze will never finish (e.g. https://www.rastoder.si/).

We should inform the user that the iframe isn't loaded and skip it like we do when we can't inject axe into the iframe.

The text was updated successfully, but these errors were encountered:

padmavemulapati · 2023-10-11T12:27:36Z

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: 300vh">
        <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: 300vh">
      <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 Puppeteer found - `frame-tested` incomplete result and `frame-title` failure too.

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:

4.for webdriverjs:

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:

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

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.include('#shadow-root-2').analyze();
  const results = await builder.analyze();
    fs.writeFile("./lazyiframestest.json", JSON.stringify(results, null,4),(err)=>
    {if(err){
        console.error(err);
        return;
        };
        console.log("File has been created");
    })
   client.deleteSession();
})();

Result:

7. for Playwright:

TestScript:

const { AxeBuilder } = require('@axe-core/playwright');
const playwright = require('playwright');
const fs = require('fs');
const { assert } = require('chai')
const axeSource = fs.readFileSync('./axeSource223.min.js', 'utf8');
describe('Accessibility Site Scan with axe-core playwright', () => {
 let browser;
  let context;
  let page;

  before(async function () {
     browser = await playwright.chromium.launch({ headless: true });
     context = await browser.newContext();
     page = await context.newPage();
  });

  after(async function () {
    await browser.close();
  });


  it('should scan the test page',
    async function () {
       await page.goto('http://localhost:8081/iframesfixture.html');
         const results = await new AxeBuilder({page}).analyze();
        fs.writeFile("./lazyloadPlaywright.json", JSON.stringify(results, null, 4), (err) => {
        if (err) {
          console.error(err);
          return;
        };
        })
      });
});

Result:

Environment:

Label	Value
Product	axe-core-npm/puppeteer
Version	4.7.4-62fd241.0
OS-Details	_MAC- Intel Core i7 - 11.6.8 & Windows11 _
BrowserDetails	Chrome Version 117.0.5938.88 (Official Build) (64-bit) & Firefox 117.0

This was referenced Jun 7, 2023

Webdriverjs hangs when page has lazy loaded iframe #744

Closed

fix: skip unloaded iframes for all apis #752

Merged

straker closed this as completed in #752 Jun 15, 2023

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Puppeteer hangs when page has lazy loaded iframe #727

Puppeteer hangs when page has lazy loaded iframe #727

straker commented May 10, 2023 •

edited

Loading

padmavemulapati commented Oct 11, 2023 •

edited

Loading

Puppeteer hangs when page has lazy loaded iframe #727

Puppeteer hangs when page has lazy loaded iframe #727

Comments

straker commented May 10, 2023 • edited Loading

padmavemulapati commented Oct 11, 2023 • edited Loading

Environment:

straker commented May 10, 2023 •

edited

Loading

padmavemulapati commented Oct 11, 2023 •

edited

Loading