1、介紹

今天給大家推薦一款基于Node.js編寫且號稱下一代瀏覽器和移動自動化測試框架：WebdriverIO

簡單來講：WebdriverIO 是一個開源的自動化測試框架，它允許測試人員使用 Node.js 編寫自動化測試腳本，用于測試Web應用、移動應用和桌面應用程序。能夠執行端到端（e2e）、單元和組件測試，主要基于WebDriver、WebDriver BiDi和Chrome DevTools協議進行操作。功能豐富、易于使用的測試框架，支持多種瀏覽器和設備，并且與Selenium WebDriver API兼容。

官方網址：

https://webdriver.io/

2、主要功能和特點

• 開源：WebdriverIO是一個開源項目，它使得開發者和測試人員可以在自己的項目中自由地使用和修改它。

• 跨平臺、多語言支持：支持多種編程語言（如JavaScript、TypeScript、Python等）和多種操作系統（如Windows、Linux、Mac OS等），確保了跨平臺和跨語言的兼容性。

• 多瀏覽器支持：WebdriverIO遵循W3C WebDriver標準，確保了與主流瀏覽器的無縫集成，同時支持WebDriver BiDi和Chrome DevTools協議，利用這兩個強大的工具集，可以直接控制瀏覽器的底層功能，進行更精細的調試和測試。

• Appium整合：WebdriverIO不僅支持Web應用程序的測試，還通過Appium平臺提供了對Android和iOS應用的自動化支持。

• 豐富的API和工具：WebdriverIO提供了一組強大的API和工具，使得開發人員能夠輕松地編寫和執行自動化測試腳本。這些API和工具包括遍歷元素列表的方法（如$$、forEach、map、filter和reduce等），使得開發者可以靈活地進行元素操作。

• 支持多種測試框架和斷言庫：WebdriverIO支持BDD/TDD測試框架，如Cucumber、Jasmine和Mocha，以及斷言庫如Chai、Expect.js等。這些支持使得開發者可以根據自己的喜好和需求選擇合適的測試框架和斷言庫進行測試。

• 易用性與可擴展、封裝了Selenium WebDriver API： 與Selenium相比，WebdriverIO提供了更簡潔的API，使得編寫測試腳本變得更加簡單易懂，尤其是對于熟悉jQuery的開發者來說。通過封裝Selenium WebDriver API, WebdriverIO擁有高度的可擴展性，允許用戶根據需要擴展其功能。

• 支持多種測試模式：WebdriverIO不僅支持web應用的自動化測試，還支持Native移動端應用和Electron開發的桌面端應用的測試。

3、環境安裝

1、安裝Node.js

• 下載與安裝：訪問Node.js官網https://nodejs.org/下載并安裝最新穩定版的Node.js。安裝過程通常是“傻瓜式”的，直接點擊“下一步”直到完成即可,并確保配置到環境變量中。
• 安裝完成后，打開命令行或終端，輸入node -v來檢查Node.js是否安裝成功，如果顯示版本號，則說明安裝成功。

2、初始化NPM空間

• 在想要存放WebdriverIO項目的文件夾中（例如D盤的WebdriverIO-test文件夾），打開命令行或終端。
• 輸入npm init -y命令來初始化一個新的NPM項目空間。這個命令會創建一個package.json文件，用于管理項目的依賴包。

3、安裝WebdriverIO CLI

• 在命令行或終端中，輸入npm i --save-dev @wdio/cli命令來安裝WebdriverIO的命令行接口（CLI）。
• 安裝完成后，可以在node_modules/.bin/目錄下找到wdio命令。但為了方便使用，建議將其添加到環境變量中，或者在命令行中通過完整路徑調用。

4、生成配置文件

• 安裝完CLI后，使用npx wdio config 命令來生成一個基本的配置文件
• 執行命令后，會在項目根目錄下生成一個wdio.conf.js文件，這個文件包含了WebdriverIO的配置信息

5、安裝其他依賴（可選）

• 根據您的測試需求，您可能還需要安裝其他NPM包，如瀏覽器驅動程序（chromedriver、geckodriver等）的npm封裝包。
• 這些包可以通過npm install命令來安裝，例如：npm install chromedriver。

對于Chrome和Firefox等瀏覽器，您需要下載與瀏覽器版本相匹配的驅動程序（如chromedriver、geckodriver）。

4、編寫腳本

根據wdio.conf.js文件中的配置項，配置項目的測試環境、瀏覽器、測試框架等，就可以開始編寫測試腳本了。

以下是一個簡單的 WebdriverIO 腳本示例，用于在百度中搜索 "WebdriverIO"：

// 引入 WebdriverIO  
const { remote } = require('webdriverio');  
  
(async () => {  
    // 設置 WebDriver 的配置  
    const options = {  
        path: '/',  
        capabilities: {  
            browserName: 'chrome'  
        }  
    };  
  
    // 初始化 WebDriver 實例  
    const browser = await remote(options);  
    try {  
        // 打開百度主頁  
        await browser.url('https://www.baidu.com');  
        // 在搜索框中輸入搜索詞  
        await browser.setValue('#kw', 'WebdriverIO');  
        // 點擊搜索按鈕  
        await browser.click('#su');  
        // 等待搜索結果頁面加載完成  
        await browser.pause(2000); // 這里簡單使用 pause，實際項目中可能需要更復雜的等待策略  
        // 獲取搜索結果標題（假設是第一個搜索結果）  
        const title = await browser.getTitle();  
        console.log('搜索結果頁面的標題是:', title);  

        // 關閉瀏覽器  
        await browser.deleteSession();  
    } catch (err) {  
        console.error('測試出錯:', err);  
    }  
})();

這個示例使用了 remote 方法來初始化 WebDriver 實例，這是 WebdriverIO v5 的用法。如果你使用的是 WebdriverIO v6 或更高版本，可能需要使用不同的 API（如 new Browser()）。

5、小結

綜上所述，WebdriverIO是一個功能強大、靈活易用的自動化測試框架，適用于多種測試場景和需求。無論是新手還是經驗豐富的測試工程師，都能通過WebdriverIO實現高效的自動化測試，感興趣的讀者可以嘗試一下。

項目地址：https://github.com/webdriverio/webdriverio