相关连接：【浏览器兼容性概述】

目录

一、浏览器兼容性测试工具

1.0、IETester【免费·exe】

1.1、SuperPreview【收费·exe】

 1.2、Adobe Browserlab【在线测试】

1.3、BrowserStack【在线测试】

1.4、Sauce Labs【在线】

1.5、Browsershots【在线】

一、浏览器兼容性测试工具

1.0、IETester【免费·exe】

这是我最先用的测试浏览器兼容性的工具，想必也是大家用的最多的一个，IETester是一个免费的Web浏览器调试工具,可以模拟出不同的js引擎来帮助程序员设计效果统一的代码。IETester可以在独立的标签页中开启IE5.5、IE6、IE7，IE8 beta2这4个不同版本的IE。可以方便的解决IE浏览器的兼容问题。



1.1、SuperPreview【收费·exe】

最先知道SuperPreview是在微软WebCast的技术创新日的课程上，在SuperPreview中，你可以同时浏览网页在各个版本的IE中的效果。根据微软的介绍，SuperPreview的可用IE版本视系统已安装IE浏览器的版本而定，如果系统安装了IE8，那SuperPreview浏览器测试可用版本就包括IE8、IE7和IE6；如果系统安装了IE7，那SuperPreview只包括IE7和IE6；如果系统安装了IE6，那SuperPreview只能测试IE6。

 

 不过，Microsoft Expression Web 3向所有浏览器敞开了大门，这里有篇不错的文章。大家可以了解下。

 1.2、Adobe Browserlab【在线测试】



【据外媒报道，Adobe公司忽然宣布将关闭旗下的桌面浏览器测试服务平台BrowserLab，建议用户可以选择使用BrowserStack和Sauce Labs来代替Adobe Browserlab】

Adobe Browserlab是Adobe出品的在线测试工具，基于flash开发。支持FF，IE等多种浏览器，使用之前首先需要注册。



图中则是FF和Safari的测试。

1.3、BrowserStack【在线测试】

提到BrowserStack提供虚拟化服务。大多数开发者，当他们听到的是“虚拟机”，就认为这不是一种很好的方法，因为虚拟机需要宝贵的磁盘空间和系统资源，并且大多数开发者厌恶运行它们。 BrowserStack采取一种不同的方法，利用Adobe Flash在自己的浏览器提供了一个虚拟浏览器。你不需要安装任何真实的虚拟浏览器。



这是非常强大的功能，最关键的就是要在你的浏览器做的。当然你不局限在操作系统或浏览器版本选择。browserstack提供虚拟化为：

Windows XP, 7 and 8
	
OSX Snow Leopard, Lion and Mountain Lion
	
iOS
	
Android
	
Opera Mobile


是的，他们提供移动浏览器的虚拟化。我们在一个移动的世界，所以我期望的不多。根据你选择的操作系统，BrowserStack提供了一些特定的操作系统支持的浏览器，在某些情况下，包括测试版和nightlies。



除了操作系统和浏览器的选项，你可以选择你喜欢的屏幕分辨率测试，这是特别有用的，它可以检查网站页面的布局。开发者也可以登录http://www.browserstack.com/responsive监测你的网站在不同的分辨率下显示。

BrowserStack是如何工作的

第一步你需要注册，BrowserStack是一个需要付费的服务，我认为是非常合理的定价，你可以得到一大堆更多的功能。 一旦你注册和登录，你就可以在仪表盘看到一些快速启动栏了~



你可以直接输入需要测试的网址，然后选择操作系统和浏览器，直接进行测试。



这里需要强调的是，你看到的测试页面，不是一个网页截图也不是一个假的进程。是可以直接访问的站点，包括菜单，按钮等等。也包括可以试用浏览器自带的开发工具，比如IE的F12，Chrome的开发工具。



所以你不仅能看到你的网页呈现在浏览器里的样子，也可以使用现有的工具来调试常见问题。很酷！

在本地使用BrowserStack

BrowserStack提供了一个隧道功能，允许您远程测试本地页面。它采用Java Applet作为代理基于云计算的服务，在您的目录或Web服务器。这意味着你将需要安装Java，而我更倾向于在这种情况下，不建议安装的Java浏览器插件，但是这是一个必要和有价值的。 在browserstack仪表板中，您应该会看到一个标题为“本地测试”的两个按钮标记为“Web隧道”和“命令行”。 

 “网络隧道”选项，利用了Java applet来建立您的计算机和远程服务之间的隧道。这可以在文件系统级别上，在那里你可以选择一个特定的目录您的网页或本地服务器的URL（例如：本地主机）。为了说明这一点，我已经安装了WAMP的我的电脑上有一个本地网络服务器，与BrowserStack使用。 WAMP的默认情况下，也可通过安装phpMyAdmin的：http://localhost:81/phpmyadmin/ 我使用端口81为不与另一个进程我运行冲突。点击“网络隧道”选项打开如下对话框让你知道程序加载：



因为Oracle工作在安全的Java上，尤其是他们的浏览器插件，你应该提示运行小程序。我的建议是绝不允许任何未签名的小程序，从一个网站到你的电脑上运行，所以我总是将我的Java安全性设置为“高”。还有一个选项，称为“非常高”，可以防止browserstack程序从远程连接。

  

