[selenium] Multi-frame switching positioning elements

frame introduction

frameis frame navigation htmlin . In the same frameset, click the hyperlink of a certain frame, and the content will be displayed in the window of another frame.

For example, on the background management page, click the button on the left navigation bar to display the loaded content in the right area instead of opening a new window.

frame introduction

frameis frame navigation htmlin . In the same frameset, click the hyperlink of a certain frame, and the content will be displayed in the window of another frame.

For example, on the background management page, click the button on the left navigation bar to display the loaded content in the right area instead of opening a new window.

The code is as follows, you can visit the online html to run the website to edit and view. a

<!-- https://www.w3school.com.cn/tiy/t.asp?f=html_frame_cols -->
<html>
    
<frameset rows="15%,*">
    
    <frame src="/example/html/frame_a.html">
    
    <frameset cols="20%,*">
    <frame src="/example/html/frame_b.html">
    <frame src="/example/html/frame_c.html" name="show">
    </frameset>

</frameset>

</html>

Add hreftags tragetto realize the page frame jump.

<!-- 1、定义框架集中每个框架的名称 -->
<frame src="/example/html/frame_c.html" name="show">
<!-- 2、左侧导航栏页面内添加 target 属性 -->
<a href=url target="show">

frame positioning

frameThere are three types of tags:

framesetIt is consistent with the ordinary label positioning method, such as passing and id、nameother conventional methods;
frameAnd iframeyou need to switch to enter framein order to locate.

In webautomation, if an element cannot be located, it is most likely hidden frame.

Multi-frame switching

The switching framemethod is as follows.

# 通过 id 切换
driver.switch_to.frame('buttonframe')

# 通过 web element 切换
iframe = driver.find_element(By.CSS_SELECTOR, "#modal > iframe")
driver.switch_to.frame(iframe)  

# 多元素通过 index 切换
iframe = driver.find_elements(By.TAG_NAME,'iframe')[1]
driver.switch_to.frame(iframe)

# 回到默认 frame
driver.switch_to.default_content()

# 切换到父 frame
driver.switch_to.parent_frame()

For nesting frame, you need to enter the parent node first, then switch to the child node, and then operate on the child node.

driver.switch_to.frame("父节点")
driver.switch_to.frame("子节点")

example

with webdriver.Chrome() as driver:
    driver.get("https://www.runoob.com/try/try.php?filename=jqueryui-api-droppable")

    btn_locator = (By.ID, "draggable")
    # 该元素是「请拖拽我」，运行报错：NoSuchElementException
    # 因为该元素在 iframe 标签内，直接无法定位到元素
    # driver.find_element(*btn_locator).text)

    driver.switch_to.frame("iframeResult")  # 切换到 iframe 内
    assert driver.find_element(*btn_locator).text == "请拖拽我！"

    submit_locator = (By.ID, "submitBTN")
    # 点击提交按钮，运行报错：NoSuchElementException
    # 因为提交按钮在当前 iframe 外，还需要切出去
    # driver.find_element(*submit_locator).click()

    driver.switch_to.parent_frame()  # 切回父 frame
    assert driver.find_element(*submit_locator).text == "点击运行 》"