本节书摘来自华章计算机《Web测试囧事》一书中的第1章,第1.11节,作者 黄勇 雷辉 徐潇 杨雪敏,更多章节内容可以访问云栖社区“华章计算机”公众号查看。
1.11 IE 9不支持占位符导致搜索行为异常
对于浏览器兼容性测试,一直都是Web测试中重要的一环,小蔡在测试产品中自然也不能漏掉。
由于小蔡测试的产品是面向普通用户的,所以小蔡选择进行测试的浏览器,也是开发团队选择优先支持的浏览器,是基于市场占有率最高的几款浏览器:Chrome、Firefox、Safari和IE。这些浏览器的版本也很多,如果全部支持也是不可能的,所以开发团队选择支持最新版本的Chrome、Firefox和Safari,以及IE 9~IE 11,还有IE EDGE。
Chrome和Safari都是基于WebKit核心的,所以差别不大。Firefox虽然基于Gecko,但是对于绝大多数Web标准协议都是支持的,所以和Chrome及Safari的差别也很小。IE因为使用的是微软自己的内核,所以和其他浏览器的差别会大不少,尤其是版本较早的IE 9~IE 11,不过微软在IE EDGE上已经开始兼容WebKit,并且兼容最新的Web标准协议,所以和其他浏览器的差别也不大了。
小蔡根据搜集到的这些浏览器差异的信息,决定兼容性测试的重点放在测试Chrome和IE 9两个浏览器上面。
由于产品是大型购物网站,所以用户需要使用搜索特定商品来查看商品详细信息。而在搜索框中,业务方希望推广一些畅销产品,所以使用了占位符(Placeholder)的方式,使用户在点击搜索框之前,在搜索框的搜索关键字部分,看到的是通过占位符设置的推广产品的信息。
小蔡在执行浏览器兼容性测试时发现,由于添加了占位符,导致Chrome和IE 9浏览器上搜索功能的行为不一致(见图1-22)。
这就导致用户在两个浏览器上使用相同的操作步骤进行搜索时的搜索结果不一致。想要解决这个问题,用户只有一个一个字符地删除IE 9浏览器中搜索框里的占位符,这对用户来说并不友好。
经过开发人员调查发现,这个问题的原因是IE 9浏览器本身就不支持占位符,所以对于占位符的操作也是有问题的。开发人员只好对IE 9上的搜索框单独处理,给搜索框先添加一组灰色的默认文字,来展示畅销商品,等用户点击搜索框时再清除这些字符。
小蔡庆幸IE 9是支持的最低版本的IE,如果需要再兼容IE 6~IE 8,那浏览器之间的差异更多更复杂,也会让开发和测试工作的难度加大不少。同时她决定定期查看用户的浏览器使用率和使用量,等大量用户不再使用IE 9时,就可以不用再做现在这种针对特定浏览器编写代码和测试某项功能了。