Skip to content

Latest commit

 

History

History
56 lines (34 loc) · 3.5 KB

T05.md

File metadata and controls

56 lines (34 loc) · 3.5 KB

T05 · Autofill

由 pnpm docs:lessons 生成;内容源 src/data/advanced.json,合同源 scripts/generate-advanced.mjs。含教师参考答案。前置:08、48。

目标与原理

检查地址自动填充与字段语义。autocomplete token 描述字段用途与分区;浏览器有自己的填充策略,DOM 语义正确也需实际自动填充复核。

字段用途

given-name、family-name、street-address 与 postal-code 不可混用。

分区

section-*、shipping / billing 区分地址组,label / name 保持清晰。

夹具与浏览器

本地测试数据按 token 填充只验证语义,不模拟原生 Autofill 的启发式。

交互演示

改变表单结构观察匹配。改变本课输入条件并预测结果;对照请求、状态或约束的关系;切换最小修复并复位,核对改变的范围。综合题先提交判断再解锁因果模型,所有模型不计完成。

商城实战

收货人被填成街道,或配送地址使用了账单分区。

  1. 打开真实收货表单,先检查 label、name、type、autocomplete。
  2. 用明确标注的本地语义夹具填充,观察实际字段值;数据均为虚构。
  3. 在无个人资料的访客 / 独立测试配置打开 Autofill,启用 Show test addresses in autofill menu;点击地址字段,在自动填充菜单的 Developer tools(开发者工具)中选择内置测试地址。必要时先右键字段打开菜单。
  4. 记录 Form inspector 的 Form field、Predicted autofill value 与 Value,再与页面实际填值对应;不要导入私人地址或登录账户。
  5. 应用对应 token 修复,用同一内置地址再次填充;配送与账单两组地址的隔离另做专项复核,不从单组表单推断。
  6. 手动清空本页三个字段,再停止实验;关闭测试地址开关,退出访客窗口。页面不保存地址、不修改 Chrome 地址资料。

独立挑战与参考答案

验证另一组表单语义与填充。新输入与两种故障随机;可能再次抽到同种,不保证轮流。

配置 根因 实际证据 针对性验证
配置1 收货人与街道 autocomplete 用途互换 实际 input autocomplete 与 label 用途不一致 为名称与街道恢复正确 token,再检查标签与填充
配置2 配送表单使用 billing 分区 配送字段 token 含 billing,本地夹具填入账单测试值 统一 shipping 分区并检查两套地址互不覆盖
干扰项 只根据表面现象修改无关条件 没有保留条件与输入的一次截图 同时改变设备、数据与逻辑,只保留成功结果

三级提示

  1. 先复现 收货人被填成街道,或配送地址使用了账单分区。
  2. 对照实际证据:实际 input autocomplete 与 label 用途不一致;或 配送字段 token 含 billing,本地夹具填入账单测试值
  3. 一次只改变对应原因:为名称与街道恢复正确 token,再检查标签与填充;或 统一 shipping 分区并检查两套地址互不覆盖

验收、边界与恢复

只自动检查 DOM token 与本地夹具结果,原生 Autofill 行为另行自报。 保持输入、数量、环境一致;完成故障与正常对照,选择一致证据;三轮引导和两配置挑战分别取证,原生步骤与本地结果分列。停止后清理本会话资源,再恢复浏览器设置。

共同合同 · 本批验收 · 官方参考。