一旦运行applet，你会出现一个对话框，询问您当地的服务器的地址或文件夹。



正如你可以看到，我进入我的本地URL，它检测到的端口号。如果您需要，您也可以使用SSL。在这里我能看到我的BrowserStack远程服务器上的本地副本的phpMyAdmin。



 现在，如果你不想在浏览器或因某些原因不能使用Java小应用程序，您可以使用“命令行”选项，你需要下载一个。JAR文件称为通过命令行来建立连接：

java -jar BrowserStackTunnel.jar  localhost,3000,0

在会是一个BrowserStack的访问键，你必须输入。一旦建立连接后，你再返回到仪表板，开始测试。就我个人而言，我更喜欢小程序的方法因为它很简单。

1.4、Sauce Labs【在线】

 Sauce Labs是一个提供自动化功能测试的云测试服务公司。

其提供两种服务，Sauce Scout是手工测试的工具，用户可以选择操作系统和浏览器版本，然后就能拿到一台VM进行手工测试了；Sauce OnDemand是自动化测试服务，用户在本地写好脚本，然后脚本是运行在他们的云里面。

Sauce OnDemand：如果你之前写过Selenium【Selenium也是一个用于Web应用程序测试的工具。Selenium测试直接运行在浏览器中，就像真正的用户在操作一样。支持的浏览器包括IE、Mozilla Firefox、Mozilla Suite等。这个工具的主要功能包括：测试与浏览器的兼容性——测试你的应用程序看是否能够很好得工作在不同浏览器和操作系统之上。测试系统功能——创建衰退测试检验软件功能和用户需求。支持自动录制动作和自动生成。Net、Java、Perl等不同语言的测试脚本。Selenium 是ThoughtWorks专门为Web应用程序编写的一个验收测试工具。】的测试脚本，那迁移到Sauce OnDemand的成本是很低的，只需要把本地的webdriver（接下来都会以自动化测试工具WebDriver做例子）改成他们的remote driver就ok了。我是直接用的他们提供的example脚本：https://saucelabs.com/docs/ondemand/getting-started/env/python/se2/mac

跑完脚本以后看结果，这里才是重点。每跑一次任务，在他们的系统里面都会生成一个Job，这个Job所包含的信息相当详细：

Build，如果你是通过CI系统来发起一次自动化测试的话，可以把Build的版本号记到Job里面
	
Tags，这次跑的是Smoke还是Full的测试呢？是一个RC版本还是Live版本
	
Custom Data，以上简单的信息都满足不了你的需求，可以自己传一个JSON格式的对象进去
测试出错怎么办？一切都在云？

视频回放功能 – 这个太好了，可以看看失败的测试当时是怎么跑的
	
Log – 每一个操作都有Log，用什么方法拿到一个元素，输入了些什么东西
	
截图 – 某些操作会带有截图，也很有用
而且这些Log和Video都是可以下载的。

以上就是Sauce OnDemand的简单介绍，那可能有人会说，这样的功能，我自己的本地跑测试就可以了，为什么还要花钱搞到云里面去？把自动化测试并行起来！

假如执行1个自动化测试用例需要1分钟；覆盖10个平台+浏览器，串行执行就需要10分钟。假如并行执行，只需要1分钟就完成了。听起来很有吸引力吧。这里有一个用Python并行执行测试大概例子（不完整，没有真的调用测试，但是演示了如何进行并行）：https://gist.github.com/511658 更多其他语言的并行测试例子：http://saucelabs.com/blog/index.php/tag/parallel-testing/

以上讲了那么多，貌似我说的是在测试“外网”站点啊！我不想先发布后测试，我要测试内网站点，怎么办？他们有个Sauce Connect可以搞定这个问题：） 另外还有一些API让用户获取测试结果。

总结：Sauce Labs提供了针对Selenium实施自动化测试的云服务，和别的云服务有点不一样，他们没有号称使用他们的服务可以降低成本

1.5、Browsershots【在线】

使用地址：http://browsershots.org/

这是一个在线测试工具，支持很多浏览器。



输入www.cnblogs.com测试一下：



相对前几个测试工具，个人感觉这个显得稍微逊色了一些。 

 

搜索试用了一些可以用于网页测试的小工具，其中比较好用的一些，记录如下：
###浏览器兼容性测试工具Browser Sandbox ###
安利指数 ★★★★☆

（补：在该文章发布后的一周后，该工具已开始收费，之前一年多的免费体验啊。尴尬.jpg）

简介:
Browser Sandbox是个插件，可以安装在Chrome下
功能：实现在一台机上测试IE、Chrome、FireFox、Safari、Opera所有版本的兼容性
工作原理：基于虚拟机技术，通过在浏览器下安装插件的方式来运行不同浏览器模块来进行测试
测试场景：浏览器兼容性测试
使用方法：

