在Windows系统上测试safari浏览器的兼容性

前言

在测试网站的兼容性时需要用到safari浏览器，在没有Mac的情况下，又不想麻烦同事，那该怎样在Windows系统上使用safari浏览器呢？

手机端的safari浏览器能替代PC端吗

答案是不能，主要是因为以下几点：

• 屏幕尺寸：iPhone的屏幕比大多数Mac的屏幕要小得多，且具有不同的纵横比。因些网页的布局和可用空间会有所不同，需要进行响应式设计测试。
• 触摸与鼠标操作:iPhone上的Safari是为触摸操作优化的，而Mac上的Safari支持鼠标和触控板手势。这可以影响页面元素（如按钮、链接）的行为以及用户界面组件的交互方式。
  eg:一个网站有一个导航菜单，包含多个下拉选项。在Mac的Safari上，测试者发现下拉菜单在鼠标悬停时正常显示，所有选项都能点击，并且看起来没有问题。
  由于iPhone是通过触摸操作，用户点击菜单后，下拉选项可能并不会如预期显示出来。以下是具体的bug可能出现的情况：
  1. 点击后未显示：下拉菜单的设计可能在触摸设备中未正确实现，导致用户在点击菜单时没有任何反应，选项无法显示。
  2. 菜单关闭：由于iPhone的触摸操作，在点击下拉菜单的其他地方，菜单可能意外关闭，用户无法选择任何选项。
  3. 响应区域不够大：如果下拉菜单项的响应区域较小，触摸操作可能不够精准，用户无法顺利选择目标选项
• 功能和插件：某些网页功能、插件或扩展在移动设备上可能不兼容或不可用。

一般来说在公司中，ios手机端与PC端是由不同的人负责，测试手机端与PC端也是分开测试的。

在Windows上测试safari浏览器的兼容性的方法

虽然在2007年至2012年间，苹果曾提供了适用于Windows的Safari版本，但随后停止了对该平台的支持，并不再发布新的Windows版本更新。那我们想要使用最新版本的Safari浏览器进行测试该怎么做呢？

利用云服务

使用跨浏览器测试平台提供的云端macOS和Safari环境进行测试。
我试过几个如LambdaTest、BrowserStack，使用情况如下

• 免费时间有限，超过之后就需要付费
• 不可以连接公司的内网，测试受限
• 加载、点击缓慢
  因为日常的测试需求不仅仅需要连接公司内网，还需要在网页上进行交互,所以这一方案被我pass掉了

使用虚拟机

在电脑上安装VMware，并在其中安装macOS，在安装的虚拟环境里运行Safari浏览器进行测试。
实测可行。

在Windows上下载虚拟机

具体的安装流程可以参考这篇文章VMware17Pro虚拟机安装macOS教程(超详细)
文章中的这一步：

我选择的是SATA(A)，是因为我的电脑安装时推荐的是SATA(A)，与原博文不同。之后我问了下ChatGPT，SATA (A) 和 SCSI (S)的区别，原文是这样的：
SATA (A) 和 SCSI (S) 是两种常见的接口标准，
SATA：适合大多数个人和小型企业用户，提供良好的性能和成本效益。
SCSI：适合需要高可靠性和高性能的企业级应用，尤其是在需要大量并发访问和高可用性的环境中。
因为我只需要使用safari浏览器做一些兼容性测试，进行简单的交互，所以我选择了SATA (A) 接口标准。

遇到的问题以及解决思路

安装过程一切正常，且安装完成后可以连接公司的内网，但是在使用safari连接器是却出现了浏览器聚焦不显示的问题，比如我打开百度，当浏览器窗口获得焦点时：

页面显示不全
当浏览器失去焦点时：

有如下的几种可能的情况会引起这个问题：

1. 资源不足
   • 虚拟机分配的资源（CPU、内存、显存等）不足，可能导致浏览器在处理复杂页面时性能下降，甚至出现渲染错误。
2. 网站本身的问题
   • 尝试访问其他网站，看是否有类似的问题。如果不是普遍现象，则可能是目标网站的代码问题。
3. 网络连接问题
   • 网络连接不稳定或速度很慢，可能导致页面元素加载失败或延迟加载
4. 分辨率的问题
   • 虚拟机中的屏幕分辨率设置不正确，可能导致页面元素无法正常显示或被截断

对于第一种情况，我提高了虚拟机的内存，可在虚拟机 - 设置中调整，结果还是聚焦不显示。
第二种情况我试着访问了其他网站，确定为是普遍现象。
第三种情况，我将NAT（网络地址转换模式）换成了Bridged（桥接模式），方法可参考这篇文章VM虚拟机网络配置桥接模式方法步骤,还是不行。
最后我更改了虚拟机的分辨率，可以了。操作方法为在虚拟机里的设置搜索分辨率

调整即可。

总结

文章介绍了如何在自己的Windows系统中测试safari浏览器的兼容性，方法为使用虚拟机下载macOS系统，然后在里面使用safari浏览器进行测试。文章的最后写了一点我遇到的小问题，如果大家遇到新的问题我们也可以在评论区讨论交流。