【.com快译】据StatCounter统计：在亚洲，82%的手机用户使用Android，iOS用户数量为17%，相比之下其他操作系统低于1%。在美国，61%的人使用iOS，只有38%的人使用Android。而仍有10.5%的Windows用户仍在使用Windows7。在用户设备的默认/偏好分辨率方面，有360x640像素、1366x768像素和1920x1080像素等不同规格。可见，在全球范围内，Android主导着操作系统市场，其次是Windows、iOS和OSX。同样，浏览器市场由Chrome主导，其次是Safari、Firefox、SamsungInternet、Edge、Opera和UC浏览器。最常见的跨浏览器兼容性问题如今，各种Web应用程序通常由复杂的CSS、HTML5、JS和其他几个框架构建。但是，并非每个客户端浏览器都会自我更新以支持开发人员部署的每个新功能。相应地，我们需要通过测试提前处理以下常见的跨浏览器兼容性问题：各种版本的浏览器不支持某些HTML5标签。不支持复杂的CSS、AJAX、JS、Flex功能，或实现行为不同。并非所有浏览器都支持所有图像格式（尤其是PNG问题在某些较旧的IE浏览器上很普遍）并非所有媒体格式都受支持（例如iPhone和黑莓上的Flash问题）设备限制。例如，针对残障人士的屏幕阅读器应用程序可能不支持正确显示网站内容。因此，在复杂的数字设备和用户偏好的背景下，为保证用户的UI/UX，企业需要认真考虑以下问题：如何以高性价比的方式为所有用户设计、开发和部署健壮的应用程序方式？如何？确保应用程序可以被所有用户使用？如何在客户使用的各种设备、操作系统、浏览器和屏幕分辨率上提供无缝的用户体验？虽然在不同的场景下，上述问题的优先级不同，但都引出了跨浏览器兼容性测试（https://www.lambdatest.com/feature）的话题。什么是跨浏览器测试？简而言之，跨浏览器兼容性测试是在各种设备、操作系统、浏览器和不同版本上检查、验证和迭代增强Web应用程序，使其能够为所有用户提供正常服务的一种方法。例如，对于像Facebook这样拥有数十亿用户的大型应用程序，理想情况下我们应该对“浏览器A、版本B、操作系统C、屏幕分辨率D”的所有组合进行测试。手动与自动跨浏览器测试跨浏览器测试分为三大类：探索性测试、视觉测试和功能测试。除了需要手动完成的视觉测试外，这两种类型的测试都可以自动化。人工测试的缺点主要体现在：不仅耗时耗资源，而且测试的覆盖面可能不够全面。因此，我们通常需要采用混合测试策略。也就是说，进行跨浏览器兼容性测试的工程师往往需要具备编写脚本的能力，能够使用Selenium等编程语言（如：Java、Python、C#、JS、PHP等），通过自动化方法，执行各种测试任务。相应地，他们可以：自动查看目标站点的所有HTML、JS和CSS代码，并在不同浏览器上显示和运行时尽早发现错误和警告。自动截取Web元素的屏幕截图以进行交叉验证。一个人来判断测试站点对残疾人的美学和操作友好性。在此基础上，自动化跨浏览器兼容性测试的好处主要体现在以下几个方面：提供无缝的用户体验，保证内部版本的兼容性和质量。尽早识别和评估可用性或功能风险，然后根据风险的优先级修复它们。作为CI/CD流水线实施的关键阶段，自动化测试可以通过将Selenium等自动化工具集成到DevOps自动化策略中来缩短代码发布周期。测试团队可以更专注于编写健壮的脚本，将繁琐的测试基础架构留给LambdaTest等云测试自动化服务。通过基于云端的解决方案，我们不仅可以避免人为错误，还可以一次性测试超过2000种浏览器和设备的组合，确保测试覆盖率和准确性。如何进行有效的跨浏览器兼容性测试？通常，我们需要通过以下四个阶段来完成跨浏览器测试。设计此阶段涉及彻底调查应用程序的目标市场、收集所需的可用性要求以及设计测试路线图以确保可以成功开发和部署应用程序。例如，如果您正在为印度市场（许多人仍然使用IE）构建B2B产品，并且您需要在产品中提供WebGL支持的3D动画效果。那么，你需要考虑的一个因素是：是否要支持IE11之前的版本，如果实在无法支持，产品应该能够让应用在旧版本上不显示这个功能，以免破坏用户的UI/UX。在这个开发阶段，您需要将应用程序分解成单独的组件，以分解不同的功能模块。基于此，您可以为可能无法在各种浏览器或设备上很好地呈现的功能设计独立的代码解决方案。此外，开发者还需要考虑到硬件的限制，有些功能在某些设备上可能根本无法实现，因此需要提前设计替代方法。在这个阶段，测试自动化测试工程师会通过以下方法对每一个新建的功能进行测试：首先，在稳定的主流浏览器（如：Safari、Chrome、Firefox）上测试应用，确认应用不会有障碍.出现的错误。接下来，尝试lo-fi（低保真）可访问性测试以交叉验证您的应用程序需要最少的辅助技术（例如，键盘或屏幕阅读器环境）。通过模拟器或虚拟机测试不同设备、浏览器和版本的组合（当然，如果你买得起真实的物理设备）。使用自动化测试工具（如：SeleniumGrid）或商业服务（如：LambdaTest）进一步提高浏览器环境跨浏览器兼容性测试的准确性、速度和覆盖率。其中，跨浏览器兼容性测试的要点列表可以归纳如下：HTML、xHTML、jQUERY、CSS、JS、AJAX验证SSL证书验证HTML字符编码和日期格式在不同屏幕分辨率下呈现响应式应用布局在不同浏览器中的一致性，包括：字体样式、颜色渲染、导航、客户端表单验证、缩放功能，以及其他效果和功能，包括：动画、链接、插件、脚本等。不断迭代测试和这个阶段开发的过程包括找到我们在上述测试阶段产生的错误、它们的根本原因，以及缩小存在它们的浏览器版本、设备和分辨率的范围。当然，错误的原因可能不是来自应用程序本身，也可能是浏览器或设备制造商造成的。因此，我们对类似的浏览器或设备进行深入测试，以评估错误的大小并报告给相关开发团队。推荐用于跨浏览器兼容性测试的工具和基于云的服务目前最流行的用于web和移动测试的开源框架有：SeleniumAppium商业基于云的跨浏览器测试应用，例如基于云的跨浏览器如LamdbaTest一种测试解决方案，提供高级功能，例如AI驱动的测试、团队协作、增强的可见性、并行测试、自动化测试、按需缩放、布局屏幕截图捕获和记录测试会话。下面，我为大家列出了在不同浏览器中提交和报告错误的相应链接：MozillaChromeEdgeOperaSafari以及以下是主要浏览器平台的开发者测试链接。您可以有针对性地测试您即将推出的应用程序：MozillaChromeEdgeOperaSafari跨浏览器测试示例一般情况下，我们会首先使用免费版的LambdaTest在云端设计自动化测试。接下来，我们将使用Python在“jqueryui.com”上构建具有拖放功能的HTML元素。然后我们将在Chrome和Firefox中测试此功能。当然，您也可以在其他浏览器版本、操作系统和屏幕分辨率上进行测试。下面是部署在虚拟环境中的lambdatest_crossbrowser.py文件中的Java测试代码。fromseleniumimportwebdriverfromselenium.webdriver.common.action_chainsimportActionChainsimporttimeusername="hustlewiz247"accessToken="1BtTGpkzkYeOKJiUdivkWxvmHQppbahpev3DpcSfV460bXq0GC"gridUrl="hub.lambdatest.com/wd/hub"browsers=[{"version:"0",":"browser7",":{"browser":"Firefox","version":"71.0"}]forcapinbrowsers:desired_cap={'platform':"win10",'browserName':cap["browser"],'version':cap["version"],"resolution":"1024x768","name":"LambdaTestCrossBrowserCompatibilityTesting","build":"LambdaTestCrossBrowserCompatibilityTesting","network":True,"video":True,"visual":True,"console":True,}url="https://"+username+":"+accessToken+"@"+gridUrlprint("启动远程驱动平台rm:"+desired_cap["platform"]+"browser:"+desired_cap["browserName"]+"version:"+desired_cap["version"])driver=webdriver.Remote(desired_capabilities=desired_cap,command_executor=url)driver.maximize_window()driver.get('https://jqueryui.com/draggable/')driver.switch_to.frame(0)source1=driver.find_element_by_id('draggable')action=ActionChains(driver)action.click_and_hold(source1).move_by_offset(150,100).pause(2).move_by_offset(-10,-10).release().perform()print("拖动成功\n")time.sleep(5)driver.get('https://jqueryui.com/droppable/')driver.switch_to.frame(0)source1=driver.find_element_by_id('draggable')target1=driver.find_element_by_id('droppable')actions2=ActionChains(driver)actions2.click_and_hold(source1)。move_to_element(target1).pause(2).move_by_offset(20,20).release().perform()print("Draggedanddroppedsuccessfully\n")time.sleep(5)iftarget1.text=="Dropped!":print("TestExecutedExecutivedOn:"+str(cap["browser"]))time.sleep(2)driver.quit()以下Java代码是从Selenium库webdriver和actionchains类fromseleniumimportwebdriverfromselenium.webdriver.common导入的。action_chainsimportActionChains上面的代码导入了一个Python内置的包时间模块，可以暂停程序的执行指定的秒数。接下来，我们使用以下代码设置LambdaTest的用户认证码，配置用户名、accesstoken和gridUrl。您可以在LambdaTest的自动化仪表板(https://automation.lambdatest.com/)中找到它。username="yourusername"accessToken="youraccesstoken"gridUrl="hub.lambdatest.com/wd/hub"我们将在不同的浏览器中创建一个目录来交叉测试应用程序。这里，我们以Chromev71.0和Firefoxv71.0这两款浏览器为例，使用“browser”和“version”键值对指定要测试的目标浏览器及其具体版本。browsers=[{"browser":"Chrome","version":"71.0"},{"browser":"Firefox","version":"71.0"}]我们通过forcapinbrowsers:Dictionary,然后在功能上交叉测试Chrome和Firefox。在cap字典中，我们为lamdatest自动化测试的seleniumgrid指定了测试配置环境。下面代码中的“Platform”指定了目标操作系统，后面是：浏览器名称、分辨率等desired_cap={'platform':"win10",'browserName':cap["browser"],'version':cap["version"],"resolution":"1024x768","name":"LambdaTestCrossBrowserCompatibilityTesting","build":"LambdaTestCrossBrowserCompatibilityTesting","network":True,"video":True,"visual":True,"console":True,}我们通过如下URL的command_executor指定远程服务器的地址：url="https://"+username+":"+accessToken+"@"+gridUrl同时我们使用下面的Java代码创建一个浏览器驱动的实例：driver=webdriver.Remote(desired_capabilities=desired_cap,command_executor=url我们可以执行driver.maximize_window()来最大化浏览器窗口。为了得到远程浏览器中的URL测试拖拽功能，我们使用driver.get调用webDriver的get('URL')接口，这里，我们可以观察到网站有拖拽功能n在iF??rame中。因此，我们需要通过driver.switch_to.frame(0)切换到第0帧，才能与iFrame中的HTML元素进行交互。另外，我们也可以通过source1=driver.find_element_by_id('draggable')，找到可拖动的HTML元素。同时我们通过action=ActionChains(driver)创建Actionchains方法的别名。selenium中的Actionchains类可以实现与浏览器元素的硬件交互。下面的代码负责创建：单击可拖动元素，按住它一会儿，将源组件移动到另一个位置，释放它，并打印出信息性消息。实际操作时，可以点击截图，或调用触发邮件和通知的API，发送成功或失败通知。action.click_and_hold(source1).move_by_offset(150,100).pause(2).move_by_offset(-10,-10).release().perform()print("Draggedsuccessfully\n")如果你想在本地系统观察更细心的，可以调用“time”包中的“sleep”方法，通过time.sleep(5)，暂停一段时间。接下来，我们在浏览器中获取另一个URL——driver.get来测试“拖放”功能。前面提到，通过driver.switch_to.frame(0)，我们可以切换到iFrame的第0帧进行拖放元素交互。为了将source1（draggable）元素拖动到source2（droppable），我们可以使用下面的Java代码片段来获取可拖动HTML元素的位置和可拖动HTML元素的位置。source1=driver.find_element_by_id('draggable')target1=driver.find_element_by_id('droppable')为了把它放在特定的元素上，我们可以通过下面的Java代码创建一系列的拖动动作。actions2=ActionChains(driver)actions2.click_and_hold(source1).move_to_element(target1).pause(2).move_by_offset(20,20).release().perform()print("拖放成功\n")time.sleep(5)当源元素被放置在目的地时，我们通过将文本更改为“Dropped!”来交叉验证它。并在被测浏览器中显示输出消息。iftarget1.text=="Dropped!":print("TestExecutedSuccessfullyOn:"+str(cap["browser"]))time.sleep(2)我们使用driver.quit()退出启动的浏览器实例。具体加载执行的终端命令为：pythonyour_test_file_name.py。执行成功后，我们会在LambdaTest仪表盘上看到如下信息：同时，终端上显示信息为：可以看到，测试先在Chrome上运行，然后在Firefox上运行。事实上，LambdaTest还提供了一个函数生成器，可以帮助您轻松设置各种需要的浏览器和操作系统函数。总结作为一名测试人员，您经常负责确保被测应用程序能够在各种设备和浏览器上顺利运行。跨浏览器测试技能是测试人员武器库中最有效的武器之一。我们既需要对测试结果进行人工判断，也需要自动化工具来简化测试的相关基础设施，提升测试效率和能力，不断提高测试的覆盖率和准确率。原标题：ABeginner'sGuidetoAutomatedCross-BrowserCompatibilityTesting，作者：JaswantKaur
