本节书摘来自华章计算机《Web测试囧事》一书中的第1章，第1.5节，作者 黄勇 雷辉 徐潇 杨雪敏，更多章节内容可以访问云栖社区“华章计算机”公众号查看。
小蔡接到一个公司内部在线表单项目的测试任务，这个项目中有3个独立的角色：管理员A负责编辑和布局表单控件，用户B负责填写表单中控件的内容，而审核员C只能查看B操作后的结果。
这个需求看上去不难，小蔡快速分析并且记录了以下几个测试点，开始了测试工作。
1）A可以正常添加不同类型控件（文本框、富文本框、下拉列表、多选框、单选框等）到页面中。2）B可以正常在这些控件中输入数据。3）C可以正常查看B所有的操作内容。4）针对各个角色所具有的不同的操作权限进行验证。5）A更新表单后，B要可以看到对应的变化。6）A未完成操作或者未保存的表单，B是无法看到和使用的。7）B不保存后者提交操作结果，C无法看到B的操作内容。8）跨浏览器和跨平台测试。
在测试过程中，小蔡发现这个表单做的类似于我们熟知的Office应用的所见即所得的形式，即A在屏幕左上方放置一个多选框并保存后，B打开页面后也可以在屏幕左上方看到一个多选框，最后C登录后也可以在屏幕左上方看到这个多选框。这使得整个功能变得更加容易测试，几乎是瞥一眼就能看到有没有问题。
三下五除二就跑完用例，小蔡正准备结束测试，偶然间一眼瞥到表单上的多选框选项上，她突然意识到既然多选框和单选框中的选项内容都是自己定义的，那在选项内容中输入超长字符串时，会不会导致该控件的显示位置发生变化呢？
带着这个疑问，小蔡重新使用A角色设置了一个超长的多选框选项名称，然后用B角色做了勾选操作，最后再用C去查看结果。结果她发现了问题：C查看到的结果中，勾选后的内容和多选框显示错位了。
再仔细重现了一遍问题后，小蔡发现A在编辑模式给多选框设置超长的选项名称的时候，在界面上多选框的位置被挤到了文本中央，如图1-9所示。
B在操作视图中看到的这个多选框又被强制对齐到了文字最左侧，如图1-10所示。
而C在审核视图中看到的情况却是A和C的结合体，即多选框被重置到了文字中央，而被勾选的位置却出现在文字的最左端（见图1-11）。
有了小蔡的过程重现，开发人员很快就定位到出现问题的原因：首先是在A用户使用的过程中（见图1-9），没有把操作结果查看视图中的多选框强制左对齐。其次是在用户C使用过程中（见图1-11），由于使用jQuery定制化多选框中的代码逻辑错误，导致勾选状态下的可勾选位置和多选框本身出现了分离，最终导致问题出现。
