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自动化相关技术交流。