使selenium操作electron应

见贤思齐

背景近期的动化测试项中有个关于测试内部IM通信软件的需求，在了解到各个客户端的相应技术栈实现以后，在mac中的应使的是electron 技术，我们也对相应的技术进调研，此记录下在关于electron应的动化测试。electron 简介electron利Chromium和Node.js,为使 JavaScript，HTML 和 CSS 构建跨平台的桌应程序，可以实现代码次编译，多端运的效果，可以成mac app, windows exe等，但是它编译出来的件由于包含Chromium，所以体积般会较。使selenium操作Chrome浏览器先确定下系统中的chrome浏览器的版本，由于selenium 操作Chrome浏览器需要使到ChromeDriver，不同版本的Chrome对应着不同的ChromeDriver，如果不对应的话可能会失败。然后到 https://chromedriver.chromium.org/downloads 这下载对应的ChromeDriver，国内的户如果访问不了的话可以使淘宝镜像源 https://npm.taobao.org/mirrors/chromedriver需要将chromedriver放到环境变量，如果不放到环境变量的话，也可以在代码中指定chromedriver的路径fromseleniumimportwebdriverfromselenium.webdriver.common.keysimportKeysimporttimedriver=webdriver.Chrome()#webdriver.Chrome在初始化的时候也可以指定chromedriver路径，这种对于系统中有多个版本的chromedriver常有#driver=webdriver.Chrome(executable_path="/Users/qihoo/Desktop/chromedriver94")driver.get("https://www.google.com")assert"Google"indriver.titleelem=driver.find_element_by_name("q")elem.clear()elem.send_keys("360")elem.send_keys(Keys.RETURN)assert"Noresultsfound."notindriver.page_sourcedriver.close()使selenium操作electron应想要使 selenium 操作electron app, 先要确认的是该app使的是哪个版本的Chromium那么该如何确认electron应的Chromium版本号呢？般情况下，我们是测试的app都是由开发打包之后的app，对于这种应，我们很难在代码上做些hook,如果我们打开chrome devTools板，(mac下使option+command+i), 在console标签中输 process.versions 可以查看到 chrome 版本，那么最好不过了，可以直接去下载对应的chromedriver, 但是更多的时候这个 process 对象是没有定义的，如果想要在控制台使process，在编写app时，应该加上functioncreateWindow(){constwin=newBrowserWindow({width:800,height:600,webPreferences:{preload:path.join(__dirname,'preload.js'),nodeIntegration:true,contextIsolation:false//加上这个配置才可以在控制台使process对象}})更多的时候我们可以随便找下版本的 chromedriver, 在初始化的过程中，如果程序报错了，会提示出app的是哪个版本的chrome。selenium.common.exceptions.SessionNotCreatedException:Message:sessionnotcreated:ThisversionofChromeDriveronlysupportsChromeversion94Currentbrowserversionis80.0.3987.86withbinarypath/Applications/360家.app/Contents/MacOS/360家这有显示我当前的 chromedriver 版本号是94，但是要被测试的应的版本号是80，所以就知道了需要下载哪个版本的 chromedriver了。我们使electron来创建个mac 应，代码使官提供的示例,https://www.electronjs.org/zh/docs/latest/tutorial/quick-start但是打包我这和官的不太样。1. 创建项mkdirelectroltestcdelectrontestnpminit-y2. 安装electron 和相应的打包具npminstallelectronelectron-packagerelectron-installer-dmg--save3. 修改 package.json{"name":"electroltest","version":"1.0.0","description":"","main":"main.js",//修改为main.js"scripts":{"test":"echo\"Error:notestspecified\"&exit1","start":"electron.",//添加个启动指令"build":"electron-packager.",//添加打包指令"dmg":"electron-installer-dmg./electroltest-darwin-x64/electroltest.app/electroltest"//添加成dmg指令},"author":"","license":"ISC","dependencies":{"electron":"^15.1.2","electron-installer-dmg":"^3.0.0","electron-packager":"^15.4.0"}}4. 添加 main.jsconst{app,BrowserWindow}=require('electron')constpath=require('path')functioncreateWindow(){constwin=newBrowserWindow({width:800,height:600,webPreferences:{preload:path.join(__dirname,'preload.js')}})win.loadFile('index.html')}app.whenReady().then(()=>{createWindow()app.on('activate',()=>{if(BrowserWindow.getAllWindows().length===0){createWindow()}})})app.on('window-all-closed',()=>{if(process.platform!=='darwin'){app.quit()}})5. 添加index.html Hello360质量效能! WeareusingNode.js,Chromium,andElectron.6. 添加 proload.jswindow.addEventListener('DOMContentLoaded',()=>{constreplaceText=(selector,text)=>{constelement=document.getElementById(selector)if(element)element.innerText=text}for(consttypeof['chrome','node','electron']){replaceText(`${type}-version`,process.versions[type])}})写完代码以后可以使npm run start 看下效果，是否可以正常的显示electron应如果正常显示则可以进打包操作7. 打包electron应这只是将electron 应打成app，并没有成dmg安装包npmrunbuild#这是由于在package.json中定义了build指令，如果没有定义也可以运npxelectron-packager8. 成mac下的 dmg 安装包npmrundmg#同build指令，这也可以使npxelectron-installer-dmg./electroltestdarwin-x64/electroltest.app/electroltest如果切顺利，则会在当前录下成 electroltest.dmg 件 ，双击这个件就可以安装在mac中了接下来我们来写个简单的测试，就是打开app，查看下html，再跳转到google，输些字，再点击搜素按钮该electron 应安装的位置是/Applications/electroltest.app/Contents/MacOS/electroltest自己根据安装的位置进行相应的修改1. 安装 seleniumpipinstallselenium2. 写测试例#-*-coding:utf-8-*-"""------------------------------------------------- File Name：eletestDescription:electrol动化测试Author:qihoo date：2021/10/14-------------------------------------------------"""fromseleniumimportwebdriverfromselenium.webdriver.common.keysimportKeysimporttimeoptions=webdriver.ChromeOptions()options.binary_location="/Applications/electroltest.app/Contents/MacOS/electroltest"driver=webdriver.Chrome(chrome_options=options)time.sleep(3)print(driver.page_source)driver.get("http://www.google.com")elem=driver.find_element_by_name("q")elem.clear()elem.send_keys("360")#这也可以输中elem.send_keys(Keys.RETURN)driver.close()driver.quit()这较重要的是定义 options.binary_location 需要设置为 electron 应的路径使selenium操作已经打开的electron应以上式我们其实是重新打开了某个app， 但是更多的时候，我们是期望测试个已经打开的app，试想下如下的场景，某个app需要登录，登录的式较复杂，扫码登录或者短信登录，或者有验证码，但是如果成功登录以后，段时间以后再次打开就不会进到登录界，此时，我们不希望每次运例的时候，都重新登录，这时，我们就需要使 selenium 来测试个打开着的应。使 electron 构建的app， 在启动的时候可以加上个于调试的端/Applications/electroltest.app/Contents/MacOS/electroltest--remote-debugging-port=9222这样就可以正常的启动应的同时，也会开启远程调试功能，我们在使selenium时，就可以直接对该app进测试了不需要再次重新打开个新的app这的端需要个没有被占的端,初始化driver时可以options=webdriver.ChromeOptions()options.add_experimental_option("debuggerAddress","127.0.0.1:9222")#设置debuggerAddressdriver=webdriver.Chrome(chrome_options=options)通过上的设置以后，我们就可以直接在打开着的应上进测试了，常适合那种登录较复杂的应。总结使 selenium 测试 electron 应的测试有个总结找到对应的 chromedriver；通过 binary_location 参数设置app路径；对于测试打开着的app， 需要在app启动的时候添加远程调试参数 --remote-debugging-port参考文献https://selenium-python-zh.readthedocs.io/en/latest/index.html#https://www.sqlpy.com/blogs/894258980