配置node.js和selenium.js

前期準備

• 安裝node.js
  下載node: https://nodejs.org/en/
  選擇當前穩定版本: V6.11.0 LTS
  安裝完成后，在命令行輸入 node -v 輸出安裝的node 版本號 v6.11.0

> node -v
> v6.11.0

安裝selenium-webdrier

• 初始化項目

在自己本地創建一個文件夾selenium-begin,命令行模式進入到selenium-begin目錄下 輸入 npm init 初始化項目，根據提示，用默認選項即可。

C:\Users\zengyang\Desktop\selenium-begin>npm init
This utility will walk you through creating a package.json file.
It only covers the most common items, and tries to guess sensible defaults.

See `npm help json` for definitive documentation on these fields
and exactly what they do.

Use `npm install <pkg> --save` afterwards to install a package and
save it as a dependency in the package.json file.

Press ^C at any time to quit.
name: (selenium-begin)
version: (1.0.0)
description:
entry point: (index.js)
test command:
git repository:
keywords:
author:
license: (ISC)
About to write to C:\Users\zengyang\Desktop\selenium-begin\package.json:

{
"name": "selenium-begin",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"author": "",
"license": "ISC"
}


Is this ok? (yes) yes

完成后selenium-begin目錄下自動生成項目配置文件 package.json.

• 配置selenium

node的包管理器npm 為我們提供簡易的安裝方式。我們只需要用npm install 命令即可快速為我們安裝配置環境。
在剛才的命令行模式下 輸入命令<code> npm install selenium-webdriver --save</code> 即可自動幫我們下載 selenium-webdriver.
下載完成后，在selenium-begin 目錄下會有一個node_modules目錄,node_modules目錄存放我們selenium-webdriver的依賴文件。

C:\Users\zengyang\Desktop\selenium-begin>npm install selenium-webdriver --save
selenium-begin@1.0.0 C:\Users\zengyang\Desktop\selenium-begin
`-- selenium-webdriver@3.4.0
+-- adm-zip@0.4.7
+-- rimraf@2.6.1
| `-- glob@7.1.2
| +-- fs.realpath@1.0.0
| +-- inflight@1.0.6
| | `-- wrappy@1.0.2
| +-- inherits@2.0.3
| +-- minimatch@3.0.4
| | `-- brace-expansion@1.1.7
| | +-- balanced-match@0.4.2
| | `-- concat-map@0.0.1
| +-- once@1.4.0
| `-- path-is-absolute@1.0.1
+-- tmp@0.0.30
| `-- os-tmpdir@1.0.2
`-- xml2js@0.4.17
+-- sax@1.2.2
`-- xmlbuilder@4.2.1
`-- lodash@4.17.4

npm WARN selenium-begin@1.0.0 No description
npm WARN selenium-begin@1.0.0 No repository field.

瀏覽器driver

在做自動化測試的過程，我們需要根據測試不同的瀏覽器，需要下載瀏覽器driver配置到系統環境變量中，這樣自動化腳本才能打開特定的瀏覽器去運行腳本。

• 安裝chrome driver
  使用 <code> npm install chromedriver --save </code> 會自動幫我們下載安裝最新版的chrome driver

• 安裝firefox驅動
  使用 <code>npm install geckodriver --save </code> 命令會自動幫我們下載安裝 firefox瀏覽器驅動

• 安裝ie驅動
  使用 <code>npm install iedriver --save </code> 命令自動幫我們下載安裝ie 瀏覽器驅動

選擇一款適合自己的開發工具

• vscode
  下載地址: https://code.visualstudio.com/

打造我們第一個web自動化程序

• 編碼

打開 VScode 編輯器。使用vscode打開我們創建的 selenium-begin 文件夾。
新建 index.js 寫如下代碼:

require('chromedriver'); //導入chrome瀏覽器 driver

var webdriver = require('selenium-webdriver'); //導入selenium 庫

var driver = new webdriver.Builder().forBrowser('chrome').build(); //創建一個chrome 瀏覽器實例

driver.get("https://autowebtest.github.io/") //打開https://autowebtest.github.io/

driver.sleep(20 * 1000).then(function(){ //等待20秒
driver.quit(); //關閉瀏覽器
})

此時項目的目錄結構應該為

+ selenium-begin
    + node_modules
    - index.js
    - package.json

• 運行

在命令行窗口 運行<code> node index.js</code>

C:\Users\zengyang\Desktop\selenium-begin> node index.js

如果以上環境都配置安裝過，你會發現自動打chrome 瀏覽器并導航到
https://autowebtest.github.io/ 這個頁面上，大約20秒過后，瀏覽器自動關閉。

總結

通過一個簡單的實例快速了解web自動化測試流程。我們學習了以下知識
1.快速搭建環境
2.配置selenium 安裝瀏覽器驅動。
3.編寫一個自動化腳本。