一文读懂UI自动化测试三种核心实现原理：Native、Webdriver和CDP

相信80%的UI自动化测试工程师在进行岗位面试的时候都会重点讲解自己会使用哪些工具，例如cypress 、selenium 、playwright等等。其实这只是初级段位，如果大家想谈得再高大上一些，就可以谈谈这些工具与浏览器talk的原理了，绝对会得到面试官的重视！目前主流主动化测试工具与浏览器沟通的原理主要包括：Native、Webdriver以及CDP，使用这三种方式的典型代表工具分别是：cypress 、selenium 和playwright。今天我就对此进行总结：

Native（JavaScript loaded in the same browser application)）

测试代码和web程序在相同的生命周期里执行，他们共享进程和domain。Cypress测试代码和应用程序均运行在由Cypress全权控制的浏览器中，且它们运行在同一个Domain下的不同iframe内，所以Cypress的测试代码可以直接操作DOM，Windows Objects甚至Local Storages而无须通过网络访问，这就是Cypress可以运行的更快的原因。Native 方式与Webdriver和CDP运行原理完全不同，后面就不再对Native 进行详细介绍了。

Webdriver

WebDriver协议旨在从用户的角度驱动浏览器。它本身是http协议，数据传输使用json，提供了提供一系列远程控制接口，抽象出与应用程序的常见交互（例如，导航、单击或读取元素的状态）。由于它是一个Web标准，它在所有主要浏览器供应商中得到了很好的支持，并且还被用作使用Appium的移动自动化的底层协议。要使用WebDriver协议，我们需要一个代理服务器（即不同的浏览器提供各自的驱动）来翻译所有命令并在目标环境（即浏览器或移动应用程序）中执行它们。

• Chrome – ChromeDriver
• Firefox – Geckodriver
• Microsoft Edge – Edge Driver
• Internet Explorer – InternetExplorerDriver
• Safari – SafariDriver

Chrome DevTools Protocol

ChromeDevTools Protocol简称CDP，它允许对Chromium，Chrome和其他基于Blink的浏览器进行检测，探测，调试和配置。许多现有项目目前使用该协议。 Chrome的开发者工具就是使用此协议，该团队也负责维护其API。Chrome浏览器可以远程调试的方式启动, 实际上在浏览器内部启动了一个采用DevTools的服务器, 任何符合该协议的websoket通讯都可以被Chrome响应,这样你可以向Chrome发送命令, 执行操作, 实现一些自动化浏览器的操作，目前越来越多的浏览器支持了CDP协议，除了chrome，还包括：edge、firefox、safri。

Webdriver与CDP比较

WebDriver协议与CDP协议之间的主要区别在于，WebDriver协议需要一个中间人，例如浏览器驱动程序(例如chrome-driver)，该服务器位于自动化脚本和启用浏览器控制的浏览器之间；使用CDP协议可以直接来控制浏览器。

下面对支持webderiver协议和cdp协议的自动化测试工具进行一下比较

大家可以看到从selenium webdriver4 和Cypress v7开始也已经支持cdp协议了。

最后的总结：鱼和熊掌不可兼得

从一个更高级别的角度来看，测试越接近浏览器，测试就越稳定，但对跨浏览器的支持非常少。另一方面，我们的测试和浏览器之间的抽象程度越高，测试就会变得越不稳定，但也会得到更多的跨浏览器支持。