【WEB自动化测试】-下拉框、弹出框、滚动条、frame表单、多窗口切换

说明：下拉框就是HTML中元素。

花果水莲

4236人浏览 · 2023-07-09 19:39:22

花果水莲 · 2023-07-09 19:39:22 发布

一、下拉框

1.1 下拉框操作

说明：下拉框就是HTML中<select>元素

<select name="city">
	<option value="bj">北京</option>
	<option value="sh">上海</option>
	<option value="gz">广州</option>
	<option value="sz">深圳</option>
</select>

1.2 如何操作下拉框

实现方式一：先定位到要操作的option元素，然后执行点击操作

缺点：1. 操作起来比较麻烦，需要先定位到要操作的选项，然后在执行点击操作

2. 只能操作单个select，不能操作联动的select，比如省份-城市-区县

实现方式二：Select类，推荐使用，效率比较高

说明：Select类是Selenium为操作select标签特殊封装的

1.3 定位option元素操作下拉框

driver.find_element(By.CSS_SELECTOR, '[value="gz"]').click()

1.4 Select类操作下拉框

实例化对象：

select = Select(element)

element:<select>标签对应的元素，通过元素定位方式获取

例如：se = Select(driver.find_element(By.CSS_SELECTOR, '[name="city"]'))

操作方法：

1. select_by_index(index) -->根据option索引来定位，从0开始

2. select_by_value(value) -->根据option属性，value值来定位

3. select_by_visible_text(value) -->根据option显示文本来定位

二、弹出框处理(包含系统弹出框和自定义弹出框)

2.1 系统弹框的种类

网页中常用的弹出框有三种

1. alert 警告框

2. confirm 确认框

3. prompt 提示框

2.2 系统弹出框处理方法

说明：Selenium中对处理弹出框的操作，有专用的处理方法。

1. 获取弹出框对象

alert = driver.switch_to.alert

2. 调用

alert.text -->返回alert/confirm/prompt中的内容

alert.accept() -->接受对话框选项

alert.dismiss() -->取消对话框选项

3. 注意：凡是通过JS实现的系统弹窗，无法通过鼠标右键检查选项获取元素信息。

# 切换到弹窗
alert = driver.switch_to.alert
# 同意
alert.accept()

2.3 自定义弹出框（信息提示框）

自定义弹出窗，如报错提示信息，显示时间短。浏览器定位需要debug模式，才能长时间固定。通过selenium定位，与查找普通元素一样。一般用来获取提示框的内容。

time.sleep(0.5) # 等待时间是为了使内容加载出来。要不然只能定位到元素，但是内容抓取不到
msg = self.driver.find_element(By.CSS_SELECTOR,'p[class="el-message__content"]').text
assert msg == '报错信息'

三、滚动条操作

滚动条：一种可控制页面显示范围的组件

3.1 为什么要学习滚动条操作

1. 在HTML页面中，由于前端技术框架的原因，页面元素为动态显示，元素根据滚动条的下拉而被加载

2. 页面注册同意条款，需要滚动条到最底层，才能点击同意

3.2 实现方式

说明：Selenium中并没有直接提供操作滚动条的方法，但是它提供了可执行JavaScript脚本的方法，所以我们可以通过JavaScript脚本来达到操作滚动条的目的。

1. 设置JavaScript脚本控制滚动条

js = "window.scrollTo(0,1000)"

(0:左边距；1000：上边距；单位像素)

2. selenium调用执行JavaScript脚本的方法

driver.execute_script(js)

driver.get('https://news.baidu.com')
time.sleep(5)
js = "window.scrollTo(0,1000)"
driver.execute_script(js)
time.sleep(5)
# 反向只需要坐标归0
js = "window.scrollTo(0,0)"
driver.execute_script(js)

四、frame表单

4.1 frame 格式

frame:HTML页面中的一种框架，主要作用是在当前页面中指定区域显示另一页面元素

形式一：【了解】

<frameset cols="25%,75%">

<frame src="frame_a.html">

<frame src="frame_b.html">

</frameset>

形式二：

<iframe src="demo_iframe.html" name="iframe_1" width="200" height="200"></iframe>

login.html

<body>
  <div>
	账户<input type="text" id="user"></input>
  </div>
  <iframe src="frame_a.html" frameborder="1" height="500"  width="48%" name="frame1"></iframe>
  <iframe src="frame_b.html" frameborder="1" height="500"  width="48%" name="frame2"></iframe>
</body>

frame_a.html

<body style="background-color:#8F8FBD">
<div>
	账户A<input type="text" id="user1"></input>
  </div>
</body></html>

frame_b.html

<body style="background-color:red">
<div>
	账户B<input type="text" id="user2"></input>
  </div>
</body></html>

4.2 frame切换方法

说明：在Selenium中封装了如何切换frame框架的方法

方法：1）driver.frame(frame_reference) --切换到指定frame的方法

frame_reference：可以为frame框架的name，id或者定位到的frame元素

2）driver.switch_to.default_content() -->恢复默认页面方法

4.3 总结

为什么切换？

当前主页面没有iframe表单页面元素信息，不切换，找不到元素

如何切换

方法：driver.switch_to.frame("id\name\element")

iframe或frame只有在主目录才有相关元素信息，不回到主目录，切换语句会报错

方法：driver.switch_to.default_content()

4.4 代码

        # 2. 打开url
        driver.get(r'file:///F:/project/pythonProject/login.html')
        # 通过xpath定位元素
        username = driver.find_element(By.ID, "user")
        username.send_keys('admin')

        driver.switch_to.frame("frame1")

        username1 = driver.find_element(By.ID, 'user1')
        username1.send_keys('admin1')

        # 切换到主页面 driver.switch_to.default_content()
        driver.switch_to.default_content()
        driver.switch_to.frame("frame2")
        username1 = driver.find_element(By.ID, 'user2')
        username1.send_keys('user2')

五、多窗口切换

5.1 多窗口

说明：在HTML页面中，当点击超链接或者按钮时，有的会在新的窗口打开页面

<body>
  <div>
	账户<input type="text" id="user"></input>
  </div>
  <div>
    <!--target="_blank"指定在哪新窗口中打开页面 -->
	<a href="https://www.baidu.com" target="_blank">百度</a>
  </div>
  <iframe src="frame_a.html" frameborder="1" height="500"  width="48%" name="frame1"></iframe>
  <iframe src="frame_b.html" frameborder="1" height="500"  width="48%" name="frame2"></iframe>
</body>

5.2 实现多窗口切换的方法

说明：在Selenium中封装了获取当前窗口句柄，获取所有窗口句柄和切换到指定句柄窗口的方法

句柄：英文handle，窗口的唯一识别码

方法：

1）driver.current_window_handle -->获取当前窗口句柄

2) driver.window_handles -->获取所有窗口句柄

3）driver.switch_to.window(handle) -->切换指定窗口句柄

5.3 代码

        driver.get(r'file:///F:/project/pythonProject/login.html')
        cur_handle = driver.current_window_handle
        driver.find_element(By.PARTIAL_LINK_TEXT, '百度').click()
        handles = driver.window_handles
        print(handles)
        for h in handles:
            if h != cur_handle:
                # 切换
                driver.switch_to.window(h)
                driver.find_element(By.ID, 'kw').send_keys('黑马')