用 스파이 크론對 전자 응용做測試

일렉트로닉

일렉트로닉是 노드js生態圈的框架,用於開發跨平台桌面應用,目標平台可以是 Mac/Linux/Windows可以視為把 네트워크 응용包裝成執行檔在自己的視窗內運行,並且透過 일렉트로닉框架讓這支 응용 프로그램有與作業系統層溝通的能力,包括存取檔案、週邊裝置等,很多目前 原生 web API 無法實現的能力 都可以透過 일렉트로닉辦到.
最知名的 일렉트로닉應用應該就是 VSCode了,這款當代最棒的編輯器也是運用了 일렉트로닉框架達成在桌面端跨平台的能力.

일렉트로닉的測試

對最大宗的 창문.平台的 Windows 창這類的原生桌面應用來說,市場上已經有許多 RPA 工具可以用於自動化測試,但因為 일렉트로닉在介面元件上並未調用系統原生元件,而是由 HTML元素來構成介面,而那些 RPA工具都無法抓取到 HTML元件,導致 RPA完全無用武之地.
既然沒有 활용단어참조測試工具可以用,只能回歸寫 비밀 번호測 비밀 번호這招,일렉트로닉有自己的測試框架 Spectron, 스파이크론也可以搭配 Mocha 等其它 JavaScript測試框架使用,網路上爬文一下可以發現大部分也都就是 스파이 크론配 모카這樣的組合.

모카來源: 劍橋詞典

스파이크론+모카

전자 응용

像做菜節目一樣,前面都要先備料,我們必須先有一支 전자 응용來當作我們的測試 어플리케이션,這裡我們用 Mini Diary 這個 응용 프로그램當作待測的目標,因為它夠簡單又夠複雜,所謂夠簡單－它的 응용 프로그램本身功能簡單,操作也簡單;所謂夠複雜－它是 일렉트로닉加 리액션的架構,又搭配了一些 리액션生態圈的套件;另一個夠複雜－它除了提供原始碼外,也幫我們打包好了各個平台上的安裝檔.
在這裡我們用 미니 다이어리的 마커스套件包來使用,依照通用的流程安裝,它會被安裝到/신청/目錄內,主程式就是 “/Applications/Mini Diary.app/Contents/MacOS/Mini Diary”這支檔案.

版次搭配

前面提過 전자 응용是由 HTML構成,為了在桌面前端 제공出這些 전자 응용 프로그램裡面有包了一個 크롬做為前端的 렌더링 머신而 일렉트로닉的測試框架－스파이 크론裡面也有一個 크롬 도금기做為與 일렉트로닉溝通的介面,就像純 그물 모양의 물건常用的自動化測試工具 셀렌也是透過 크롬 도금기來操控 크롬一樣.
因為有 크롬與 ChromeDriver就會有版次搭配的問題,兩者必須是相匹配的版次才可以成功的運作.
在 일렉트로닉方面, electron-releases 這個專案內有列出各版本的 일렉트로닉與 크롬的對應關係,以 미니 다이어리來說,它的 일렉트로닉是 8.3.0 版,透過 전자/크롬版次表,可以查到對應的 크롬版次是 80.
在 스파이 크론方面,它的專案文件同時也列出了 Spectron 與 Electron 的對應表 ,透過查表可以知道 전자x須與 스파이크론 10번지.x相互搭配.

專案建置

這裡我們為測試另建一個專案,叫做 미니 일기 테스트建立同名資料夾後,git init和 npm 초기화一下,接著把 모카和 스파이 크론裝起來:

npm install mocha spectron

記得前面說的版次搭配性問題,有必要的話需指定 스파이 크론的版次.

測試程式

const Application = require("spectron").Application
const assert = require("assert");

describe("My Test App", function () {
    // SETUP section
    let app;
    this.timeout(20000)
    before(function () {
        app = new Application({
            path: `/Applications/Mini Diary.app/Contents/MacOS/Mini Diary`,
        });
        return app.start()
            .catch(console.error)
    });
    // shutdown after all tests
    after(function () {
        if (app && app.isRunning()) {
            return app.stop();
        }
    });
    // TESTS section
    // test 1
    it("Should have the correct title", async function () {
        const title = await app.client.getTitle();

        assert.equal(title, "Mini Diary");
    });
});

能測試 일렉트로닉的關鍵就在上面程式碼內的 app ,把 app 定義出來後,就可以利用 스파이 크론的 미국 석유 학회去存取 전자 응용的各項屬性,再配合 모카的測試架構即可讓我們做到 전자 응용測試自動化.除了 app 以外的部分, describe() 、 it() 等都是 모카的測試用函示,關於 모카的用法請自行參閱 모카的網站或其他大大們的文章.
跑看看測試:

npx mocha test/test.js

結果正常的話應該像這樣:

My Test App
  ✓ Should have the correct title
1 passing (4s)

在上面的範例程式碼中,只有很簡單的確認 응용 프로그램的標題是否為 미니 다이어리在實際的測試場景中顯然會更複雜,應該會有大量的調用 Sepctron API對 응용 프로그램進行自動化操作以及確認 응용 프로그램視窗內的屬性值是否與預期相符,以及需要用 크롬開發者工具來查找元素與操作 위문하다等,這部分只能先富奸了.

스파이크론과 네트워크 구동

WebdriverIO 是一個 JavaScript的測試套件,它提供了一層 미국 석유 학회讓我們可以調用瀏覽器與網頁,雖然前面都沒提到它,但其實它也算是 스파이 크론的一部分,在安裝 스파이 크론的時候 WebdriverIO也會被裝進專案內.스파이 크론就是利用了 WebdriverIO的 미국 석유 학회來提供給我們操控 크롬與 전자 응용頁面的能力,可以更具體地說,스파이 크론只是對 WebdriverIO API做了一層封裝,在 WebdriverIO API文件內能調用的函式也都可以在 스파이 크론上面做調用.
附帶提醒,延續前面提到的版次問題,新舊版的 스파이 크론依賴的 WebdriverIO也會有新舊版的問題,確認一下專案 소포.json內 webdriverio 套件的版次,並且查閱 미국 석유 학회文件時也要注意文件版次與專案內安裝的 webdriverio 版次要相符.
回歸正題,想要在測試腳本裡面去操控頁面元素的話,就必須利用 스파이 크론的 API(也就是被封裝過的 WebdriverIO API)
首先是選擇器,先上範例:

let accountField = app.client.$('.account-input');
accountField.setValu('user1');

看到熟悉的 $() 錢字號函數與後面的 CSS選擇器語法,和 jQuery長一樣,雖然長一樣,不過 WebdriverIO並不依賴 jQuery只是借鑒錢字號這樣的函數命名而已,大概是希望提高對開發者的親切感吧.
在上面的範例的第二行,把元素抓到之後,就可以操作它,除了範例內做的填值之外,取值、點擊等都可以被實現.詳細的可調用的函式,請參考 WebdriverIO文件.

參考資料

Glue42 Desktop: Mocha and Spectron

使用 Mocha + Spectron 测试 Electron 打包的桌面版程序（1）

使用 Mocha + Spectron 测试 Electron 打包的桌面版程序（2）PO 模型

Spectron For Electron Apps Automation

Electron in Action: Chapter 13. Testing applications with Spectron

其它測試工具

TestComplete:Windows桌面端收費商業應用,可以拿來測 일렉트로닉好像很厲害,也很貴的貴.

Squish :跨平台自動化測試工具,也是很貴的貴.