iframe截图_web前端开发代码大全[通俗易懂]

一、frame

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

形式：

1、frameset形式

<frameset cols="25%,75%">
    <frame src="frame_a.htm">
    <frame src="frame_b.htm">
</frameset>

2、iframe标签形式

<iframe name="iframe_a" src="demo_iframe.htm" width="200" height="200"></iframe>

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

作用：在⻚⾯中加载另⼀个⻚⾯

为什么处理iframe(frane)？

焦点默认在启动⻚⾯，如果不出处理iframe，⽆法操作iframe嵌⼊的⻚⾯元素。

方法：

1). driver.switch_to.frame(frame_reference) –> 切换到指定frame的方法

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

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

步骤：

1、切换到iframe driver.switch_to.frame(iframe元素)

2、操作元素

3、回到默认⻚⾯ driver.switch_to.default_content()

案例步骤：

1. 完成主页面注册信息；

2. 调用frame切换方法(switch_to.frame(“myframe1”))切换到注册用户A框架中

3. 调用恢复默认页面方法(switch_to.default_content())

4. 调用frame切换方法(switch_to.frame(“myframe2”))切换到注册用户B框架中

"""
    需求：打开‘注册实例.html’页面，完成以下操作
    1). 点击‘注册A页面’链接
    2). 在打开的页面中，填写注册页面A的注册信息(frame标签)
    3). 填写注册页面B中的注册信息
"""

# 获取注册A iframe元素
A = driver.find_element(By.CSS_SELECTOR, "#idframe1")
# 1、切换到A
driver.switch_to.frame(A)
# 2、注册A操作
driver.find_element(By.CSS_SELECTOR,"#userA").send_keys("admin")

# 3、回到默认目录 注册时例.html
driver.switch_to.default_content()

# 4、获取注册B iframe元素
B = driver.find_element(By.CSS_SELECTOR, "#idframe2")
# 5、切换到B
driver.switch_to.frame(B)

# 6、注册B操作
driver.find_element(By.CSS_SELECTOR,"#userB").send_keys("admin")

二、多窗口

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

说明：在Selenium中封装了获取当前窗口句柄、获取所有窗口句柄和切换到指定句柄窗口的方法； 句柄：英文handle，窗口的唯一识别码/标识符

为什么要切换？

selenium默认启动时，所有的焦点在启动窗⼝，那么意味着⽆法操作其他窗⼝的标签

方法：

1). 获取当前窗口句柄    driver.current_window_handle 

2）获取所有窗⼝句柄 driver.window_handles                      handle =  driver.window_handles

2、切换指定句柄窗⼝ driver.switch_to.widnow(handle)  通过下标，默认页面handle[0]

"""
    为什么要处理多窗口？-- selenium默认焦点在启动窗口，要操作其他窗口必须处理。
    需求：
        1、打开注册示例页面
        2、点击注册A网页链接
        3、填写注册A网页内容
"""
print("操作之前所有窗口的句柄：", driver.window_handles)

driver.find_element(By.LINK_TEXT, "注册A网页").click()
handles = driver.window_handles
print("操作之后所有窗口的句柄：", handles)

# 重点：切换窗口
driver.switch_to.window(handles[1])

# 填写注册A网页 用户名
driver.find_element(By.CSS_SELECTOR, "#userA").send_keys("admin")

切换封装多窗口工具

"""
   需求：
        如何随心所欲切换窗口？
    思路：
        1、获取所有窗口句柄
        2、切换窗口
        3、获取当前所在窗口title
        4、判断title是否为需要的窗口
        5、执行代码
    需求：
        1、打开注册示例页面
        2、点击 注册A网页 注册B网页
        3、在注册A网页 和 注册B网页中分别对用户名进行输入 admin 
"""

# 多窗口封装工具函数
def switch_window(title):
    # 1、获取所有窗口句柄
    handels = driver.window_handles
    # 2、遍历句柄进行切换
    for handel in handels:
        # 操作
        driver.switch_to.window(handel)
        # 获取当前窗口title 并且 判断是否自己需要的窗口
        if driver.title == title:
            # 操作代码
            return "已找到{}窗口，并且已切换成功".format(title)



title_A = "注册A"
title_B = "注册B"

# 打开注册A和注册B网页
driver.find_element(By.LINK_TEXT, "注册A网页").click()
driver.find_element(By.LINK_TEXT, "注册B网页").click()


# 填写注册A网页 用户名
print(switch_window(title_A))
driver.find_element(By.CSS_SELECTOR, "#userA").send_keys("admin")

# 填写注册B网页 用户名
print(switch_window(title_B))
driver.find_element(By.CSS_SELECTOR, "#userB").send_keys("admin")

