---
# System prepended metadata

title: 從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`
:::

<!-- ## 執行測試
可以使用測試套件來進行測試，官網示範的是[Mocha.js](https://mochajs.org/)套件

1. 安裝mocha
```shell=
$ npm i mocha
```
4. 將自己的專案命名為「專案名稱.spec.js」
5. 執行測試
```shell=
$ mocha <專案名稱>.spec.js
``` -->
