前言：

最近的项目也有类似的要求：前端项目需要对某个用户下的产品数据进行批量处理。手工处理的过程大概是先登录系统，获取当前用户下的产品列表，点击产品列表中的产品项进入详细页面，对产品进行一系列操作，然后保存退出。因为目前有20多万条数据，手工逐个处理是不现实的，所以希望通过写脚本的方式来处理。

需求分析

其实这个要求比较简单，要实现的主要有三点。一是如何登录，获取登录信息，查询当前用户下的产品数据；二是如何知道当前数据是否已经处理，然后退出当前处理流程；三是如何异步处理一批数据。

因此，需要做的是模拟登录，调用产品列表的查询界面获取产品ID集合，然后在当前集合中循环，通过产品ID跳转到产品详细信息页面，模拟页面按钮的点击操作，监控完成的动作，退出当前流程。

硒简介

什么是硒？Selenium自动运行浏览器。就这样！你用那种力量做什么完全取决于你自己。首先，它是为了测试目的而自动化web应用程序，但当然不仅限于此。无聊的基于网络的管理任务可以(也应该！)也是自动化的。Selenium得到了一些最大的浏览器供应商的支持，这些供应商已经(或正在)采取措施，使Selenium成为其浏览器的本地部分。它也是无数其他浏览器自动化工具、API和框架中的核心技术。粗略翻译一下，硒可以自动操作浏览器。如何使用Selenium的功能完全取决于我们。它主要用于web应用程序的自动测试。但他的功能不仅限于此。那些无聊的基于网络的管理任务也可以自动化。很多流行的浏览器都采取了一些措施来支持Selenium本地化。它也是许多浏览器自动化工具、API自动化和框架的核心技术。

硒主要分为硒网络驱动和硒集成开发环境。我主要介绍带有Node的Selenium网络驱动程序的安装和使用。本文主要介绍硒结合节点的安装和使用。需要做深入研究的同学，要自行查看官网文档。

节点环境建设

1.这里不描述节点的安装。点击链接查看官网下载安装方法。2.快速安装

$ npx express-生成器或

$ npm install -g express-generator创建项目：

$ express-view=ejsserenium-start $ CD selenium-start $ shate启动项目：

$ DEBUG=myapp:*纱线开始，节点项目已创建。接下来，我们可以将Selenium网络驱动程序集成到项目中

Selenium网络驱动程序集成

1.安装selenium-webdriver

纱线添加硒-web drive 2。下载并安装支持不同浏览器的驱动程序。(这里只介绍Chrome驱动)

[ChromeDriver][3]下载并解压文件，将解压后的执行文件放在/usr/bin目录下。或者设置相应的path path以确保可执行文件在PATH PATH中。

开始使用

进入我们刚刚创建的项目文件夹，目录如下：

页面添加开始按钮，并向按钮添加事件。

找到view/index . ejs，添加如下代码：(为了操作方便，引入了jquery、axios，所以需要下载并准备好)

添加相应的路线

在app.js文件中，引入了路由chromeDriver

var chromeDriverRouter=require('。/routes/chrome driver’)；app.use('/chromeDriver '，chrome driver Router)；介绍selenium-webdriver

在routes/chromeDirver.js文件中，我们增加了一个方法handleBaiDuDriver，用来处理一些模拟百度搜索自动化的测试。

首先，我们需要在文件的顶部引入selenium-webdriver

const {Builder，By，Key，直到}=require(' selenium-web driver ')；//Builder:用于创建一个WebDriver实例。//By:表示如何查找页面的元素。//By . class name(name)By//By . CSS(选择器) By //By.id(id ) By //By.js(脚本，函数(web驱动程序): promise//by .linktext (text) by//by。姓名 by//by。partial link text(text)by//key 3360代表键盘上的一系列按键。//直到：定义了一些工具类的方法。然后写出我们方法的内容。

const handleBaiDuDriver=async()={让驱动程序=等待新的Builder()。forBrowser('chrome ')。build()；尝试{ await driver . get(' http://www . Baidu.com ')；等待驱动程序。查找元素(By.id('kw ')。发送密钥('网络驱动程序'，密钥。RETURN)；//使用await driver . find element(by . id(' su ')。正常点击()；wait driver.wait(直到. titleIs('百度一次，你就知道')，1000)；} catch(错误){ console.log(错误)}最后{ await driver . sleep(2000)；wait driver . quit()；}}启动服务并检查效果。

启动服务后，我梦想看到以下界面。

点击页面上的【点击开始】按钮，最终可以看到如下界面。我推迟了两秒钟来演示。生成的gif图像超过9M，无法上传。后续可以下载源代码运行，看看效果。

获取登录信息

以上是selenium-webdriver的简单集成。之前我们提到了实际需求中如何获取登录信息的问题。访问产品列表页面时，需要进行登录验证。如果没有登录，会跳转到界面。因为我们的登录页面是嵌套的，是通过iframe引入的。因为还不知道怎么处理iframe中的操作，所以无法模拟用户名和密码的输入。

查看应用编程接口文档，网络驱动程序将有一个管理方法：

This.manage() Options此方法使用以下方法返回一个Options实例：

操作cookie有多种方法。因此，可以通过第一次输入用户信息并缓存来保存登录状态。下次再次打开页面时直接从缓存中获取cookie信息，并通过addCookie方法设置cookie。但是，我不知道什么时候登录成功，需要多久，所以当我得到cookie时，我需要以连续循环的方式得到它们，直到我得到cookie。当然，您可以设置超时。超时后退出当前驱动程序。

//缓存cookie异步函数集cookie(驱动程序){ const manage=driver . manage()；让sleepTime=6000等待驾驶员睡眠；让cookies=null try { cookies=wait manage . getcookies()；} catch(错误){ } while(！cookies ||！findsessionid from cookies(cookies)){ await driver . sleep(2000)sleep time=2000；尝试{ cookies=wait manage . getcookies()；} catch(错误){ } } if(cookies FindSessionFromCooKies(cookies)){ cache . cookies=cookies；//cache是一个用于全局缓存cookies的对象。cache . cookiestr=cache . cookies . map((cookie)={ return `$ { cookie . name }=$ { cookie . value } ` })。联接('；');}返回cookies}//设置cookies异步函数init cookies(驱动程序){ const cookies=cache.cookiesif(cookies . cookies . length 0){ wait driver . manage()。deleteAllCooKies()；for(设I=0；i cookies.lengthI){ cookie=cookies[I]；等待驱动程序. manage()。addCookie(cookie)；};}}获取cookie信息后，可以请求产品列表，通过产品ID进入产品详情页面。然后模拟页面按钮点击操作。

Github地址

以上就是本文的全部内容。希望对大家的学习有帮助，支持我们。