Node 使用 Selenium 进行前端自动化操作

2019-10-09 admin

前言: 最近项目中有类似的需求:需要对前端项目中某一个用户下的产品数据进行批量的处理。手动处理的流程大概是首先登录系统,获取到当前用户下的产品列表,点击产品列表的中产品项进入详情页,对该产品进行一系列的操作,然后保存退出。因为当前有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路径中。

开始使用

进入我们刚才创建的项目文件夹,目录如下:

clipboard.png

  1. 页面添加一个开始按钮,以及给按钮添加事件。 找到 views/index.ejs, 添加如下代码:(为了方便操作,引入了jquery, axios, 所以需要下载准备好)

    clipboard.png

    clipboard.png

  2. 添加对应的路由

    clipboard.png

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

     var chromeDriverRouter = require('./routes/chromeDriver');
     app.use('/chromeDriver', chromeDriverRouter);
    
    
  3. 引入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: 定义了一些工具类的方法。
    
    

    然后书写我们的方法体里的内容。

    const handleBaiDuDriver = async () => {
         let driver = await new Builder().forBrowser('chrome').build();
         try {
             await driver.get('http://www.baidu.com');
    
             await driver.findElement(By.id('kw')).sendKeys('webdriver', Key.RETURN);//正常使用
    
             await driver.findElement(By.id('su')).click();
    
             await driver.wait(until.titleIs('百度一下,你就知道'), 1000);
    
         } catch (error) {
             console.log(error)
         } finally {
             await driver.sleep(2000);
             await driver.quit();
         }
     }
    
    
  4. 启动服务,查看效果。 启动服务之后,我梦能看到如下的界面。 clipboard.png 点击页面中的【点击开始】按钮,最终能够看到如下的界面,为了演示我做了两秒的延迟。生成的gif图有9M多,无法上传。后续可以下载源码运行看效果。 clipboard.png

  5. 获取登录信息 以上是selenium-webdriver的简单集成。在之前我们提到过实际需求中如何获取登录信息的问题。在访问产品列表页面的时候需要进行登录校验。如果没有登录则会跳转界面。由于我们的登录页是通过iframe来嵌套引入的。由于暂时还没有了解如何处理iframe里的操作,所以没法去模拟用户名密码的输入。 查看API文档,WebDriver 会有一个manage方法:

     this.manage() → Options
    

    该方法会返回一个Options实例,具有如下的方法: clipboard.png 其中有对cookie的操作方法。所以可以通过首次输入用户信息并进行缓存的方式来实现登录态的保存。在下一次再打开页面的时候直接从缓存里获取cookie信息,并通过addCookie方法进行cookie的设置。但是由于我不知道什么时候、多长时间登录才会成功,所以在获取cookie的时候需要通过不断循环的方式去获取,直到拿到cookie。当然可以设置一个超时时间。超时之后就退出当前driver。

    
     // 缓存cookie
     async function setCookies(driver) {
         const manage = driver.manage();
         let sleepTime = 6000;
         await driver.sleep(sleepTime);
         let cookies = null
         try {
             cookies = await manage.getCookies();    
         } catch (error) {
         }
         while (!cookies || !findSessionIdFromCookies(cookies)) {
             await driver.sleep(2000)
             sleepTime += 2000;
             try {
                 cookies = await manage.getCookies();
             } catch (error) {
             }
         }
         if (cookies && findSessionIdFromCookies(cookies)) {
             cache.cookies = cookies; // cache是全局用于缓存cookie的对象
             cache.cookiesStr = cache.cookies.map((cookie) => {
                 return `${cookie.name}=${cookie.value}`
             }).join(';');
         }
         return cookies;
     }
    
     // 设置cookie
     async function initCookies(driver) {
         const cookies = cache.cookies;
         if (cookies && cookies.length > 0) {
             await driver.manage().deleteAllCookies();
             for (let i = 0 ; i < cookies.length; i++) {
                 cookie = cookies[i];
                 await driver.manage().addCookie(cookie);        
             };
         }
     }
    
    

