Node使用Selenium进行前端自动化操作前言：最近项目中有类似的需求：需要在前端对某个用户下的商品数据进行批处理项目。手工处理的流程大概是先登录系统，获取当前用户下的商品列表，点击商品列表中的商品项进入详情页，对商品进行一系列操作，然后保存并退出。因为目前有20万多条数据，人工一条一条处理不太现实，所以希望通过写脚本的方式来处理。需求分析其实这个需求比较简单。主要有三点需要落实。一是如何登录，获取登录信息，查询当前用户下的商品数据；另一种是如何知道当前数据是否已经被处理，然后退出当前数据。加工流程；三是如何异步处理一批数据。所以需要做的工作就是模拟登录，调用商品列表的查询接口获取商品ID集合，然后循环当前集合，通过商品ID跳转到商品详情页，模拟点击操作页面按钮，监视完成的动作，并退出当前进程。Selenium简介什么是Selenium？Selenium使浏览器自动化。就是这样！你用这种力量做什么完全取决于你。它主要用于自动化Web应用程序以进行测试，但当然不仅限于此。无聊的基于Web的管理任务也可以（而且应该！）自动化。Selenium得到了一些最大的浏览器供应商的支持，他们已经采取（或正在采取）措施使Selenium成为其浏览器的本机部分。它也是无数其他浏览器自动化工具、API和框架的核心技术。翻译大概意思就是：Selenium可以使浏览器操作自动化。如何使用Selenium的功能完全取决于我们。它主要用于Web应用程序的自动化测试。但他的功能不仅限于此。那些繁琐的基于Web的管理任务也可以自动化。许多流行的浏览器已采取措施支持Selenium进行本地化。它也是许多浏览器自动化工具、API自动化和框架的核心技术。Selenium主要分为SeleniumWebDriver和SeleniumIDE。我主要使用Node来介绍SeleniumWebDriver的安装和使用。本文主要介绍Selenium结合Node的安装和使用。需要深入研究的同学请自行查看官网文档。Node环境搭建1.Node的安装这里不再赘述。点击链接查看官网下载安装方法。2.快速安装$npxexpress-generator或$npminstall-gexpress-generatorcreateproject:$express--view=ejsselenium-start$cdselenium-start$yarnstartproject:$DEBUG=myapp:*yarnstarthere，Node项目已创建。接下来我们可以在SeleniumWebDriver集成项目中集成SeleniumWebDriver1.安装selenium-webdrivery并添加selenium-webdriver2.下载并安装支持不同浏览器的驱动程序。（这里只介绍Chrome驱动）[ChromeDriver][3]下载并解压文件，将解压后的可执行文件放在/usr/bin目录下。或者设置相应的PATH路径，保证可执行文件在PATH路径下。开始进入我们刚刚创建的项目文件夹，目录如下：在页面中添加一个开始按钮，在按钮中添加事件。找到views/index.ejs，添加如下代码：（为了操作方便，引入了jquery和axios，需要自己下载准备）在app.js文件中添加对应的路由，导入路由chromeDrivervarchromeDriverRouter=require('./routes/chromeDriver');app.use('/chromeDriver',chromeDriverRouter);引入selenium-webdriver在routes/chromeDirver.js文件中，我们添加了一个方法handleBaiDuDriver，用于处理一些模拟百度搜索自动化的测试。首先我们需要引入selenium-webdriverconst{Builder,By,Key,until}=require('selenium-webdriver');//Builder：用于在文件顶部创建一个WebDriver实例。//By：表示如何查找页面的元素。//By.className(name)→By//By.css(selector)→By//By.id(id)→By//By.js(script,...var_args)→function(WebDriver):Promise//By.linkText(text)→By//By.name(name)→By//By.partialLinkText(text)→By//Key：代表键盘上的一系列键。//until:定义了一些工具类的方法。然后写我们方法体的内容。consthandleBaiDuDriver=async()=>{letdriver=awaitnewBuilder().forBrowser('chrome').build();try{awaitdriver.get('http://www.baidu.com');awaitdriver.findElement(By.id('kw')).sendKeys('webdriver',Key.RETURN);//正常使用awaitdriver.findElement(By.id('su')).click();awaitdriver.wait(until.titleIs('百度一下你就知道'),1000);}catch(error){console.log(error)}finally{awaitdriver.sleep(2000);等待驱动程序退出（）；}}启动服务，查看效果。启动服务后，在梦中可以看到如下界面。点击页面上的【点击开始】按钮，最后可以看到如下界面。我延迟了两秒钟进行演示。生成的gif图片超过9M，无法上传。后面大家可以下载源码运行看看效果。获取登录信息以上是selenium-webdriver的简单集成。前面我们提到了在实际需要中如何获取登录信息。访问产品列表页面时需要登录验证。如果没有登录，会跳转到该界面。由于我们的登录页面是通过iframe嵌套引入的。由于我还没有了解如何处理iframe中的操作，所以我无法模拟用户名和密码的输入。查看API文档，WebDriver会有一个管理方法：this.manage()→Options这个方法会返回一个Options实例，方法如下：有cookies的操作方法。因此，可以通过首次输入用户信息并缓存来保存登录状态。下次打开页面时直接从缓存中获取cookie信息，通过addCookie方法设置cookie。但是由于不知道什么时候登录成功需要多长时间，所以在获取cookie的时候，需要不断循环获取，直到获取到cookie。当然你可以设置超时。超时后退出当前驱动程序。//保存cookieasyncfunctionsetCookies(driver){constmanage=driver.manage();让sleepTime=6000;等待driver.sleep(sleepTime);让cookies=null尝试{cookies=awaitmanage.getCookies();}catch(error){}while(!cookies||!findSessionIdFromCookies(cookies)){awaitdriver.sleep(2000)sleepTime+=2000;尝试{cookies=awaitmanage.getCookies();}catch(error){}}if(cookies&&findSessionIdFromCookies(cookies)){cache.cookies=cookies;//cache是完全用于存储cookie的对象cache.cookiesStr=cache.cookies.map((cookie)=>{return`${cookie.name}=${cookie.value}`}).join(';');}返回cookie；}//设置cookieasyncfunctioninitCookies(driver){constcookies=cache.cookies;如果(cookies&&cookies.length>0){awaitdriver.manage().deleteAllCookies();for(leti=0;i
