'Trying to access iframe inside of another iframe with puppeteer

I am trying to access iframe inside of another iframe with puppeteer. It just happened so the website itself is in iframe, and then there is login form in another iframe.

I have tried to access the nested iframe by first accessing not nested one, but apparently it doesn't work, because it doesn't detect any elements.

The first iframe and interaction with it, work perfectly fine.

Thanks in advance y'all.

That's visual representation of nested iframe, if you didn't get what I mean.

const puppeteer = require("puppeteer");

(async () => {
    const browser = await puppeteer.launch({ headless: false });
    const page = await browser.newPage();
    await page.goto('https://www.hentaiheroes.com');

    await page.waitForTimeout(1000);

    // Confirm the age by clicking button 'OK'
    await page.waitForSelector('iframe');
    const element = await page.$(
      'iframe[src="/home.html"]',
    );
    const frame = await element.contentFrame();
    await frame.click('#popup_confirm');

    // Click on login button
    await frame.waitForSelector('.igreen');
    await frame.click('.igreen');
    
    // Login with credentials
    await frame.waitForSelector('#authentication-iframe');
    const innerElement = await frame.$(
      'iframe[src="https://eggs-ext.kinkoid.com/authentication/start_authentication?product_id=1&language=en&purpose=authenticate"]',
    );
    const innerFrame = await innerElement.contentFrame();
    console.log("1");
    await innerFrame.waitForSelector('#login_register_form');
    console.log("2");
    // await innerFrame.type('#auth-email', '[email protected]');
    // await page.waitForSelector('#auth-password');
    // await loginFrame.type('#auth-password', 'Ab77015221787');
    // await loginFrame.click('#submit-authenticate');

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


Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source