前言：

最近項(xiàng)目中有類似的需求：需要對前端項(xiàng)目中某一個(gè)用戶下的產(chǎn)品數(shù)據(jù)進(jìn)行批量的處理。手動(dòng)處理的流程大概是首先登錄系統(tǒng)，獲取到當(dāng)前用戶下的產(chǎn)品列表，點(diǎn)擊產(chǎn)品列表的中產(chǎn)品項(xiàng)進(jìn)入詳情頁，對該產(chǎn)品進(jìn)行一系列的操作，然后保存退出。因?yàn)楫?dāng)前有20多萬條數(shù)據(jù)，手動(dòng)一條一條的處理不太現(xiàn)實(shí)，所以希望通過寫腳本的方式來進(jìn)行處理。

需求分析

其實(shí)這個(gè)需求還算比較簡單，需要實(shí)現(xiàn)的點(diǎn)主要有三個(gè)，一是如何進(jìn)行登錄，獲取登錄信息，查詢當(dāng)前用戶下的產(chǎn)品數(shù)據(jù)；二是如何知道當(dāng)前數(shù)據(jù)是否處理完，然后退出當(dāng)前的處理流程；三是如何異步的處理一批數(shù)據(jù)。

所以需要做的工作就是模擬登錄，調(diào)用產(chǎn)品列表的查詢接口獲取產(chǎn)品ID集合，然后循環(huán)遍歷當(dāng)前的集合，通過產(chǎn)品ID跳轉(zhuǎn)產(chǎn)品詳情頁面，模擬頁面按鈕的點(diǎn)擊操作，監(jiān)聽處理完成的動(dòng)作，退出當(dāng)前的流程。

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 可以自動(dòng)化操作瀏覽器。怎么去使用Selenium 的功能完全取決于我們自己。它主要還是使用在web應(yīng)用的自動(dòng)化測試上。但是他的功能并不僅限于此。那些枯燥的基于web的管理任務(wù)也可以自動(dòng)化。很多流行的瀏覽器都采取了一些措施來支持Selenium實(shí)現(xiàn)本地化。它也是很多瀏覽器自動(dòng)化工具、API自動(dòng)化以及框架的核心技術(shù)。

Selenium 主要分 Selenium WebDriver 以及 Selenium IDE。我主要結(jié)合Node來介紹 Selenium WebDriver 的安裝使用。本文主要介紹Selenium 結(jié)合 Node 的安裝使用。需要進(jìn)行深入研究的同學(xué)請自行查看官網(wǎng)文檔。

Node 環(huán)境搭建

1. node的安裝在此不再贅述。點(diǎn)擊鏈接查看官網(wǎng)下載安裝方法。
2. express安裝

$ npx express-generator

或者

$ npm install -g express-generator

創(chuàng)建項(xiàng)目：

$ express --view=ejs selenium-start
$ cd selenium-start
$ yarn

啟動(dòng)項(xiàng)目：

$ DEBUG=myapp:* yarn start

至此，Node 項(xiàng)目創(chuàng)建完畢。接下來我們就可以在項(xiàng)目中集成Selenium WebDriver

Selenium WebDriver 集成

1. 安裝selenium-webdriver

yarn add selenium-webdriver

2. 下載安裝支持不同瀏覽器的驅(qū)動(dòng)。（此處只介紹Chrome驅(qū)動(dòng)）

[ChromeDriver][3]
下載并解壓文件，同時(shí)把解壓的執(zhí)行文件放置到 /usr/bin目錄下?；蛘咴O(shè)置相應(yīng)的PATH路徑，確?？蓤?zhí)行文件在PATH路徑中。

開始使用

進(jìn)入我們剛才創(chuàng)建的項(xiàng)目文件夾，目錄如下：

頁面添加一個(gè)開始按鈕，以及給按鈕添加事件。

找到 views/index.ejs, 添加如下代碼：(為了方便操作，引入了jquery, axios, 所以需要下載準(zhǔn)備好)

添加對應(yīng)的路由

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

 var chromeDriverRouter = require('./routes/chromeDriver');
 app.use('/chromeDriver', chromeDriverRouter);

引入selenium-webdriver

在routes/chromeDirver.js文件中，我們添加了一個(gè)方法handleBaiDuDriver，這個(gè)方法用于處理模擬百度搜索自動(dòng)化的一些測試。

首先我們需要在文件頂部引入selenium-webdriver

 const {Builder, By, Key, until} = require('selenium-webdriver');

 // Builder: 用于創(chuàng)建一個(gè)WebDriver實(shí)例。
 // 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： 定義了一些工具類的方法。

然后書寫我們的方法體里的內(nèi)容。

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();
   }
 }

啟動(dòng)服務(wù)，查看效果。

啟動(dòng)服務(wù)之后，我夢能看到如下的界面。

點(diǎn)擊頁面中的【點(diǎn)擊開始】按鈕，最終能夠看到如下的界面，為了演示我做了兩秒的延遲。生成的gif圖有9M多，無法上傳。后續(xù)可以下載源碼運(yùn)行看效果。

獲取登錄信息

以上是selenium-webdriver的簡單集成。在之前我們提到過實(shí)際需求中如何獲取登錄信息的問題。在訪問產(chǎn)品列表頁面的時(shí)候需要進(jìn)行登錄校驗(yàn)。如果沒有登錄則會(huì)跳轉(zhuǎn)界面。由于我們的登錄頁是通過iframe來嵌套引入的。由于暫時(shí)還沒有了解如何處理iframe里的操作，所以沒法去模擬用戶名密碼的輸入。

查看API文檔，WebDriver 會(huì)有一個(gè)manage方法：

this.manage() → Options

該方法會(huì)返回一個(gè)Options實(shí)例，具有如下的方法：

其中有對cookie的操作方法。所以可以通過首次輸入用戶信息并進(jìn)行緩存的方式來實(shí)現(xiàn)登錄態(tài)的保存。在下一次再打開頁面的時(shí)候直接從緩存里獲取cookie信息，并通過addCookie方法進(jìn)行cookie的設(shè)置。但是由于我不知道什么時(shí)候、多長時(shí)間登錄才會(huì)成功，所以在獲取cookie的時(shí)候需要通過不斷循環(huán)的方式去獲取，直到拿到cookie。當(dāng)然可以設(shè)置一個(gè)超時(shí)時(shí)間。超時(shí)之后就退出當(dāng)前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;
 }
 
 
 // 設(shè)置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 信息之后就可以請求產(chǎn)品列表以及通過產(chǎn)品ID進(jìn)入產(chǎn)品詳情頁。然后再模擬頁面按鈕點(diǎn)擊操作即可。

Github地址

以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

最新評論