0

I am encountering a problem while attempting to click a button inside a nested iframe. The issue arises because there are multiple iframes on the page, and the button I want to interact with has the same value for the "id" attribute across these iframes. You can refer to the following image for a visual representation of the iframes

enter image description here

I have made several attempts to click the button using JavaScript and the Playwright testing framework, but none of my approaches have been successful. Here is my most recent attempt:

const { } = require('@playwright/test');
const AbstractPage = require('./AbstractPage');

class SuperPage extends AbstractPage {
    constructor(page) {
        super(page);
        this.iframeSelector = '#betgenius-iframe';
        this.buttonSelector = 'button.mdc-button.mg-selector';
        this.drawButton = 'Draw';
    }

    async clickOnDrawButton() {
        const frame1 = this.page.frameLocator(this.iframeSelector)
            .locator("//div[@class='centralButtonBar ng-star-inserted']//button[@class='mdc-button mg-selector mdc-button--outlined mdc-ripple-upgraded']")
        await frame1.click();
    }
}

module.exports = SuperPage;

I would greatly appreciate any suggestions or insights on how to resolve this issue. Thank you in advance for your help!

Harshit Soni
  • 37
  • 4
  • Are the iframes all in the same domain? You can only access an iframe contents in the same domain as the script's page. – Barmar May 30 '23 at 15:11
  • 1
    To access something in an iframe you must refer to its `contentWindow`. If there are nested iframes, you will have multiple `contentWindow` properties. You can't use a single XPath across different iframes. – Barmar May 30 '23 at 15:12
  • @Barmar Thanks for showing direction , using contentWindow works . – Harshit Soni May 31 '23 at 08:19

0 Answers0