获取到cookie 信息之后就可以请求产品列表以及通过产品ID进入产品详情页。然后再模拟页面按钮点击操作即可。

Github地址

[转载]原文链接:https://segmentfault.com/a/1190000020628215

本站文章除注明转载外,均为本站原创或编译。欢迎任何形式的转载,但请务必注明出处。

转载请注明:文章转载自 JavaScript中文网 [https://www.javascriptcn.com]

本文地址:https://www.javascriptcn.com/read-76967.html

文章标题:Node 使用 Selenium 进行前端自动化操作

相关文章
前端交流QQ群
我们建立了一个前端交流QQ群供大家交流,有什么问题都可以在群里提问,欢迎你的加入,也希望我们大家能够在群里互帮互助,同时也能学到东西。 我们相信,前端有你更精彩! 为了让更多的小伙伴加入我们,欢迎大家转发扩散! 长按以上二维码加入我们 ...
2016-04-01
NodeJS参考手册pdf版
下载地址:Nodejs参考手册PDF版下载 ...
2015-11-12
Node.js学习(1)----HTTP服务器与客户端
Node.js 标准库提供了 http 模块,其中封装了一个高效的 HTTP 服务器和一个简易的HTTP 客户端。http.Server 是一个基于事件的 HTTP 服务器,它的核心由 Node.js 下层 C++部分实现,而接口由 Jav...
2015-11-12
使用jspdf生成pdf报表
由于前台html已经动态生成报表,而且,前台有一个功能,一个date range组件,当你拖动的时候,报表会在不提交到后台的情况下动态变化。 因此需要用到js生成生报表: 用到的组件: jquery.js jspdf.js canvg.js...
2017-03-25
2014年最流行前端开发框架对比评测
如今,各种开发框架层出不穷,各有千秋。哪些是去年较受开发者关注的呢?前不久,云适配根据Github上的流行程度整理了2014年最受欢迎的6个前端开发框架,并进行对比说明,希望帮助有需要的朋友选择合适自己的前端框架。 1. Bootstrap...
2015-11-12
梳理前端开发使用eslint-prettier检查和格式化代码
问题痛点 在团队的项目开发过程中,代码维护所占的时间比重往往大于新功能的开发。因此编写符合团队编码规范的代码是至关重要的,这样做不仅可以很大程度地避免基本语法错误,也保证了代码的可读性。 对于代码版本管理系统(svn 和 git或者其他)...
2018-05-07
如何为高负载网络优化Nginx 和 Node.js?
译者:AlfredCheung 在搭建高吞吐量web应用这个议题上,NginX和Node.js可谓是天生一对。他们都是基于事件驱动模型而设计,可以轻易突破Apache等传统web服务器的C10K瓶颈。预设的配置已经可以获得很高的并发,不过,...
2015-11-12
jQuery中DOM树操作之使用反向插入方法实例分析
本文实例讲述了jQuery中DOM树操作之使用反向插入方法。分享给大家供大家参考。具体分析如下: 使用反向插入方法 这里我们先把创建的内容插人到元素前面,然后再把同一个元素插人到文档 中的另一个位置。通常,当在jQuery中操作元素时,利用...
2015-11-13
Web前端开发与iOS终端开发的异同
毕业之前一直在做前端开发,毕业后就转成做iOS开发,这两者有很多挺有意思的对比,尝试写下我能想到的它们的一些相同点和不同点。 语言 前端和终端作为面向用户端的程序,有个共同特点:需要依赖用户机器的运行环境,所以开发语言基本上是没有选择的,...
2016-01-13
Bootstrap BootstrapDialog使用详解
这里有两种展现方式 写在前面:首先你要引入的库有 css : bootstrap.min.css bootstrap-dialog.css js : jquery-1.11.1.min.js bootstrap.min.js bootstr...
2017-03-16
回到顶部