從0開始的Selenium

前言

此筆記都以 javascript 為主，作業系統為 windows 10

這篇基本上是一個selenium筆記，順便練習撰寫說明文件的能力，以後要是寫的比較完整再搬去部落格上。

安裝

1. 開一個新資料夾，取個自己喜歡的名字
2. 建立新的 node 專案

$ npm init -y

4. 安裝套件

$ npm i selenium-webdriver

4. 在package.json中的dependencies中加入 (沒有package.json就自己新建一個)

"selenium-webdriver": "^4.8.1"

完成後會長這樣

{
    "dependencies": {
        "selenium-webdriver": "^4.8.1"
}

下載browser drivers

官網總共提供了四種方法，我自己是採用方法四

1. Selenium Manager (Beta)
   新的工具，讓你能更快速的使用 browser drivers，假設你電腦中的PATH找不到 Chrome、Firefox 和 Edge 的 dirver，他會自己幫你裝

2. Driver Management Software
   javascript 沒有得用 QQ

3. 環境變數(以 chromedriver 為例)

   1. 首先你要從此處安裝對應的 web driver
   2. 在CMD輸入( powershell 不能 ! )，檢查看看路徑中有沒有你剛剛安裝的那個web driver
   ​​​​$ echo %PATH%
   

   3. 沒有的話，找到你安裝下來的web driver路徑，並輸入
   ​​​​$ setx PATH "%PATH%;路徑"
   

   4. 輸入 $ chromedriver.exe ，可以啟動代表成功，失敗的話試著重新啟動CMD試試。

4. 使用套件

   1. 安裝webdriver套件
   ​​​​$ npm i chromedriver
   

   • 這裡可以選則自己想要的瀏覽器安裝，firefox要下載geckodriver，Edge要下載msedgedriver。
   2. 在你的專案中加入以下程式碼
   ​​​​const {Builder} = require('selenium-webdriver');
   ​​​​require('chromedriver');
   

開始撰寫屬於你的selenium程式

當你完成以上步驟其實就可以開始撰寫程式了，不過這裡會列出一些基本概念

Selenium做的每件事都是對瀏覽器送出指令來做某些事，或者是發出請求來取得一些資訊。

一個簡單的範例程式

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

async function hello_world() {
    let driver = new Builder().forBrowser('chrome').build();
    
    await driver.get('https://www.google.com');
    
    await driver.findElement(By.name("q")).sendKeys("Hello World", Key.RETURN);
     
    driver.quit();
};

hello_world();

Source Code

1. 開始一個新的session

driver = await new Builder().forBrowser('chrome').build();

2. 對網頁執行一些動作(像這裡就是 get google 首頁網址)

await driver.get('https://www.google.com');

3. 尋找網頁元素並對元素進行操作，以範例來說就是找到name屬性為q的元素，並送出 Hello World 字串後按下 enter。

await driver.findElement(By.name("q")).sendKeys("Hello World", Key.RETURN);

driver.findElement(By. ...)這種寫法是第四版才有，第三版會寫成findElementBy...()

4. 結束 session

after(async () => await driver.quit());

執行程式

$ node hello_world.js

會發現執行後程式自己打開 Chrome，導向 google 首頁並自己搜尋 Hello World，接著關閉Chrome。

如果是直接 clone 我 github 的 source code 請記得執行 cd tests 切換到 tests 資料夾裡再執行 node hello_world.js