本节书摘来自华章计算机《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定制化多选框中的代码逻辑错误，导致勾选状态下的可勾选位置和多选框本身出现了分离，最终导致问题出现。
