【任务描述】：前面我们已经学会了基本的界面元素定位方法，但是针对复杂的页面如何定位呢，如界面有自定义的下拉列表、时间控件、富文本输入框、面包屑导航等内容，如何定位到这些元素并输入想输入的内容？ 

【任务目标】：通过设计新增文章的自动化测试脚本，掌握页面内的iframe切换方法和页面间的窗口切换方法、鼠标和键盘自由组合实现复杂界面元素内容的输入。

【任务储备】：

1、switch_to方法

(1) iframe切换

在web自动化测试中，如果一个元素定位始终不到，如果定位方法没有写错，很大概率就是这个元素在iframe中。frame是html中的框架，通过使用frameset 标签可以将页面进行垂直或者水平分离，包含frameset、frame、 iframe三种标签。

Frameset：将HTML页面分割，可以嵌入多个HTML源码文件，实现单个页面显示不同HTML页面效果，不能嵌入在BODY标签中。

Frame：在Frameset下面设置Frame，实现某个框架页面，必须嵌套在Frameset中，无法单独存在。

Iframe：在某个页面嵌入一个HMTL窗口信息，可脱离Frameset应用，框架属性有自己定义。

新增文章页面结构中的iframe如图1所示。

 

图1

如果需要定位的元素在iframe中，则需要先切换到对应的iframe再定位元素，selenium切换iframe的方法有：

1）driver.switch_to.frame() #根据元id或索引切换

2）driver.switch_to.default_content() #切换到默认frame

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

如果一个界面中有很多iframe，且每个iframe没有id属性，则只能通过索引来定位，可以在右边的代码栏通过按Ctrl+F调出搜索栏，通过搜索来精准定位iframe的索引值（从0开始），具体如图2所示。

 

 

图2

（2）多窗口切换

在测试时有时候点击某些链接会打开一个新的窗口，想在新页面上操作就得先切换窗口，如在百度页面点击具体的某个搜索内容，则会打开一个新的窗口，如图3所示。

 

图3

selenium通过切换窗口句柄来进行多个窗口之间的切换，每个窗口都可以通过唯一标识句柄来标识，只有切换句柄就可以在多个窗口上灵活操作。

使用格式：driver.switch_to.window(driver.window_handles[n])，n表示窗口句柄索引

(3)弹出对话框alert切换

在页面操作时会遇到JavaScrip所生成的alert、 confirm以及prompt弹出框，需要对弹出框操作后才能进行下一步，如图4所示。

 

图4

selenium通过switch_to切换到弹出框后才能进行下一步操作，具体代码为：

driver.switch_to.alert()   #切换到弹出框

操作alert的常用方法如表1所示。

表1

方法（属性）声明	功能描述
text	属性，返回弹出框里面的文本信息
accept()	接受弹出框，点击“确定”按钮
dismiss()	取消弹出框，点击“取消”按钮
send_keys(content)	发送文本内容content给弹出框的输入内容，针对prompt弹出框才有用

2、自定义下拉列表值选取

目前流行的很多应用系统都采用了前后端分离的技术来实现，前后端也都使用一些成熟的框架，界面部分元素根据内容动态生成，并不是用的常规的HTML标签来实现，达到更丰富的界面表现形式。如在新增文章界面中的“所属栏目”输入下拉列表，具体界面如图5所示。

 

图5

该下拉列表是通过div动态生成的，且无法在界面上通过鼠标右击然后点击“检查”的方式定位到需要选择的界面元素，前面学过的八种基本元素定位方法都没法定位到下拉列表里面的值，这种情况只能通过键盘鼠标的多次操作来实现下拉列表里面的取值操作

 

 

【任务实施】

1、页面结构分析。进入企业网站管理内容系统后台登录页面

2、编写脚本实现如下操作：

（1）进入企业网站内容管理系统后台登录页面；

（2）输入用户名、密码、验证码，单击“登录”按钮；

（3）单击顶部导航栏的“功能大全”菜单；

（4）在弹出的二级菜单栏中单击“内容管理”菜单；

（5）在右侧的三级菜单栏中单击“文章管理”菜单；

（6）在文章管理页面单击“新增”按钮；

（7）在文章新增页面进行如下操作：

    1）在所属栏目输入框中选择“新闻动态下面的公司新闻”；

        2）在文章属性输入框中选择“推荐”值；

        3）在发布时间输入框（日历显示控件）中选择当前日期的后一天；

        4）在文章缩略图（文件输入框）中输入一张图片；

        5）在文章内容（富文本输入框）输入“富文本输入框”内容；

        6）单击右上角的“保存”按钮；