约 10 分钟7 张卡

Web UI 自动化测试

Web UI 自动化测试驱动浏览器执行用户操作，并核对页面可见行为及其关联结果。输入标题后点击保存，按钮能被点击只是过程；正确标题是否显示、错误是否提示、页面是否进入预期状态，才是需要验证的行为。

浏览器页面会异步更新，定位和操作又依赖 DOM 与交互条件。稳定的自动化因此需要可靠定位、明确等待目标、独立会话和可追溯证据，不能靠给每一步增加固定睡眠来解决所有失败。

1. 面试核心

先记住这几条，再读正文

UI 自动化应围绕明确的用户流程和可见结果组织，输入、操作和断言缺一不可。接口层和组件层的规则检查可以承担更细的覆盖。卡 · 流程与定位
定位要表达稳定语义并限制作用范围，CSS 或 XPath 的语法选择本身不能保证健壮性。长结构路径、动态类名和模糊文本都可能失效。卡 · 流程与定位
元素找不到时先核对页面、会话、frame、定位与加载状态，不要把所有失败都归因于等待不够。卡 · 失败定位与维护
自动等待操作条件与等待业务结果是两件事。按钮可点击，不代表点击后的保存已经完成。卡 · 操作等待与结果等待
浏览器上下文隔离 Cookie 等浏览器状态，不能隔离服务端共享账号、订单和配额。卡 · 浏览器上下文与数据
不稳定失败需要追踪时序、网络、页面和数据证据，重试后通过仍应保留首次失败，无限重试不能证明可靠。卡 · 失败定位与维护
替换网络响应可以稳定验证页面分支，但不能同时声称真实服务集成已经通过。卡 · 网络替身与覆盖边界

2. 流程与定位

卡 · 怎样组织一条能重复执行的 Web UI 自动化流程？卡 · CSS 与 XPath 定位有什么区别，怎样提高定位稳定性？

先选择需要浏览器证据的流程，例如用户能否填写、提交并看见保存结果。大量参数校验可以放在接口测试，组件内部的事件和状态则由前端组件测试验证，浏览器自动化保留关键用户路径。

定位器描述怎样在当前页面找到目标元素。Playwright 的定位器在操作时重新解析目标，适合处理页面重新渲染后的元素；Selenium 保存的元素引用在 DOM 节点被替换后可能失效，需要按条件重新查找。

定位依据	适合表达	风险
角色与可访问名称	“保存”按钮、命名输入框	同名控件需缩小到对应区域
关联 label	用户实际识别的表单项	页面缺少正确标签关联时无法准确定位
稳定测试属性	没有清晰用户语义的组件	需要作为约定维护，不能随样式随机变化
CSS	属性和层级关系明确的节点	动态类名、`nth-child` 和长路径易受结构变化影响
XPath	明确的文档关系或文本条件	绝对路径和过宽匹配同样脆弱

例如页面里有多个“删除”按钮，应先定位目标文章所在行，再定位行内按钮。直接取第一个匹配元素虽然能消除多匹配错误，却可能删除错误对象。

可访问名称的来由见 HTML 语义与可访问性。采用角色定位也不能替代完整可访问性检查，它只是让这条测试依赖更接近用户识别方式的语义。

3. 操作等待与结果等待

卡 · 自动等待已经让按钮点击成功，为什么还要等待结果？

Playwright 对点击会等待目标满足相应操作条件，例如匹配唯一元素、可见、稳定、可接收事件且启用。条件在超时内无法满足时，操作失败，而不是无条件继续下一步。

操作完成后，页面可能还在等待网络、处理数据或重新渲染。因此需要对业务结果使用可重试断言，例如等待状态区域出现“已保存”，而不是点击成功就结束。

固定睡眠的问题是等待时间和实际条件脱节：服务快时浪费时间，服务慢时仍然过早检查。等待整个页面“网络空闲”也未必对应目标业务完成，长连接或后台请求可能持续存在。

Selenium 中可以用显式等待表达“某元素出现并可操作”等条件。隐式等待主要影响元素查找，不自动覆盖任意业务状态；混用隐式和显式等待可能让实际等待时间难以预测，应统一等待策略。

如果元素被遮挡，不应默认使用强制点击绕过检查。遮挡可能正是用户无法操作的产品问题；先确认期望交互，再决定是否需要调整定位或准备条件。

