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

CDP官方文档如下：

https://chromedevtools.github.io/devtools-protocol/

协议基础

当使用--remote-debugging-port= 0参数启动Chromium/Chrome时，它启动Chrome DevTools协议服务器并将其WebSocket URL打印到STDERR。输出看起来像这样：DevTools listening on ws://127.0.0.1:36775/devtools/browser/a292f96c-7332-4ce8-82a9-7411f3bd280a

客户端可以创建WebSocket以连接到该URL并开始发送CDP命令。 ChromeDevTools协议主要基于JSONRPC：每个命令都是一个带有id/方法和可选参数的JavaScript结构。我们可以用如下js代码，通过websocket协议完成与浏览器的交互

此脚本通过DevTools协议发送Targets.setDiscoverTargets命令。浏览器将首先为每个现有目标发出一个Target.targetCreated事件，然后响应该命令：

connected!

Sending Target.setDiscoverTargets

{"method":"Target.targetCreated","params":{"targetInfo":{"targetId":"38555cfe-5ef3-44a5-a4e9-024ee6ebde5f","type":"browser","title":"","url":"","attached":true}}}

{"method":"Target.targetCreated","params":{"targetInfo":{"targetId":"52CA0FEA80FB0B98BCDB759E535B21E4","type":"page","title":"","url":"about:blank","attached":false,"browserContextId":"339D5F1CCABEFE8545E15F3C2FA5F505"}}}

{"id":1,"result":{}}

模拟chromedriver实现方案

• 环境搭建

从上面的例子中通过websocket与chrome直接交互实现是比较复杂的，因此各种主流语言都提供了类库来简化该过程，详细信息请参考：

https://github.com/ChromeDevTools/awesome-chrome-devtools#chrome-devtools-protocol

在这里我们使用python的pychrome 来实现与chrome的交互，也可以理解我们自己开发了一个chromedriver！

Pychrome详情请参考：https://github.com/fate0/pychrome

安装pychrome

pip install -U pychrome

• Selenium实现场景

实现场景：在百度输入框中搜索selenium。

我们先回顾一下Selenium的代码实现过程如下：

1.把chromedriver.exe放到系统环境变量中

2.编写py代码

from selenium import webdriver

import unittest

class UntitledTestCase(unittest.TestCase):

      def setUp(self):

            self.driver = webdriver.Chrome()

            self.driver.implicitly_wait(30)

    def test_untitled_test_case(self):

             driver =self.driver

             driver.get("https://www.baidu.com/")

             driver.find_element_by_id("kw").clear()

             driver.find_element_by_id("kw").send_keys("selenium")

             driver.find_element_by_id("su").click()

     def tearDown(self):

              self.driver.quit()

3.执行自动化脚本

Selenium的原理如下：

从上图可知，selenium最后是通过chromedriver完成了和chrome浏览器的交互！

关于selenium的详细原理分析可以参考文章：

Selenium原理精讲

• cdp实现场景

接下来我们通过cdp直接跟chrome浏览器的交互，模拟chromedriver，代码如下：

import pychrome

browser = pychrome.Browser(

url="http://127.0.0.1:9222")

#打开一个新的浏览器tabtab = browser.new_tab()

tab.start()

tab.Network.enable()

#访问baidu

tab.Page.navigate(url="https://www.baidu.com", _timeout=5)

tab.wait(5)

#在搜索框中输入selenium

tab.Runtime.evaluate(expression='document.getElementById("kw").value="selenium"')

tab.wait(1)

#点击‘百度一下’按钮

tab.Runtime.evaluate(expression='document.getElementById("su").click()')

tab.wait(5)

tab.stop()

browser.close_tab(tab)

执行代码前，必须设置chrome属性，如下图所示：

接下来启动chrome。

最后执行py脚本，大家可以看到：

浏览器自动打开新的tab页>在百度输入框中搜索selenium>关闭tab页这一过程！这也就是selenium操控浏览器的原理了！原创不易，如果文章帮到了你，欢迎转发点赞，让更多的朋友受益！