最近项目中有类似的需求:需要对前端项目中某一个用户下的产品数据进行批量的处理。手动处理的流程大概是首先登录系统,获取到当前用户下的产品列表,点击产品列表的中产品项进入详情页,对该产品进行一系列的操作,然后保存退出。因为当前有20多万条数据,手动一条一条的处理不太现实,所以希望通过写脚本的方式来进行处理。
需求分析
其实这个需求还算比较简单,需要实现的点主要有三个,一是如何进行登录,获取登录信息,查询当前用户下的产品数据;二是如何知道当前数据是否处理完,然后退出当前的处理流程;三是如何异步的处理一批数据。
所以需要做的工作就是模拟登录,调用产品列表的查询接口获取产品ID集合,然后循环遍历当前的集合,通过产品ID跳转产品详情页面,模拟页面按钮的点击操作,监听处理完成的动作,退出当前的流程。
Selenium 介绍
What is Selenium?Selenium automates browsers. That's it! What you do with that power is entirely up to you. Primarily, it is for automating web applications for testing purposes, but is certainly not limited to just that. Boring web-based administration tasks can (and should!) be automated as well.
Selenium has the support of some of the largest browser vendors who have taken (or are taking) steps to make Selenium a native part of their browser. It is also the core technology in countless other browser automation tools, APIs and frameworks.
翻译过来大致意思就是: Selenium 可以自动化操作浏览器。怎么去使用Selenium 的功能完全取决于我们自己。它主要还是使用在web应用的自动化测试上。但是他的功能并不仅限于此。那些枯燥的基于web的管理任务也可以自动化。很多流行的浏览器都采取了一些措施来支持Selenium实现本地化。它也是很多浏览器自动化工具、API自动化以及框架的核心技术。
Selenium 主要分 Selenium WebDriver 以及 Selenium IDE。我主要结合Node来介绍 Selenium WebDriver 的安装使用。本文主要介绍Selenium 结合 Node 的安装使用。需要进行深入研究的同学请自行查看官网文档。
Node 环境搭建
1. node的安装在此不再赘述。点击链接查看官网下载安装方法。
2. express安装
$ npx express-generator
或者
$ npm install -g express-generator
创建项目:
$ express --view=ejs selenium-start $ cd selenium-start $ yarn
启动项目:
$ DEBUG=myapp:* yarn start
至此,Node 项目创建完毕。接下来我们就可以在项目中集成Selenium WebDriver
Selenium WebDriver 集成
1. 安装selenium-webdriver
yarn add selenium-webdriver
2. 下载安装支持不同浏览器的驱动。(此处只介绍Chrome驱动)
[ChromeDriver][3]
下载并解压文件,同时把解压的执行文件放置到 /usr/bin目录下。或者设置相应的PATH路径,确保可执行文件在PATH路径中。
开始使用
进入我们刚才创建的项目文件夹,目录如下:
页面添加一个开始按钮,以及给按钮添加事件。
找到 views/index.ejs, 添加如下代码:(为了方便操作,引入了jquery, axios, 所以需要下载准备好)
添加对应的路由
在app.js文件中,引入路由chromeDriver
var chromeDriverRouter = require('./routes/chromeDriver'); app.use('/chromeDriver', chromeDriverRouter);
引入selenium-webdriver
在routes/chromeDirver.js文件中,我们添加了一个方法handleBaiDuDriver,这个方法用于处理模拟百度搜索自动化的一些测试。
首先我们需要在文件顶部引入selenium-webdriver
const {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: 定义了一些工具类的方法。
然后书写我们的方法体里的内容。