4. 可运行的异步页面示例

卡 · 怎样组织一条能重复执行的 Web UI 自动化流程？

下面的本地页面在点击后延迟更新状态，模拟异步 UI 更新。它没有后端保存操作，因此测试只验证表单交互和展示结果。

保存为 note-form.html：

<!doctype html>
<html lang="zh-CN">
<meta charset="utf-8">
<title>笔记示例</title>
<label for="title">标题</label>
<input id="title">
<button id="save">保存</button>
<p role="status" aria-live="polite"></p>
<script>
  const input = document.querySelector("#title");
  const save = document.querySelector("#save");
  const status = document.querySelector('[role="status"]');
  save.addEventListener("click", () => {
    const title = input.value.trim();
    save.disabled = true;
    setTimeout(() => {
      status.textContent = title ? `已保存：${title}` : "标题不能为空";
      save.disabled = false;
    }, 150);
  });
</script>
</html>

在安装了 Playwright 及其 Chromium 的 Python 环境中，将下面脚本保存到同一目录并运行。示例使用 Playwright 1.56 的同步 API：

from pathlib import Path
from playwright.sync_api import expect, sync_playwright

with sync_playwright() as playwright:
    browser = playwright.chromium.launch()
    context = browser.new_context()
    context.tracing.start(screenshots=True, snapshots=True, sources=True)
    try:
        page = context.new_page()
        page.goto(Path("note-form.html").resolve().as_uri())
        page.get_by_label("标题").fill("回归检查")
        page.get_by_role("button", name="保存", exact=True).click()
        expect(page.get_by_role("status")).to_have_text("已保存：回归检查")
        print("visible result verified")
    finally:
        context.tracing.stop(path="trace.zip")
        context.close()
        browser.close()

脚本应输出 visible result verified，并生成 trace.zip。expect(...).to_have_text(...) 等待实际状态文本符合期望，所以测试不需要猜测页面的 150 毫秒延迟再写一条固定睡眠。

可把页面实际输出临时改成其他文字，确认断言会失败；失败时仍生成 trace，便于查看操作与页面状态。不要同步修改期望来让错误输出通过，期望应来自已确认规则。

同一个页面还应有空标题等独立用例。框架化时，可以通过 pytest fixture管理浏览器和上下文，再为每条测试分别建立数据，避免沿用上一个测试留下的状态。

5. 浏览器上下文与数据

卡 · 不同浏览器上下文能否保证用例完全隔离？

浏览器上下文是相互隔离的浏览器会话环境。Playwright 可以在同一个浏览器进程中建立多个上下文，让它们拥有独立 Cookie 和存储状态。

下面的独立脚本只检查 Cookie 隔离，不访问外部站点：

from playwright.sync_api import sync_playwright

with sync_playwright() as playwright:
    browser = playwright.chromium.launch()
    first = browser.new_context()
    second = browser.new_context()
    try:
        first.add_cookies([
            {"name": "session", "value": "user-a", "url": "https://example.test/"}
        ])
        assert first.cookies("https://example.test/")[0]["value"] == "user-a"
        assert second.cookies("https://example.test/") == []
        print("cookies isolated")
    finally:
        first.close()
        second.close()
        browser.close()

输出 cookies isolated。如果两个上下文都登录同一个服务端账号，它们仍可能共同修改该账号余额或配额。浏览器隔离与测试数据管理必须一起设计。

复用已登录的存储状态可以减少登录成本，但快照中的身份凭证需要按测试秘密处理；加载同一快照也不等于得到不同服务端用户。普通新上下文不会自动继承另一个上下文的登录态，是否加载状态由测试明确决定。

6. 失败定位与维护

卡 · Selenium 或 Playwright 找不到元素时，应怎样排查？卡 · UI 自动化偶尔失败、重试后通过，应怎样处理？

元素找不到时，先确认失败发生在哪一层：

证据	需要核对
当前 URL 与页面截图	是否到了预期页面，是否被重定向到登录或错误页
DOM 与匹配数量	定位是否过时、元素是否尚未创建、是否匹配多个
页面与 frame	是否进入了新窗口或 iframe，当前查找上下文是否正确
可操作性	是否被遮挡、禁用、隐藏或仍在动画中
网络与控制台	是否因请求失败或脚本异常没有渲染目标
账号和测试数据	是否具备展示该控件的身份与状态