playwright (Python) click in a seemingly generated frame?

Question

I'm trying to use playwright to interact with a page from a device. From the initial page presented by the device I select the tab I want from the html I see using inspect with

page.click('id=laConfig')

for the displayed code snippet

<div id="nav" class="nav" style="width: 974px;">
        <span class="menu" id="iMenu3" onclick="ChangeFrame('log.asp',3)">
            <label id="laLog" name="laLog" class="mousepointer">Log</label>
        </span>
        <span class="menu menuBackground" id="iMenu4" onclick="ChangeFrame('paramconfig.asp',4)">
            <label id="laConfig" name="laConfig" class="mousepointer">Configuration</label>
        </span>
        <span class="logout" onclick="GoAway()">
            <label id="laExit" name="laExit" class="mousepointer">Logout</label>
        </span> 
    </div>

This causes the page I want to load and the parameter config frame loads. But I don't know how to go farther. In inspect I can see this code

<iframe frameborder="0" scrolling="no" id="contentframe" name="contentframe" class="contentframe" src="paramconfig.asp" style="height: 619px; width: 938px;"></iframe>

which makes me think it is generated from a paramconfig.asp file

I next want to select the time settings which is a button I hover over and then click in the displayed page but neither of the following selectors work:

page.click('text=Time Settings')
page.click('id=aTimeSettings')

What is also strange is I can't copy the code I see in inspect using a right click and copy command in inspect. I see the code below which I've captured in a screenshot which is how I got the text and ID above.

What do I need to do in playwright to cause it to click the time setting button the same way I do when I'm accessing the device as a user via its web page?

time setting html from inspect

Answer 1

You cannot use page.click for elements which are on a different page (in an iframe). You need to get a handle on the frame and interact with that.

Something like:

frame = page.frame(name="frame-name")
frame.click("the selector of the element you want to click inside the frame")

Something which might give you some inspiration for the correct selectors and so on is the codegen feature of Playwright . From the docs though, it looks like it generates JavaScript so really only for inspiration.

(PS No experience with Python here)