Selenium系列教程-09 如何切換iframe

系列資源：

• Selenium系列教程-01 環境配置
• Selenium系列教程-02 使用Chrome開發者工具
• Selenium系列教程-03 使用開發者工具進行元素定位
• Selenium系列教程-04 常用的元素定位方法
• Selenium系列教程-05 findElements 方法詳解
• Selenium系列教程-06 圖片上傳以及Web Element常用操作方法
• Selenium系列教程-07 使用Actions類模擬複雜操作
• Selenium系列教程-08 瀏覽器本身行為控制
• Selenium系列教程-09 如何切換iframe
• Selenium系列教程-10 如何執行JavaScript方法

主要內容

• iframe 切換
• 安居客登入頁面例項

frame 簡介

<frame> 是 HTML 元素，它定義了一個特定區域，另一個 HTML 文件可以在裡面展示。幀應該在 <frameset>中使用。 <frame>因為有一些缺點，比如效能問題，以及使用螢幕閱讀器的使用者缺少可訪問性。所以提倡使用<iframe>。 下面給大家簡單使用html程式碼為大家演示:

<h1>helloworld</h1>

<iframe src="https://www.baidu.com" style="width:640px;height:480px"></iframe>

複製程式碼

我們可以看到iframe中嵌入百度頁面。並且你可以用百度進行搜尋。

selenium 如何操作iframe

以上圖html程式碼為例，如果我們要在我們定義的iframe中進行百度搜尋操作。使用我們之前的方式是行不通的。需要我們切換到iframe中才能進行操作。 selenium 為我們提供了相關的API切換到iframe中。以node.js為例，我們可以通過呼叫 webdriver.switchTo().frame()來切換iframe。具體參考api: seleniumhq.github.io/selenium/do…

安居客登入示例

以安居客登入頁面為例，示範如何通過使用切換iframe。 首頁，我們通過開發者工具檢視安居客首頁，發現登入表單是在 <iframe> 標籤中，並且有id屬性。

這個時候如果我們要在登入表單中輸入資訊，我們必須首先切換到iframe中才能操作。 如下，node.js為實現的selenium程式碼:

var webdriver = require('selenium-webdriver')

let driver = new webdriver.Builder().forBrowser('chrome').build()

async function run (){
    await driver.get('https://login.anjuke.com/login/form')

    //取frame的id值，切換到frame中
    await driver.switchTo().frame('iframeLoginIfm')

    //進行表單操作
    await driver.findElement({id:'phoneIpt'}).sendKeys('123456')

}

run()

複製程式碼

---

獲取更多資訊，可以關注公眾號,也可以加QQ群：707467292 進行node.js自動化相關技術交流。