企业官网建设流程全解析

1. 项目概述：为什么UI自动化测试必须关注异常截图和page_source？

做UI自动化测试的朋友，肯定都经历过这种场景：半夜收到CI/CD流水线发来的邮件，标题赫然写着“测试用例执行失败”。你点开一看，报告里只有一行冰冷的“ElementNotVisibleException”或者“NoSuchElementException”。然后呢？然后就没有然后了。你对着这行错误信息，脑子里一片空白：当时页面上到底是个什么鬼样子？元素是真的没加载出来，还是定位方式写错了？页面结构是不是变了？你只能凭记忆和猜测，手动去复现，效率低得让人抓狂。

这就是我们今天要聊的核心：异常截图和page_source的捕获与保存。这绝不仅仅是“在出错时截个图”那么简单，它是UI自动化测试从“玩具”走向“工程化”的关键一步，是测试脚本具备“自述能力”和“现场还原能力”的标志。一个只会报错，不会留下任何现场证据的自动化脚本，就像一个只会喊“出事了”却说不清在哪、发生了什么的路人，价值大打折扣。

我干了十多年测试，带过不少团队，发现很多新手甚至一些有经验的工程师，都把精力花在了怎么写更复杂的定位、怎么设计更炫酷的数据驱动上，却忽略了最基础、也最关键的“异常现场保全”。等到真出了问题，排查成本高得吓人。所以，这篇文章我就结合自己踩过的无数坑，把异常截图和page_source这件事，从为什么做、怎么做、到怎么做得更好，给你掰开揉碎了讲清楚。这不仅是面试常问的“UI自动化测试面试题”，更是你日常工作中提升效率、降低维护成本的实打实技能。

2. 核心价值解析：截图与源码，不只是“留个证据”

2.1 异常截图：可视化的问题快照

截图的价值，在于它提供了最直观、最无歧义的问题现场。文字描述再详细，也不如一张图来得直接。

• 定位失败分析：元素找不到，是页面根本没加载？还是元素被遮挡、样式隐藏（display: none或visibility: hidden）？截图一看便知。有时候你会发现，页面其实弹出了一个你没预料到的模态框（Modal），把后面的按钮盖住了。
• 样式/渲染问题：自动化测试通常只关注功能逻辑，但有时样式错误（如CSS加载失败导致布局错乱）也会引发功能性问题。比如一个按钮因为z-index问题被压在其他元素下面无法点击，截图能帮你快速识别这不是逻辑bug，而是前端bug。
• 动态内容验证：对于一些动态生成的内容，比如图表、验证码（虽然自动化通常绕过）、或特定状态下的UI，截图可以作为辅助验证手段。虽然不建议用像素对比做精确断言（维护成本高），但人工复查截图能快速发现明显异常。

实操心得：别只截全屏。对于某些特定区域的问题，可以结合Selenium的get_screenshot_as_png()配合元素的location和size属性，实现局部截图，这样图片更小，重点更突出。

2.2 Page Source：结构化的现场“尸检报告”

如果说截图是“照片”，那么driver.page_source获取到的页面源码就是现场的“DNA”和“指纹”。它的价值更为深层：

