[FIXED] How can I select a button contained within an iFrame in Playwright (python) by index?

Issue

I am attempting to select a button within an iframe utilizing Python & Playwright... in Selenium I know you can do this by using indexes, is this possible in playwright, I've been digging through the documentation and can't seem to figure it out. The button contained within the iframe that I am trying to select is:

"button:has-text(\"Add New User\")"

The html code for the iframe I am using looks similar to this:

<iframe src="https://www.urlthatcannotbereturnedinpagehtml.com/veryparticularparameters" width="100%" style="height: 590px;"></iframe>

Does anyone have any thoughts? About at wits end here.... I've attempted to find the url by parsing the code for the webpage, but this portion can't be selected like that. I may just be at a loss with the documentation in playwright, I've spent so much time in selenium that this seems like an entire new language.

Thanks!

Solution

From what I understand, you have a page that has content within an iframe. You want to use Playwright to access elements within that frame.

The official docs to handle frames: Official docs: https://playwright.dev/docs/frames#frame-objects

You could then try something like this:

// Locate element inside frame
const iframeButton = await page.frameLocator('iFrame').locator("button:has-text(\"Add New User\")");
await iframeButton.click();

Notice that the example has the iFrame tag as locator, but you could and should use something more accurate like and id, name or url.

Answered By - ttqa

Answer Checked By - Marilyn (PHPFixing Volunteer)

Read More

[FIXED] How to work out if two different selectors point to the same element on a page?

Issue

Given the following page

<div id="something">
    <div id="selected">
    </div>
</div>

In playwright I have two selectors like this..

selectorA = "#something >> div >> nth=1";
selectorB = "#selected";

These two selectors point to the same element on the page. How can I compare the two selectors / locators to figure out if they are pointing to the same element or not?

Solution

I found out how to do it.

async function compareLocators(firstLocator: Locator, secondLocator: Locator): Promise<boolean> {
    const firstHandle = await firstLocator.elementHandle();
    const secondHandle = await secondLocator.elementHandle();
    return firstLocator.page().evaluate(
        compare => compare.left.isEqualNode(compare.right),
        { left: firstHandle, right: secondHandle }
    );
}

Now you can feed this function two locators and it returns true/false if they point to the same locator.

Answered By - Greener

Answer Checked By - Marilyn (PHPFixing Volunteer)

Read More