從0開始的Selenium

# 從0開始的Selenium ## 前言 **此筆記都以 javascript 為主，作業系統為 windows 10** 這篇基本上是一個selenium筆記，順便練習撰寫說明文件的能力，以後要是寫的比較完整再搬去部落格上。 ## 安裝 1. 開一個新資料夾，取個自己喜歡的名字 2. 建立新的 node 專案 ```shell= $ npm init -y ``` 4. 安裝套件 ```shell= $ npm i selenium-webdriver ``` 4. 在`package.json`中的`dependencies`中加入 (沒有package.json就自己新建一個) ```json= "selenium-webdriver": "^4.8.1" ``` 完成後會長這樣 ```json= { "dependencies": { "selenium-webdriver": "^4.8.1" } ``` ## 下載browser drivers 官網總共提供了四種方法，我自己是採用方法四 1. [Selenium Manager (Beta)](https://github.com/SeleniumHQ/selenium/releases/tag/selenium-4.6.0) 新的工具，讓你能更快速的使用 browser drivers，假設你電腦中的PATH找不到 Chrome、Firefox 和 Edge 的 dirver，他會自己幫你裝 2. Driver Management Software javascript 沒有得用 QQ 3. 環境變數(以 chromedriver 為例) 1. 首先你要從[此處](https://www.selenium.dev/documentation/webdriver/getting_started/install_drivers/#quick-reference)安裝對應的 web driver 2. 在CMD輸入( powershell 不能 ! )，檢查看看路徑中有沒有你剛剛安裝的那個web driver ```shell $ echo %PATH% ``` 3. 沒有的話，找到你安裝下來的web driver路徑，並輸入 ```shell $ setx PATH "%PATH%;路徑" ``` 4. 輸入 `$ chromedriver.exe` ，可以啟動代表成功，失敗的話試著重新啟動CMD試試。 4. 使用套件 1. 安裝webdriver套件 ```shell= $ npm i chromedriver ``` * 這裡可以選則自己想要的瀏覽器安裝，firefox要下載geckodriver，Edge要下載msedgedriver。 2. 在你的專案中加入以下程式碼 ```js const {Builder} = require('selenium-webdriver'); require('chromedriver'); ``` ## 開始撰寫屬於你的selenium程式當你完成以上步驟其實就可以開始撰寫程式了，不過這裡會列出一些基本概念 >Selenium做的每件事都是對瀏覽器送出指令來做某些事，或者是發出請求來取得一些資訊。 ### 一個簡單的範例程式 ```js= 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](https://github.com/huanginch/SeleniumJSHelloWorld/blob/master/tests/hello_world.js) 1. 開始一個新的session ```js= driver = await new Builder().forBrowser('chrome').build(); ``` 2. 對網頁執行一些動作(像這裡就是 get google 首頁網址) ```js= await driver.get('https://www.google.com'); ``` 3. 尋找網頁元素並對元素進行操作，以範例來說就是找到name屬性為q的元素，並送出 Hello World 字串後按下 enter。 ```js= await driver.findElement(By.name("q")).sendKeys("Hello World", Key.RETURN); ``` :::info `driver.findElement(By. ...)`這種寫法是第四版才有，第三版會寫成`findElementBy...()` ::: 4. 結束 session ```js= after(async () => await driver.quit()); ``` ### 執行程式 ```shell= $ node hello_world.js ``` 會發現執行後程式自己打開 Chrome，導向 google 首頁並自己搜尋 Hello World，接著關閉Chrome。 :::warning 如果是直接 clone 我 github 的 source code 請記得執行 `cd tests` 切換到 tests 資料夾裡再執行 `node hello_world.js` :::