• 精准定位分析：当你的find_element(By.XPATH, “//button[@id=‘submit’]”)失败时，立刻保存当时的page_source。你可以打开这个HTML文件，直接搜索id=“submit”的button。你会发现，可能ID被开发改了，或者这个button根本不在你预期的DOM位置，而是被包在了某个动态生成的iframe里。
• 排查数据问题：页面显示异常，可能是后端返回的数据不对。查看保存的源码，可以看到绑定在DOM元素上的原始数据（尤其是Vue/React等框架生成的>import os import time import logging from selenium.webdriver.remote.webdriver import WebDriver class BasePage: def __init__(self, driver: WebDriver): self.driver = driver self.logger = logging.getLogger(__name__) def _get_screenshot(self) -> str: """ 截取当前浏览器窗口全屏。 返回: 截图文件的绝对路径 """ # 1. 生成唯一文件名，避免覆盖。时间戳是最简单有效的方式。 timestamp = time.strftime("%Y%m%d_%H%M%S") screenshot_dir = os.path.join(os.getcwd(), "test_output", "screenshots") # 确保目录存在 os.makedirs(screenshot_dir, exist_ok=True) filename = f"exception_{timestamp}.png" filepath = os.path.join(screenshot_dir, filename) # 2. 执行截图 try: self.driver.save_screenshot(filepath) self.logger.info(f"截图已保存至: {filepath}") except Exception as e: self.logger.error(f"截图失败: {e}") filepath = "" # 返回空路径表示失败 return filepath def _save_page_source(self) -> str: """ 保存当前页面的HTML源码。 返回: 源码文件的绝对路径 """ timestamp = time.strftime("%Y%m%d_%H%M%S") source_dir = os.path.join(os.getcwd(), "test_output", "page_sources") os.makedirs(source_dir, exist_ok=True) filename = f"source_{timestamp}.html" filepath = os.path.join(source_dir, filename) try: page_source = self.driver.page_source # 注意编码，确保中文等字符正确保存 with open(filepath, 'w', encoding='utf-8') as f: f.write(page_source) self.logger.info(f"页面源码已保存至: {filepath}") except Exception as e: self.logger.error(f"保存页面源码失败: {e}") filepath = "" return filepath

  为什么这么设计？

  1. 私有方法（_开头）：这两个方法是内部工具，不应该被页面对象直接调用，仅供异常处理逻辑使用。
  2. 返回文件路径：返回路径是为了方便后续处理，比如附加到测试报告。
  3. 目录分离：将截图和源码放在test_output下不同的子目录，结构清晰，便于归档和清理。
  4. 异常处理：即使保存失败，也不应导致主流程崩溃，记录错误日志后继续。

  3.2 异常捕获与自动触发：装饰器与Hook的妙用

  最理想的状态是，测试用例中任何未被捕获的异常，都能自动触发现场保全。我们有几种实现模式：

  模式一：在基类关键操作中嵌入（推荐给初学者）在BasePage的find_element、click、send_keys等方法里加入try...except。

  class BasePage: # ... 其他代码 ... def find_element(self, by, value, timeout=10): """查找元素，失败时自动截图并保存源码""" info_msg = f"定位元素: {by} = '{value}'" self.logger.info(info_msg) try: # 这里可以加入显式等待，提高健壮性 from selenium.webdriver.support.ui import WebDriverWait from selenium.webdriver.support import expected_conditions as EC element = WebDriverWait(self.driver, timeout).until( EC.presence_of_element_located((by, value)) ) return element except Exception as e: self.logger.error(f"元素定位失败: {info_msg}. 错误: {e}") # 触发现场保全 screenshot_path = self._get_screenshot() source_path = self._save_page_source() # 可以选择将路径记录到某个全局上下文或抛出包含路径的自定义异常 raise ElementNotFoundException( f"定位失败: {info_msg}. 截图: {screenshot_path}, 源码: {source_path}" ) from e

  模式二：使用Pytest的钩子函数（Hook）（更解耦，推荐）这是更工程化的做法。利用Pytest的pytest_runtest_makereport钩子，在测试用例执行失败时，拿到当前的driver对象进行操作。

  1. 创建一个conftest.py文件（Pytest会自动发现）:

  # conftest.py import pytest from selenium.webdriver.remote.webdriver import WebDriver import allure @pytest.hookimpl(tryfirst=True, hookwrapper=True) def pytest_runtest_makereport(item, call): """ 获取测试用例的执行结果，并在失败时进行处理。 """ outcome = yield report = outcome.get_result() # 只关注用例调用阶段（setup, call, teardown）中的失败，尤其是call（测试执行本身） if report.when == "call" and report.failed: # 尝试从测试用例的fixture中获取driver对象 for name, fixture_value in item.funcargs.items(): if isinstance(fixture_value, WebDriver): driver = fixture_value _capture_evidence_on_failure(driver, item.name) break def _capture_evidence_on_failure(driver: WebDriver, test_name: str): """执行截图和保存源码，并附加到Allure报告""" try: # 截图 screenshot_path = f"./test_output/screenshots/{test_name}_failure.png" driver.save_screenshot(screenshot_path) # 保存源码 source_path = f"./test_output/page_sources/{test_name}_failure.html" with open(source_path, 'w', encoding='utf-8') as f: f.write(driver.page_source) # 附加到Allure报告（如果使用Allure） allure.attach.file(screenshot_path, name=f"{test_name}_失败截图", attachment_type=allure.attachment_type.PNG) allure.attach.file(source_path, name=f"{test_name}_失败页面源码", attachment_type=allure.attachment_type.HTML) print(f"测试失败证据已保存: {screenshot_path}, {source_path}") except Exception as e: print(f"保存失败证据时发生错误: {e}")

  模式三：自定义装饰器（灵活控制）如果你希望对哪些方法进行现场保全有更精细的控制，可以定义一个装饰器。

  def capture_on_failure(func): """装饰器：当被装饰的方法抛出异常时，自动截图并保存源码""" def wrapper(self, *args, **kwargs): try: return func(self, *args, **kwargs) except Exception as e: # 假设self是BasePage或其子类，且有driver属性 if hasattr(self, 'driver'): self._get_screenshot() self._save_page_source() self.logger.exception(f"方法 {func.__name__} 执行失败，已保存现场。参数: {args}, {kwargs}") raise # 重新抛出异常，不干扰原有错误传播 return wrapper # 在页面对象方法上使用 class LoginPage(BasePage): @capture_on_failure def login(self, username, password): self.find_element(By.ID, "username").send_keys(username) self.find_element(By.ID, "password").send_keys(password) # 假设这里可能失败 self.find_element(By.XPATH, "//button[@type='submit']").click()

  注意事项：模式二（Pytest Hook）是最推荐的方式，因为它与测试框架深度集成，对测试代码无侵入性，所有用例自动生效。模式一适合快速改造旧框架。模式三适合需要对特定复杂操作进行监控的场景。

  4. 高级优化与集成：让证据链更完整

  基础功能有了，接下来我们让它变得更强大、更好用。

  4.1 与日志系统整合

  保存了文件，还得在日志里留下记录，形成可追溯的证据链。我们改造一下_get_screenshot和_save_page_source方法，或者在使用它们的上层方法中，将文件路径记录到日志。

  # 在BasePage的异常处理方法或Pytest Hook中 logger.error(f"测试用例执行失败！异常信息: {str(e)}") logger.error(f"异常现场截图已保存: {screenshot_path}") logger.error(f"异常现场页面源码已保存: {source_path}") # 甚至可以记录当前URL，方便直接打开 logger.error(f"失败时浏览器URL: {driver.current_url}")

  配置日志时，使用RotatingFileHandler防止日志文件无限增大。

  4.2 与Allure等测试报告工具集成

  这是提升报告可读性的杀手锏。Allure报告支持附加各种类型的文件。集成后，测试人员查看报告时，可以直接在失败用例的详情里看到截图和HTML源码，无需再去文件系统里翻找。

  集成方式正如我们在Pytest Hook示例中所示，使用allure.attach.file。

  import allure # ... 在捕获到异常并保存文件后 ... allure.attach.file(screenshot_path, name="失败截图", attachment_type=allure.attachment_type.PNG) # 对于HTML源码，使用TEXT或HTML类型。HTML类型在报告中可以直接渲染查看，更直观。 allure.attach.file(source_path, name="失败时页面源码", attachment_type=allure.attachment_type.HTML)

  更佳实践：在报告中为截图和源码分配合适的命名，比如包含用例名和时间戳，避免混淆。

  4.3 文件管理与清理策略

  自动化每天跑，截图和HTML文件会堆积如山。必须有一套管理策略。

  1. 按构建/执行批次归档：在test_output目录下，创建以时间戳或构建ID（如Jenkins的BUILD_ID）命名的子文件夹。每次执行的结果都放在独立的文件夹里。

     import os from datetime import datetime build_id = os.getenv('BUILD_ID', datetime.now().strftime('%Y%m%d_%H%M%S')) output_root = os.path.join(os.getcwd(), "test_output", build_id) screenshot_dir = os.path.join(output_root, "screenshots")

  2. 设置保留策略：在CI/CD的流水线中，添加后置清理步骤。例如，只保留最近10次的运行结果。可以用简单的Shell脚本或Python脚本实现。

     # 示例Shell脚本，保留最近10个构建文件夹 cd test_output ls -t | tail -n +11 | xargs rm -rf

  3. 失败文件优先保留：可以设计逻辑，只永久保存失败用例的证据，成功的用例证据在几次构建后自动清理。

  4.4 PageSource的增强分析

  保存下来的HTML是静态的，我们可以进一步分析它，提取更有价值的信息。

  • 提取关键数据：用BeautifulSoup或lxml解析保存的HTML，自动提取错误信息、关键数据用于断言或记录。

    from bs4 import BeautifulSoup def analyze_saved_source(filepath): with open(filepath, 'r', encoding='utf-8') as f: soup = BeautifulSoup(f.read(), 'html.parser') # 例如，查找所有错误提示的div error_divs = soup.find_all('div', class_='error-message') return [div.get_text(strip=True) for div in error_divs]

  • DOM结构对比：对于某些核心页面，可以保存一份“黄金副本”（Golden Source）的HTML结构。测试失败时，将当前的page_source与黄金副本进行简单的DOM标签结构对比（忽略文本和动态ID），快速定位结构发生了哪些意外变化。

  5. 常见问题排查与实战技巧实录

  理论讲完了，来看看实战中你会遇到哪些坑，以及我的解决办法。

  5.1 问题一：截图是空白或者不全

  • 现象：保存的截图是全黑的、纯白的，或者只截到了浏览器窗口的一部分。
  • 原因与排查：
    1. 页面未加载完/处于后台标签页：Selenium的截图是同步操作，但如果页面还在加载动画或者测试跑到了另一个标签页，当前页面的渲染可能不完整。确保截图前页面状态稳定。
    2. 窗口大小问题：如果浏览器窗口没有最大化，或者设置了特定尺寸，截图可能只截取当前视口。对于长页面（需要滚动），save_screenshot默认只截取可视区域。
  • 解决方案：

    # 方案1：截图前确保窗口最大化（但可能影响某些响应式布局测试） driver.maximize_window() time.sleep(0.5) # 给窗口调整一点时间 driver.save_screenshot(path) # 方案2：截取整个页面的长图（需要JavaScript执行） # 适用于Selenium 4及以上 original_size = driver.get_window_size() total_height = driver.execute_script("return document.body.scrollHeight") driver.set_window_size(original_size['width'], total_height) # 临时调整窗口高度 driver.save_screenshot(path) driver.set_window_size(original_size['width'], original_size['height']) # 恢复原状 # 方案3：使用第三方库，如`selenium-screenshot`，它提供了更健壮的全页截图功能。

  5.2 问题二：PageSource不是“所见”的页面

  • 现象：保存的HTML源码里，找不到你在浏览器开发者工具里看到的元素。
  • 原因与排查：
    1. iframe/Shadow DOM：你的目标元素可能嵌套在<iframe>里。driver.page_source获取的是顶层文档的源码。你需要先driver.switch_to.frame(...)切换到对应的iframe，再获取其page_source。
    2. 动态渲染：对于Vue、React等框架，初始HTML可能只是一个壳，内容由JavaScript动态生成。page_source获取的是初始HTML。你需要确保在页面完全渲染、数据加载完成后（通过等待特定元素出现）再获取源码。
    3. 浏览器开发者工具显示的是处理后的DOM：开发者工具中的“Elements”面板显示的是当前实时的、经过JavaScript修改后的DOM树。而driver.page_source获取的更多是初始的响应内容，尽管Selenium会等待基本加载完成，但对于复杂的SPA，可能仍需显式等待。
  • 解决方案：

    # 针对iframe driver.switch_to.frame("frame_name_or_id") iframe_source = driver.page_source driver.switch_to.default_content() # 切回来很重要！ # 针对动态渲染，加强等待 from selenium.webdriver.support.ui import WebDriverWait from selenium.webdriver.support import expected_conditions as EC # 等待某个代表页面加载完成的关键元素出现 WebDriverWait(driver, 10).until( EC.presence_of_element_located((By.ID, "dynamic-content-loaded")) ) source = driver.page_source

  5.3 问题三：异常处理导致原始错误信息被掩盖

  • 现象：捕获异常后，抛出的自定义异常只说了“定位失败，已截图”，但原始的NoSuchElementException的详细堆栈信息丢了，不利于定位代码行。
  • 解决方案：使用raise ... from ...语法或在自定义异常中保存原始异常。

    try: element = driver.find_element(...) except NoSuchElementException as original_exc: self._capture_evidence() # 方法一：使用 from 关键字，保留原始异常链 raise MyCustomException("元素未找到，已保存现场") from original_exc # 方法二：在自定义异常中存储原始异常 # raise MyCustomException("元素未找到", original_exc=original_exc)

    这样，在最终的日志或报告中，你既能看到友好的提示，也能追溯到最根本的错误堆栈。

  5.4 问题四：大量截图和源码文件占用磁盘空间

  • 解决方案：如前所述，实施归档和清理策略。在CI/CD中，可以将成功的用例证据定期清理，只长期保留失败的证据。也可以考虑将证据文件上传到云存储（如S3、OSS）或文件服务器，并提供链接记录在测试报告中，本地不留存。

  5.5 一个完整的实战配置示例

  最后，给出一份我项目中常用的conftest.py配置片段，它结合了Pytest、Allure和异常捕获：

  # conftest.py import pytest import allure from selenium import webdriver from selenium.webdriver.remote.webdriver import WebDriver import os import datetime @pytest.fixture(scope="function") def driver(): """为每个测试用例提供一个独立的driver实例""" options = webdriver.ChromeOptions() options.add_argument("--headless") # 无头模式，适合CI环境 options.add_argument("--window-size=1920,1080") driver = webdriver.Chrome(options=options) driver.implicitly_wait(10) yield driver driver.quit() @pytest.hookimpl(hookwrapper=True) def pytest_runtest_makereport(item, call): pytest_html = item.config.pluginmanager.getplugin('html') outcome = yield report = outcome.get_result() extra = getattr(report, 'extra', []) if report.when == 'call': xfail = hasattr(report, 'wasxfail') if (report.skipped and xfail) or (report.failed and not xfail): # 只在用例失败（且不是预期失败）时执行 driver_fixture = _get_driver_from_item(item) if driver_fixture: # 创建本次测试专用的证据目录 test_name = item.name.replace("[", "_").replace("]", "_").replace("/", "_") timestamp = datetime.datetime.now().strftime("%H%M%S") evidence_dir = os.path.join("test_evidence", f"{test_name}_{timestamp}") os.makedirs(evidence_dir, exist_ok=True) screenshot_path = os.path.join(evidence_dir, "failure.png") driver_fixture.save_screenshot(screenshot_path) allure.attach.file(screenshot_path, name="失败截图", attachment_type=allure.attachment_type.PNG) source_path = os.path.join(evidence_dir, "page_source.html") with open(source_path, 'w', encoding='utf-8') as f: f.write(driver_fixture.page_source) allure.attach.file(source_path, name="失败时页面源码", attachment_type=allure.attachment_type.HTML) # 也记录当前URL url = driver_fixture.current_url allure.attach.text(url, name="失败时URL") def _get_driver_from_item(item): """尝试从测试用例的fixture中获取driver对象""" for name, fixture_value in item.funcargs.items(): if isinstance(fixture_value, WebDriver): return fixture_value return None

  这套组合拳下来，你的UI自动化测试就具备了强大的“事后调查”能力。当CI红灯亮起时，你不再焦虑，而是从容地打开Allure报告，查看附带的截图和页面源码，像侦探一样快速定位问题根源。这不仅仅是技术的提升，更是测试思维从“验证”到“洞察”的转变。