对于 Web 应用程序，在投入生产之前，开发人员必须确保它在所有浏览器中都能正常工作。最终用户应该能够体验到一个功能齐全的网站，该网站能够处理所有关键功能，而与最终用户使用的浏览器或设备无关。应用程序的行为在不同的操作系统、浏览器甚至设备中根据其分辨率而有所不同。大多数开发人员通常更喜欢在单个浏览器上工作，即使工作站中安装了多个浏览器。
这有时会导致应用程序在其他浏览器中造成损坏。在测试阶段，必须先覆盖所有维度，然后再将应用程序部署到生产环境中。
让我们讨论在 4 种主要浏览器上测试应用程序时需要执行的测试策略、测试人员面临的常见问题以及如何解决这些问题。
不要忘记检查Object Fit – object-fit 属性指定元素的内容应如何适应可用空间，’contain’ 值将缩小内容以适应容器，同时尊重其纵横比，而 ‘ fill’ 值将缩放内容以填充容器，代价是可能会扭曲其纵横比。
Internet Explorer 和 Microsoft Edge
根据 W3C 发布的一项研究，全球近 4% 的最终用户使用 Internet Explorer。 IE 是任何开发人员最容易专注于他们的代码的浏览器。 IE 9 到 IE 11 支持几乎所有最新的 JavaScript 和 CSS 框架。然而，IE 8 是另一回事。 IE 8 有时不支持 Angular 或 Bootstrap 等常用框架。谷歌分析研究表明，IE 8 是最常用的版本之一。如果客户端在 SRS 中提到了应正确呈现应用程序的浏览器数量及其版本，则另当别论。否则测试也应该在 IE8 上正确完成。
测试人员和开发人员面临的一个常见问题是，应用程序通常无法在 IE 8 中正确呈现。文本可能会损坏，按钮可能无法正常工作，有时页面可能根本无法加载。这是因为长时间运行的脚本在 IE 8 中呈现异常缓慢。处理此解决方案的最佳方法是减少文档对象模型的递归、循环和操作。在 CSS 中，如果使用 id 而不是类，页面加载会更快一些。 Microsoft Edge 是另一回事。它更加优化，并且可以在 Chrome 或 Firefox 等其他浏览器中正确呈现的网站在其中运行良好。尽管如此，据报道某些引导样式标签在 Edge 中无法正常工作，并且在被自定义 CSS 替换时它们工作正常。因此，在部署之前应该在其中正确地进行测试。
火狐浏览器
大约 10 年前推出 Firebug 时，它是业内最好的浏览器集成开发工具。 Mozilla Firefox 在世界范围内变得非常流行。尽管其开发工具的速度已被 Google Chrome 超越，但它仍然是一款可靠的浏览器，提供自定义用户界面和大量插件目录。为了克服其性能问题，最近发布了一个使用多进程架构的新版本。 2018 年 6 月发布的统计数据显示，Firefox 是 10% 的桌面用户和 17% 的移动用户的首选浏览器。在部署应用程序之前，还应在 Firefox 中执行适当的浏览器测试。
在 Firefox 中进行测试时发现的常见问题包括不支持现代功能，例如 CSS 网格、HTML5 视频或音频以及 flexbox，这是 Bootstrap 4 完全基于的 css3 功能。使用供应商特定的 CSS 前缀（例如 -moz）可以消除大多数 CSS3 标记。为了支持 Bootstrap 而不是 CDN，开发人员可能需要在其代码中手动下载和使用 Bootstrap 库。当没有找到任何合适的工作解决方案来呈现任何 CSS 属性时，开发人员可能需要更改它并找到另一种实现该功能的方法。
还要检查Pointer Events -CSS cursor 属性，当设置为“none”时，允许元素不接收 mouseover/mouseout 事件，而是该事件将发生在它后面的任何东西上。
谷歌浏览器
在开发者工具方面，谷歌 Chrome 以近 63% 的桌面用户、55% 的移动设备和接近 58% 的平板电脑用户处于市场领先地位。由于其广泛的调试和开发工具，它也是开发人员中最受欢迎的浏览器。为了提高速度，chrome 开发人员最近进行了一些更改，允许在网络覆盖较差的移动设备中呈现网页。
但是，chrome 的一个缺点是，浏览器在页面加载期间仅验证一次主资源。通常，开发人员或测试人员可能会面临未反映代码更改的问题。插件在使用缓存清除过程的 chrome 网上商店中可用。使用它，只需刷新即可查看代码更改，而无需重新加载整个页面。
图像方向问题是 Chrome 中的另一个常见问题。在其他浏览器中正面朝上显示的图像可能会在 chrome 中上下颠倒显示。这不是错误。仅当图像的 EXIF 方向与实际方向不匹配时才会发生这种情况。在服务器端处理图像将解决此问题。
嘿，您在寻找Prefers Reduced Motion吗？显示的媒体查询对应于用户对减少运动的偏好。
苹果浏览器
由于大多数桌面用户更喜欢 Windows，Safari 仅占使用份额的 3%。然而，由于 iPhone 和 iPad 的广泛使用，它在移动设备中占 17% 的使用份额，在平板电脑中占 35%，因此是执行测试的重要浏览器。但是，桌面版和移动版 Safari 应该被视为完全不同的浏览器，因为 iPad 和 iPhone 是使用触摸而不是点击操作的。 Safari 的移动版本也进行了优化，以减少处理器的负载。
Safari 中有一个内置功能可以防止网络钓鱼。此功能的缺点包括排除通过浏览器上传的文件中的元数据。例如，如果上传了任何照片，则 GPS 坐标将被删除。目前还没有修复这个错误，虽然丢失的坐标可以被地理定位 API 替换。
在移动浏览器中，没有通过 CSS 设置光标样式的元素、悬停或单击动画在渲染期间会失败。要解决此问题，应直接在父元素而不是其子元素上声明事件侦听器。否则，本应在触摸时交互的按钮或列表项将根本不起作用。
在浏览器上执行多少测试用例并不重要。发布新版本的浏览器时，可能会再次出现错误。最好的解决方案是始终关注新版本并在生产环境中的应用程序上运行测试用例。