htmlhint不能断言业务逻辑，因其仅为静态语法检查工具，不执行js、不渲染dom、不感知状态变化，仅校验标签闭合、属性拼写等基础规范，无法验证“点击弹窗”或“动态更新”等运行时行为。
HTMLHint 为什么不能直接断言业务逻辑？
HTMLHint 是静态检查工具，只验证标签语法、属性拼写、结构规范等基础层面，比如 tag-pair 是否闭合、alt-require 是否缺失。它不执行 JS、不渲染 DOM、不感知状态变化——所以你没法用它断言“点击按钮后弹窗出现”或“加载完成时价格数字更新”。它的输出是 lint 错误，不是测试通过/失败。
常见错误现象：htmlhint index.html 报 id-unique: true 错误，但页面实际运行中多个同名 ID 并未引发功能问题；反过来，页面 JS 把某个 data-testid="cart-count" 动态改成了 0，HTMLHint 完全看不见。
- 使用场景：适合 CI 中卡住低级错误（如漏写
、meta-charset-require缺失），但不能替代运行时断言 - 参数差异：配置项如
attr-lowercase控制属性名大小写，和业务无关；而title-require只检查是否存在<title></title>标签，不关心内容是否准确 - 容易踩的坑：把 HTMLHint 当成“自动化测试工具”，在 PR 检查里只跑它就合代码，结果上线后交互逻辑崩了却毫无预警
Playwright 中如何对 HTML 结构做可靠断言？
真正能断言 HTML 行为的，得靠 Playwright 这类驱动真实浏览器的工具。它加载你的 index.html，执行 JS，等 DOM 稳定后再查元素、取文本、触发事件。
关键不是“有没有这个标签”，而是“它是否在正确时机以正确状态存在”。例如断言一个加载中的 spinner：await page.waitForSelector('div[data-loading="true"]', { state: 'visible' })，比单纯查 page.$('div[loading]') 更健壮。
- 常见错误现象：
TypeError: element is null—— 多半是没等元素出现就调page.$eval()；正确做法是先page.waitForSelector()或用expect(page.locator(...)).toBeVisible() - 使用场景：验证 SSR 渲染结果、第三方 SDK 注入的 widget 是否挂载、动态 class 切换（如
nav.is-open） - 性能影响：用
page.content()获取整页 HTML 再正则匹配，比page.locator()+waitFor慢且不可靠；后者利用浏览器原生查询引擎，还能自动重试 - 容易踩的坑：断言硬编码文本，比如
expect(await el.textContent()).toBe('提交订单')，一旦文案改成‘确认下单’就挂；应优先断言 data 属性或语义化 role，如expect(el).toHaveAttribute('data-action', 'checkout')
为什么用 Cheerio 做静态断言容易失效？
Cheerio 解析的是原始 HTML 字符串，不执行 JS，也不处理动态插入的内容。它适合做预发布扫描（比如检查所有 <img> 是否含 alt），但绝不能用于验证“用户登录后 header 显示昵称”这类场景。
典型失效链路：Vue/React 页面的 index.html 里只有 <div id="app"></div>，Cheerio 查 $('#user-name') 必然为空；而 Playwright 加载后，JS 执行完才真有那个元素。
- 使用场景：批量扫描存量页面的 SEO 元素（
meta[name="description"]）、检查模板继承关系、验证构建产物中是否遗漏关键 script 标签 - 参数差异：Cheerio 的
load(html, { xmlMode: false })和xmlMode: true对自闭合标签（如<br>）解析行为不同，需按实际 HTML 版本选 - 兼容性影响：遇到非标准 HTML（如服务端模板语法
{{ title }}），Cheerio 可能解析失败，需先清洗或降级用正则提取 - 容易踩的坑：拿 Cheerio 结果当 E2E 断言依据，在 CI 里跑通但线上报错，因为本地构建产物和生产环境 JS 加载顺序/CDN 资源路径不一致
断言失败时，日志里该留什么关键信息？
一个没用的断言失败日志只写“expected ‘abc’ got ‘def’”；有用的日志必须带上下文：当时 DOM 是什么状态？网络请求发出去没？JS 报错了没？
Playwright 推荐组合：await expect(locator).toHaveText(expected, { timeout: 5000 }) 失败时默认截图+录屏；再加一层 console.log(await page.content()) 或 await page.screenshot({ fullPage: true })，就能快速区分是渲染问题、数据问题还是网络问题。
- 常见错误现象：断言失败只抛出
TimeoutError，没附任何现场快照，排查时只能盲猜——可能 DOM 没渲染、可能 API 返回空、也可能 CSS 把元素藏到 viewport 外 - 必须包含的信息：当前 URL、locator 表达式、实际获取到的文本/属性值、network idle 状态（
page.waitForLoadState('networkidle')是否已触发） - 容易被忽略的一点：断言前没清空 localStorage 或 mock 接口，导致上一个测试用例残留数据污染当前断言环境；每次 test 用例开头加
await page.goto('about:blank')或await page.addInitScript('localStorage.clear()')
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
