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自動化相關技術交流。