进入官网，点击任何一个RUN按钮，进行账号注册，登录以后就可以下载安装，安装之后，alt+window打开；想用什么浏览器就点run，选择下载到桌面；下载完成后点击就可以运行对应的浏览器。使用中亦可进入个人设置主页查看已下载的浏览器版本类型，进入多浏览器选择选择需要测试的浏览器类型和版本。
推荐理由:
解决以下困境：原本一台计算机的本地安装支持的浏览器种类有限而且通常只能安装一个版本的产品，有局限性；如果用一台专门的服务器，通过配置本机没有的浏览器、远程来解决该局限性，在不测试时会造成资源闲置、浪费；如果通过vmware虚拟机配置多浏览器环境，测试时经常面临卡顿局面。
可以测试指定的多种浏览器，而不用实际安装它，只是装个插件就可以了～
运行截图：



###二、线上响应式设计网站效果验证工具网站 ###
安利指数 ★★☆☆☆
在线移动手机页面测试网ResponsInator：提供了iphone，android，ipad，kindle及其多种设备上的预览效果。缺点是效果和真实的有些差距、提供的设备类型很有限。类似的还有Screenfly，可以选择手机、平板、PC或者TV，也可以输入自定义的大小、选择屏幕几寸等，但同样设备展示效果有限
respondpx：能让你自定义要显示的尺寸长宽px值，可以测试网页在不同尺寸的显示器上所呈现的效果。功能简单、但却很方便实用。类似的还有responsive，但仅提供常用的分辨率。
###三、移动端浏览器兼容性测试 ###
对于移动端的浏览器项目，我们测试时需要考虑哪些，网页需要适配哪些东西？

测试点总结如下：
1、分辨率、屏幕大小：
需和设计师、开发讨论需要兼容的分辨率和屏幕大小范围；
需确认iphone4、iPhone X 这些比较特殊的机型是否需要兼容；
可以参考用户统计数据来确认兼容范围，比如友盟数据中的top10机型、主流分辨率；

ps：

安卓常见的分辨率：

2560 x 1440、1920 x 1080、1280 x 720、（新增2960x1440、2040x1080）

ios常见的机型对应的分辨率：

4 4s   960640、

5 5c 5s se  1136640、

6 6s、

7 8  1334750、

6+ 6s+ 7+ 8+  19201080、

新增iPhone X 2436×1125

更详细的机型分辨率请查看——>手机屏幕尺寸对应表
2、浏览器类型：

（1）手机自带的系统浏览器：oppo、vivo、华为、小米、safri

（2）主流浏览器应用：google、QQ、UC、火狐、猎豹、360
3、其他：

（1）从微信手机端、电脑端打开

（2）iPad等其他移动设备是否需要兼容

 

常见的浏览器兼容性测试工具有以下几种

IETester

这是我最先用的测试浏览器兼容性的工具，想必也是大家用的最多的一个，IETester是一个免费的Web浏览器调试工具,可以模拟出不同的js引擎来帮 助程序员设计效果统一的代码。IETester可以在独立的标签页中开启IE5.5、IE6、IE7，IE8 beta2这4个不同版本的IE。可以方便的解决IE浏览器的兼容问题。



 

Spoon Browser Sandbox

点击你需要测试的浏览器环境，安装插件就可以进行测试了。帮助你测试网页在Safari、Chrome、Firefox和Opera浏览器中是否正常，IE以前也有的，网站上说应微软的要求去掉了。兼容以下浏览器



 

SuperPreview

这是为微软自己发布的跨浏览器测试工具，您可以同时查看您的网页在多个浏览器的呈现情况，对页面排版进行直观的比较。



 

BrowserShots

这是一个在线测试工具，支持很多浏览器。



 

 

Browsera

这是一个可测试您的网站的跨浏览器布局的工具，您会看到您网站上存在的兼容性错误。



 

想了解更多咨询的同学扫描下方二维码，可以加Q群领取学习资料：753665853  备注：CSDN  



 

最近实习的公司测试部的同事需要进行一些测试产品浏览器兼容性方面的工作，之前公司一直都是使用下载不同版本的浏览器来进行测试。这样效率太低了，所以同事过来询问有没有好的测试方法。在下载使用对比了一些浏览器兼容性测试的工具，发现SpoonBrowserSandbox比较能满足我们在主流浏览器进行兼容性测试的需求。写篇博客记录下安装与使用过程。
1. 打开https://turbo.net/进入官网，点击Download for Windows下载客户端。

2. 此处需创建用户才可下载。

3. 下载完成后打开.exe文件，点击continue即可。

4. 回到网站首页点击Open Workspace。

5. 选择需要用的浏览器，此处以Chrome为例。

6. 点击所选浏览器进入以下界面，在Relases处可选择该浏览器不同的版本。

7.  点击Add to Workspace。

8. 添加成功后，点击右上角头像处，选择My Dashboard进入Dashboard界面。

9. 进入Dashboard后点击右上角小齿轮，在Launch处选择MyMachine。这样就能在本机客户端上模拟不同版本的浏览器。

10. 刚刚添加的浏览器也出现在Dashboard处，点击Run运行。

11. 此时会出现以下画面，按以下操作点击选项即可。



12. 等待连接完后，会弹出相应版本浏览器界面。