前言：

10多年的社旗網(wǎng)站建設(shè)經(jīng)驗(yàn)，針對(duì)設(shè)計(jì)、前端、開(kāi)發(fā)、售后、文案、推廣等六對(duì)一服務(wù)，響應(yīng)快，48小時(shí)及時(shí)工作處理。成都全網(wǎng)營(yíng)銷(xiāo)推廣的優(yōu)勢(shì)是能夠根據(jù)用戶設(shè)備顯示端的尺寸不同，自動(dòng)調(diào)整社旗建站的顯示方式，使網(wǎng)站能夠適用不同顯示終端，在瀏覽器中調(diào)整網(wǎng)站的寬度，無(wú)論在任何一種瀏覽器上瀏覽網(wǎng)站，都能展現(xiàn)優(yōu)雅布局與設(shè)計(jì)，從而大程度地提升瀏覽體驗(yàn)。創(chuàng)新互聯(lián)公司從事“社旗網(wǎng)站設(shè)計(jì)”,“社旗網(wǎng)站推廣”以來(lái)，每個(gè)客戶項(xiàng)目都認(rèn)真落實(shí)執(zhí)行。

最近項(xiàng)目中有類(lèi)似的需求：需要對(duì)前端項(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)入詳情頁(yè)，對(duì)該產(chǎn)品進(jìn)行一系列的操作，然后保存退出。因?yàn)楫?dāng)前有20多萬(wàn)條數(shù)據(jù)，手動(dòng)一條一條的處理不太現(xiàn)實(shí)，所以希望通過(guò)寫(xiě)腳本的方式來(lái)進(jìn)行處理。

需求分析

其實(shí)這個(gè)需求還算比較簡(jiǎn)單，需要實(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)前的集合，通過(guò)產(chǎn)品ID跳轉(zhuǎn)產(chǎn)品詳情頁(yè)面，模擬頁(yè)面按鈕的點(diǎn)擊操作，監(jiān)聽(tīng)處理完成的動(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.

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

Selenium 主要分 Selenium WebDriver 以及 Selenium IDE。我主要結(jié)合Node來(lái)介紹 Selenium WebDriver 的安裝使用。本文主要介紹Selenium 結(jié)合 Node 的安裝使用。需要進(jìn)行深入研究的同學(xué)請(qǐng)自行查看官網(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)建完畢。接下來(lái)我們就可以在項(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路徑中。

開(kāi)始使用

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

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

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

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

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

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

引入selenium-webdriver

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

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

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

 // Builder: 用于創(chuàng)建一個(gè)WebDriver實(shí)例。
 // By: 表示通過(guò)什么方式來(lái)查找頁(yè)面的元素。
   // 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: 表示鍵盤(pán)上一系列的按鍵。
 // until： 定義了一些工具類(lèi)的方法。

然后書(shū)寫(xiě)我們的方法體里的內(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ù)之后，我夢(mèng)能看到如下的界面。

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

獲取登錄信息

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

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

this.manage() → Options

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

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

Github地址

以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持創(chuàng)新互聯(lián)。

文章名稱(chēng)：Node使用Selenium進(jìn)行前端自動(dòng)化操作的代碼實(shí)現(xiàn)
URL分享：http://aaarwkj.com/article14/pjcige.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供面包屑導(dǎo)航、外貿(mào)網(wǎng)站建設(shè)、關(guān)鍵詞優(yōu)化、網(wǎng)站導(dǎo)航、搜索引擎優(yōu)化、商城網(wǎng)站

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來(lái)源： 創(chuàng)新互聯(lián)