1. 首页
  2. css

CSS交叉浏览器测试和交叉浏览器测试

假设你在Mac上做开发工作,但是你想在没有macOS版本的MicrosoftEdge中测试一些设计。反之亦然!你在个人电脑上工作,你需要在Safari上进行测试,Safari不再是Windows版本了。
这是一个典型的问题,我已经处理了十年了。我记得买了一个windowsvista,买了一个管理虚拟机的软件,花了好几天的时间建立了一个测试环境。你仍然可以走那条路,如果你,你知道,爱痛苦。或者您可以使用CrossBrowserTesting,为各种各样的浏览器/平台/版本提供一个超级健壮的测试环境,而无需离开您喜爱的浏览器。
这真是太棒了。
开始吧,最基本的事情就是选择一个浏览器/平台,指定一个URL,然后启动它!
测试运行后,您可以按照自己的想法与它进行交互。点击,滚动,输入表格…这是一个真正的浏览器!您可以访问所有可能怀疑的开发人员工具。例如,你可以打开Edge中的DevTools,四处寻找一个bug。
当你需要这样做测试时,很可能你是在开发中,而不是在生产中。那你怎么测试呢?当然,crossbrowser的服务器看不到您的本地主机!好吧,如果你允许的话,他们可以。它们有一个浏览器扩展,允许您只需单击一次即可允许测试本地站点。
我发现自己接触CrossBrowserTesting的一件事就是让布局在不同的浏览器中工作。如果你没听说过,CSS网格就在这里!很多浏览器都支持它,但不是所有浏览器都支持,而且方式也不完全相同。
交叉行测试是帮助我解决这个问题的完美工具。我可以打开我正在做的东西,做出改变,然后让它按我需要的方式工作。也许在各种浏览器中复制布局,或者同样可能,制作一个不同但看起来很好的回退。
请注意,演示上面的屏幕截图显示的是CodePen。这与CrossBrowserTesting允许您免费在CodePen上进行测试有关!这是一个很好的使用实例,比如Live View,你可以使用一支笔,保存它,并将更改立即反映在Live View预览中,即使通过交叉浏览器测试也很好。
Live testing很好,但是也有基于屏幕截图的视觉测试,如果你想,比如,一次在几十个浏览器中测试一个布局。一次查看缩略图网格更实用!
还有更高级的东西。CrossBrowserTesting具有自动化的测试特性,使得在真实浏览器上进行功能测试和可视化测试变得简单。使用开源测试框架Selenium,我可以用自己选择的语言编写脚本,模仿真实用户的行为:登录应用程序、购买计划和创建新项目。然后我可以在CrossBrowserTesting上运行测试,确保这些操作在浏览器和设备之间工作。因为CrossBrowserTesting在云端,所以我可以针对能够带来收入的生产网站和应用程序运行测试。
功能测试是一个救命稻草,可以确保一切正常工作,并且您的客户可以正确地与您的产品交互。一旦这些测试运行,我甚至可以看到失败的视频或屏幕截图,并从那里开始调试。
直接链接→

CSS交叉浏览器测试和交叉浏览器测试 为WP2原创文章,链接:https://www.wp2.cn/css/css%e4%ba%a4%e5%8f%89%e6%b5%8f%e8%a7%88%e5%99%a8%e6%b5%8b%e8%af%95%e5%92%8c%e4%ba%a4%e5%8f%89%e6%b5%8f%e8%a7%88%e5%99%a8%e6%b5%8b%e8%af%95/