前端自动化实践：控件取值、日志记录与元素定位

这是一次页面自动化的流程复盘，目的是把重复的手工操作交给脚本完成。下面按实际执行顺序记录，重点是那些容易踩坑的地方。

1、幂等保护：重复执行的代价

只要是会留下数据的动作，都要考虑幂等。常见做法是提交后立刻置灰按钮，响应回来再恢复，避免重复点击产生重复数据。

2、元素定位：元素定位的基本思路

标题和摘要这类普通输入框，用原生选择器就能直接取到。麻烦的是被组件库包了一层的控件，真正可编辑的节点往往藏在自定义标签内部，需要往里多找一层。

3、事件派发：被忽略的事件触发

很多"看起来填进去了、点提交却没反应"的问题，根源都在这里：DOM 的值改了，但框架持有的状态没变，提交时读到的还是旧值。

4、编辑器写入：往 iframe 里写内容

编辑器实例可能有多个挂载位置，逐个去猜很容易拿到别的实例，结果内容写到了别处。正确做法是用页面暴露的就绪回调，拿它回传的那一个。

5、无人值守：什么时候不该自动化

依赖登录态的任务还要考虑凭据有效期。长时间不访问就会失效，任务应当在失效时显式报警，而不是静默跳过。

6、日志记录：出问题时的第一份材料

日志里带上关键字段的实际值，比如各输入框的字数、校验函数的返回值，定位问题时能省掉大半猜测。

7、控件取值：两处隐藏的值

标签这类控件由插件渲染，视觉上是一个输入框，真实取值却分散在两个位置：一个存值，一个存展示文本，提交时读的是后者。

8、小结

这套做法的通用性还不错，换一个页面也只需要调整元素定位和等待条件，主体逻辑可以复用。

本文写于 2026-09-23，用于确认流程在重复执行时依然稳定。