UI自动化-(web端窗口截图&文件上传-实操入门)

1、窗口截图

1. UI自动化中，为什么需要进行窗口截图？

1. 调试和故障排除：截图可以直观地查看界面的状态，快速识别和解决问题。当自动化过程中出现错误或异常时，通过查看截图可以确定是否是界面元素的问题，例如元素未找到、位置不正确等。
2. 记录测试结果：截图可以作为测试结果的一部分，用于记录特定时间点界面的样子。这对于测试报告和文档非常有用，可以提供可视化的证据，证明测试过程中界面的显示是否正确。
3. 验证界面布局和样式：在某些情况下，自动化测试需要验证界面的布局、样式或特定元素的显示是否符合预期。通过截图，可以比较实际显示与预期的样子，确保界面的正确性和一致性。
4. 与其他人沟通和协作：截图可以方便地与团队成员、产品经理或其他相关人员共享和交流。通过展示截图，可以更好地理解问题或测试结果，促进协作和问题的解决。
5. 自动化文档生成：有些自动化框架或工具可以自动将截图与测试用例或报告相关联，生成更详细和直观的文档。这有助于维护和更新测试资产，并提供给其他人参考。

2. 应用举例

• 当程序运行出错时，通过截图文件能够更直观的知道具体是哪个操作步骤出错 。
  截图方法：  driver.get_screenshot_as_file(filename)

• • 截图的文件名必须是以png结尾
  • filename中的文件目录需要手动创建

• 示例方法

• • 定义截图保存的路径 screenshot_path。
  • 启动 WebDriver 并打开要操作的网页。
  • 在 try/except 代码块中，编写可能会引发错误的操作代码。
  • 如果在执行操作过程中发生错误，将记录错误信息，并使用 driver.get_screenshot_as_file 方法截图并保存到指定路径。截图的文件名根据当前时间生成，并以 .png 结尾。

代码示例：

from selenium import webdriver
import time

# 定义截图保存的路径
screenshot_path = "yourScreenshotDirectory/"

# 启动 WebDriver
driver = webdriver.Chrome()

# 打开要操作的网页
driver.get("https://example.com")

# 执行操作步骤...

try:
    # 编写业务代码
    print("业务代码")
    # 编写可能会引发错误的操作
    print("可能会引发错误的操作")
except Exception as e:
    # 记录错误信息
    print(f"发生错误：{e}")
    # 截图并保存到指定位置
    screenshot_filename = f"error_{time.strftime('%Y%m%d_%H%M%S')}.png"
    driver.get_screenshot_as_file(screenshot_path + screenshot_filename)

    # 关闭 WebDriver
    driver.quit()

在上述代码示例中，首先定义了截图保存的路径 screenshot_path。然后，启动 WebDriver 并打开要操作的网页。在 try/except 代码块中，编写可能会引发错误的操作代码。

如果在执行操作过程中发生错误，将记录错误信息，并使用 driver.get_screenshot_as_file 方法截图并保存到指定路径。截图的文件名根据当前时间生成，并以 .png 结尾。

2、文件上传

1. 在 UI 自动化中进行文件上传的场景：

1. 功能测试：许多 Web 应用程序都提供了文件上传的功能，例如上传图片、文档、音频或视频等。通过自动化文件上传，可以确保该功能正常工作，包括文件的选择、上传过程和上传后的处理。
2. 数据验证：上传的文件可能需要满足一定的格式、大小或其他限制条件。自动化上传可以帮助验证这些限制，确保上传的文件符合预期的要求。
3. 回归测试：在应用程序的开发过程中，文件上传功能可能会受到修改或更新。通过自动化测试，可以在每次迭代中快速验证文件上传是否仍然正常工作，以确保没有引入新的问题。
4. 提高测试效率：手动执行文件上传操作可能会很耗时，尤其是在需要上传大量文件或在多个不同的环境中进行测试时。自动化上传可以大大提高测试的效率和重复性。
5. 集成测试：如果文件上传是与其他功能或系统集成的一部分，自动化上传可以确保整个集成过程的顺畅性和正确性。

2. 应用举例

在 Web 端实现 UI 自动化的文件上传：

1. 选择自动化工具：选择适合的自动化测试工具，例如 Selenium。
2. 定位上传元素：使用选择器（如 XPath、CSS 选择器或 ID）找到文件上传的输入元素。
3. 设置文件上传路径：将需要上传的文件路径传递给自动化工具。
4. 执行上传操作：使用自动化工具提供的方法来模拟文件上传的操作。

示例：

• 启动 WebDriver 并打开上传页面。
• 通过 class属性 定位到文件上传的元素，并将文件路径设置为要上传的文件。
• 使用 send_keys 方法模拟文件上传的操作。

代码示例：

# 导包
import time
from selenium import webdriver

# 实例化浏览器驱动
driver = webdriver.Chrome()
driver.maximize_window()

# 打开baidu网站
driver.get("https://www.baidu.com")

# 定位到百度输入框中的"按图片搜索"按钮
time.sleep(3)
element = driver.find_element_by_css_selector(".soutu-btn")

# 点击"按图片搜索"按钮，进入图片上传页面
element.click()

# 定位到"选择文件"元素位置
upload_element = driver.find_element_by_css_selector(".upload-pic")

# 设置文件上传路径
file_path = "/Users/example/Desktop/image.jpg"  # 替换为实际的文件路径

# 执行文件上传
upload_element.send_keys(file_path)

# 等待3S
time.sleep(3)

# 退出浏览器驱动
driver.quit()

在上述代码示例中，首先打开浏览器并访问上传页面。然后，通过CSS 定位到文件上传输入框，并使用 send_keys() 方法将文件路径传递给输入框，触发了上传文件操作。