需用脚本自动化检查data-i18n是否漏加、错标或空值,验证lang属性同步更新、动态内容翻译触发、BCP 47语言代码及fallback场景,并结合屏幕阅读器等真实辅助工具验证翻译准确性。

怎么测 data-i18n 标记是否漏加或写错
漏标或错标是国际化测试里最常导致文案不翻、屏幕阅读器读错的根源。不能靠肉眼扫,得用脚本自动化检查。
- 遍历所有含文本的语义化标签(
<p>、<h1>、<label>、<button>等),检查是否都有data-i18n或对应后缀属性(如data-i18n-placeholder) - 排除已知无需翻译的节点:比如
<pre lang="bash">、<code lang="sql">、<script>、<style> - 对含 HTML 结构的文案(如带
<a>的提示语),确认用了data-i18n且语言包值是可信 HTML 片段,不是拼接字符串 - 运行时检查
document.querySelectorAll("[data-i18n]:not([data-i18n=''])")是否覆盖全部目标节点;空值或纯空格值要报警
怎么验证 lang 属性同步更新是否生效
只改 document.documentElement.lang 是无效操作,必须验证每个含文本节点的 lang 是否随主语言切换而更新,否则标点、字体、语音全乱。
- 切换语言后,执行
Array.from(document.querySelectorAll("[lang]")).filter(el => el.lang !== expectedLang),看是否还有残留旧值 - 特别注意局部多语言内容:
<p lang="ja">这类节点必须保留原lang,不能被全局覆盖——测试需校验其lang值是否始终不变 - 检查
<input placeholder>、<img alt>、<label for>等属性是否同步更新,常见错误是for值没变导致点击失效 - 用 Chrome DevTools 的「Accessibility」面板验证屏幕阅读器实际读出的语言,比看 DOM 更可靠
怎么测动态插入内容的翻译是否触发
AJAX 加载的弹窗、分页表格、懒加载模块,插入后若没手动调用翻译函数,data-i18n 就只是字符串,不会变成文案。
- 模拟点击按钮打开
<modal>,检查内部<h2 data-i18n="modal_title">的textContent是否已替换为当前语言值 - 触发分页请求,获取新
<tr>后,立即执行document.querySelectorAll("tr[data-i18n]")并断言其文本已更新 - 不要依赖
MutationObserver自动监听——它无法捕获属性变更,也无法知道哪些节点需要翻译,2026年7月仍无通用方案 - 测试必须显式调用你的翻译函数(如
translateDOM(document.querySelector(".dynamic-section"))),并验证返回值和 DOM 变更
怎么覆盖 BCP 47 和 fallback 场景
zh-CN 有效,zh_CN 或 chinese 会被浏览器忽略,直接 fallback 到默认语言——这会导致整页文案消失,但控制台可能无报错。
立即学习“前端免费学习笔记(深入)”;
- 强制设置
document.documentElement.lang = "zh_CN",检查是否退到en或空白,验证 fallback 逻辑是否触发 - 删除某个语言包中部分 key(如
en.json里删掉"form_email_required"),确认对应节点显示 fallback 文案(如英文)而非留空 - 测试
navigator.language为und或空字符串时,是否兜底到 localStorage 存储值,再 fallback 到预设主语言 - 检查
fetch加载语言包失败时是否降级处理,避免白屏——这是线上最容易被忽略的崩溃点
lang 值是否污染了代码块、fallback 是否在用户无感知时静默失效。这些没法靠覆盖率数字体现,得靠针对性断言和真实辅助工具验证。



















