实用跨浏览器测试清单
布局在某个浏览器中可能看起来很完美，但在另一个浏览器中却会崩溃。屏幕较窄的廉价 Android 手机，或者缩放比例为 125% 的旧笔记本电脑，都可能毁掉你的设计。
不要将测试视为模糊的最后检查。要将其视为一份具体的清单。
专注于高风险领域：
- 表单和输入框
- 导航菜单
- 布局偏移
- 字体加载
- JavaScript 交互
不要试图测试每一个浏览器，那是在浪费时间。相反，请使用精简的矩阵：
- 桌面端使用一个 Chromium 浏览器
- 一个 Safari 环境
- 一个 Firefox 环境
- 一部 Android 手机
- 一部 iPhone
根据用户实际使用产品的方式来安排测试。页面不需要在所有地方看起来都一模一样，它需要的是可用性、可读性和稳定性。
你的清单应包括：
- 浏览器和操作系统
- 视口宽度
- 缩放级别
- 特定的用户流程
保持清单简短。如果一项测试需要半天时间，你的团队就会跳过它。一次高效的检查应该在不到一小时内完成。
从结构开始。检查你的首页、内容页和表单。将窗口大小从桌面端调整到移动端宽度。放大页面。留意以下问题：
- 按钮换行异常
- 标题被截断
- 水平滚动
- 吸顶页眉遮挡内容
- 模态框遮挡了重要控件
接下来，测试交互。不同浏览器处理表单的方式不同。测试文本输入框、密码管理器、日期选择器和文件上传。检查自动填充如何影响你的布局。
测试 JavaScript 重度组件，如标签页 (tabs)、折叠面板 (accordions) 和搜索建议。页面在控制台中可能没有显示任何错误，但按钮可能仍然无法工作。
最后，对网站进行压力测试：
- 限制网络速度
- 禁用缓存
- 在输入框中使用超长文本
- 加载比平时更多的项目以检查溢出情况
最好的清单是枯燥的。它应该是一份简单的“通过”或“失败”列表。每次发布时都要使用它。当 Bug 流入生产环境时，将该特定故障添加到你的清单中。
只有当清单能记住团队遗忘的内容时，它才是有用的。
来源：https://dev.to/graceholloway_/a-practical-cross-browser-testing-checklist-1p6a