VSCode自动化：实现点击VSCode图标——基于Electron框架的应用程序的UI自动化

这是小编第一次在CSDN上写博客，一直找不到啥写的，今天终于找到可以写的东西了，希望对大家有帮助，有说的不对的地方还请大家不吝赐教！

因为最近在工作上需要对新研发的VSCode插件进行测试，一直都是手工测试，而版本迭代频繁，为减少手工测试的繁琐，以及减少可能漏测的场景，所以想着对VSCode软件做自动化。

VSCode（Visual Studio Code）是基于Electron框架开发的一个针对于编写现代Web和云应用的跨平台源代码编辑器，而Electron 是一个基于Chromium内核的开源框架，它允许开发者使用 HTML, CSS 和 JavaScript 等前端技术来开发跨平台的桌面 GUI 应用程序。所以VSCode的界面元素跟谷歌浏览器一样，可以使用selenium来进行定位和模拟用户操作。

这里以python为例，先安装selenium：

pip install selenium

VSCode也跟浏览器一样，有自带的开发者工具可以查看界面元素布局的代码。打开VSCode，在“Help”下的“Toggle Developer Tools”就是开发者工具：

selenium自动化框架在这里就不多赘述了，相关使用可自行上网了解。现在直接上代码：

from selenium import webdriver
from selenium.webdriver.common.by import By

# 创建ChromeOptions对象，可在对象里添加一些选项等
options = webdriver.ChromeOptions()
# 添加要启动的二进制文件文件路径，这里是VSCode的路径，例如下面是我本地电脑的路径
options.binary_location = r"D:\Program Files\Microsoft VS Code\Microsoft VS Code\Code.exe"
# 创建浏览器对象
driver = webdriver.Chrome(options=options)
# 设置隐式等待时间为10s
driver.implicitly_wait(10)
# 点击“File”图标
driver.find_element(By.XPATH, r'//*[@id="workbench.parts.titlebar"]/div/div[2]/div[1]/div[1]/div').click()

如果直接运行上面代码，一般不出意外的话要出意外了，有的小伙伴开始可能会遇到如下SessionNotCreatedException的问题：

selenium是通过调用驱动器ChromeDriver来启动浏览器的，这里报错是因为驱动器的版本跟浏览器的版本不对应。要说清楚的是，这里的“浏览器”的概念并非你平时上网用的Chrome浏览器，而是SVCode，如果你不知道VSCode“浏览器”的版本是多少，我们也可以直接在这段报错中找到。报错的意思是：当前版本的ChromeDriver仅支持Chrome 126版本，当前浏览器版本是118.0.5993.159。从而可知当前VSCode“浏览器”版本为118.0.5993.159，然后下载对应版本的ChromeDriver放在python的安装目录下就可以了，例如我的是这样的：

各个版本的ChromeDriver下载地址如下：

114及之前版本

126及之后版本

其他版本

如果发现ChromeDriver的版本号跟浏览器的版本号不能完全对应的话，通常只需要版本号前缀对应的就能用的，也就是版本号第一个点前面的数字。

如果ChromeDriver不在python的安装路径下，也可以在代码里指定ChromeDriver的路径，可以通过创建Service对象来实现，完整的代码如下：

from selenium import webdriver
from selenium.webdriver.chrome.service import Service
from selenium.webdriver.common.by import By

# 创建ChromeOptions对象，可在对象里添加一些选项等
options = webdriver.ChromeOptions()
# 添加要启动的二进制文件文件路径，这里是VSCode的路径，例如下面是我本地电脑的路径
options.binary_location = r"D:\Program Files\Microsoft VS Code\Microsoft VS Code\Code.exe"
# 创建Service对象，参数executable_path是驱动器的路径，如下是我自己的路径
service = Service(executable_path=r'D:\Chrome\chromedriver-win64\chromedriver.exe')
# 创建浏览器对象
driver = webdriver.Chrome(options=options, service=service)
# 设置隐式等待时间为10s
driver.implicitly_wait(10)
# 点击“File”图标
driver.find_element(By.XPATH, r'//*[@id="workbench.parts.titlebar"]/div/div[2]/div[1]/div[1]/div').click()

代码最后一行是点击如下VSCode的“File”图标：

值得注意的是，上面代码里如果不设置浏览器和驱动器的路径的话，使用默认路径，默认打开平时使用的Chrome浏览器，也就是你平时用来上网的Chrome浏览器。所有这就是为什么平时用selenium来做Web自动化的时候不需要设置这些路径。

运行代码看一下效果：

可以看到确实点击了“File”，但是一闪而过，这不一定是我们想要的结果，通常我们希望点击“File”，在弹出的选项卡里继续点击选择。实际上，我们平时操作VSCode的经验告诉我们，点击“File”后，只要鼠标不进行其他操作，“File”选项卡就会一直展开。这里要引入鼠标悬停的概念，所谓悬停，顾名思义就是停止不动的意思，简单来说，只要鼠标保持不动，就可以让“File”选项卡一直展开。悬停可以通过引入ActionChains类解决，完整代码如下：

from selenium import webdriver
from selenium.webdriver.chrome.service import Service
from selenium.webdriver.common.by import By
from selenium.webdriver.common.action_chains import ActionChains

# 创建ChromeOptions对象，可在对象里添加一些选项等
options = webdriver.ChromeOptions()
# 添加要启动的二进制文件文件路径，这里是VSCode的路径，例如下面是我本地电脑的路径
options.binary_location = r"D:\Program Files\Microsoft VS Code\Microsoft VS Code\Code.exe"
# 创建Service对象，参数executable_path是驱动器的路径，如下是我自己的路径
service = Service(executable_path=r'D:\Chrome\chromedriver-win64\chromedriver.exe')
# 创建浏览器对象
driver = webdriver.Chrome(options=options, service=service)
# 设置隐式等待时间为10s
driver.implicitly_wait(10)
# 点击“File”图标
driver.find_element(By.XPATH, r'//*[@id="workbench.parts.titlebar"]/div/div[2]/div[1]/div[1]/div').click()
action = ActionChains(driver)
action.move_to_element(element).perform()
action.click(element).perform()

现在就可以实现选项卡一直展开了：

元素定位的技巧很多，这里就简单提了一点，真所谓实践出真知，很多经验还是需要在不断的实践中总结出来。

另外，这里的选项卡是动态元素，我们在使用开发者工具查看元素的时候，需要使用提前在Console框里运行冻结窗口的函数：

// 设置等待时间为1000毫秒，也就是1秒
// 这里的意思是1秒后冻结窗口，时间据情况设置
// 通常可以设置的长一点，让我们有时间调出动态元素
setTimeout(function(){debugger},1000)

这里就简单提一下冻结窗口，如果没接触过Web自动化，可以在网上了解有关selenium自动化框架的使用，查找动态元素会涉及冻结窗口。

以上就是以VSCode为例的Electron应用程序的自动化介绍，希望对大家有帮助！