面试题：执行UI自动化时定位不到元素怎么办？ / 找不到元素该分析哪些原因？

1、元素定位代码是否正确   

2、是否匹配到唯一元素

3、是否有做元素等待    特别是移动端中需要强制等待  sleep()

4、是否需要鼠标悬浮

5、元素是否在新窗口

6、元素是否存在于iframe标签中

三、截图 – 保存到指定位置并添加时间戳

为什么需要截图?错误到底在哪里

UI自动测试统一运行时无人值守

错误信息记录不是十分明确

有截图结合错误信息方便快速分析错误

自动化脚本是由程序去执行的，因此有时候打印的错误信息并不是十分明确。如果在执行出错的时候 对当前窗口截图保存，那么通过图片就可以非常直观地看到出错的原因。

方法：driver.get_screenshot_as_file(imgpath)

imgpath：图片保存路径   

注意：当保存到指定目录时，要新建目录

说明：把当前操作的页面，截图保存到指定位置

"""
    需求：打开‘注册A.html’页面，完成以下操作
    1). 填写注册信息
    2). 截图保存
"""

driver.find_element(By.CSS_SELECTOR,"#userA").send_keys("admin")
driver.find_element(By.CSS_SELECTOR,"#passwordA").send_keys("123456")
driver.find_element(By.CSS_SELECTOR,"#telA").send_keys("13600001111")
driver.find_element(By.CSS_SELECTOR,"#emailA").send_keys("123@qq.com")
# 截图
driver.get_screenshot_as_file("register.png")
driver.get_screenshot_as_file("./img/error_{}.png".format(time.strftime("%Y_%m_%d %H_%M_%S")))

四、验证码

验证码说明：一种随机生成的信息（数字、字母、汉字、图片、算术题）等为了防止恶意的请求行为，增加应用的 安全性。

为什么学习验证码？

在Web应用中，大部分系统在用户登录注册的时候都要求输入验证码，而我们在设计自动化测试脚本的时候， 就需要面临处理验证码的问题。

要进行后续业务操就必须登录，那自动化该如何处理这些验证码操作？

验证码的处理方式

说明：Selenium中并没有对验证码处理的方法，针对验证码的几种常用处理方式 方式：

1). 去掉验证码 (测试环境下-采用)

2). 设置万能验证码 (生产环境和测试环境下-采用)

3). 验证码识别技术 (通过Python-tesseract来识别图片类型验证码；识别率很难达到100%)

4). 记录cookie (通过记录cookie进行跳过登录)

1. 去掉验证码、设置万能验证码：都是开发来完成

2. 验证码识别技术：成功率不高，验证码种类繁多，不太适合

3. 记录cookie：比较实用

cookie原理

说明： 由服务器⽣成，存储在客户端的登录凭证

1. Cookie是由Web服务器生成的，并且保存在用户浏览器上的小文本文件，它可以包含用户相关的信息。

2. Cookie数据格式：键值对组成（python中的字典）

3. Cookie产生：客户端请求服务器，如果服务器需要记录该用户状态，就向客户端浏览器颁发一个Cookie 数据

4. Cookie使用：当浏览器再次请求该网站时，浏览器把请求的数据和Cookie数据一同提交给服务器，服务器检查该Cookie，以此来辨认用户状态。

cookie的应用场景

1. 实现会话跟踪，记录用户登录状态

2. 实现记住密码和自动登录的功能

3. 用户未登录的状态下，记录购物车中的商品

cookie跳过登录 步骤：

1、手工登录

2、获取cookie

3、脚本添加cookie

4、刷新页面

cookie操作方法：

driver.get_cookie(name) –> 获取指定cookie

 driver.get_cookies() –> 获取本网站所有本地cookies

 driver.add_cookie(cookie_dict) –> 添加cookie 

cookie_dict：一个字典对象，必选的键包括：”name” and “value”

案例：使用cookie实现跳过登录  

"""
    需求：使用cookie实现跳过登录
    1). 手动登录百度，获取cookie 
    2). 使用获取到的cookie，达到登录目的，然后就可以执行登录之后的操作
    BDUSS是登录百度后的唯一身份凭证(*.baidu.com)，拿到BDUSS就等于拿到帐号的控制权， 通行贴吧、知道、百科、文库、空间、百度云等百度主要产品。
"""

driver.maximize_window()
# 添加cookie
data = {"name": "BDUSS", "value": "在百度账号登录状态下查看请求，找到cookie记录下BDUSS字段的值"}
driver.add_cookie(data)
driver.get_cookies()
# 暂停3秒
sleep(3)
# 刷新
driver.refresh()

扩展：利用jmeter实现跳过登录

今天的文章iframe截图_web前端开发代码大全[通俗易懂]分享到此就结束了，感谢您的阅读。