{"id":21294351,"url":"https://github.com/khc-zhihao/webe2egui","last_synced_at":"2026-07-07T03:31:19.470Z","repository":{"id":96218318,"uuid":"290455924","full_name":"KHC-ZhiHao/WebE2EGui","owner":"KHC-ZhiHao","description":null,"archived":false,"fork":false,"pushed_at":"2022-01-23T05:50:36.000Z","size":6204,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":2,"default_branch":"master","last_synced_at":"2025-01-22T06:48:02.737Z","etag":null,"topics":["e2e-tests","gui"],"latest_commit_sha":null,"homepage":"","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/KHC-ZhiHao.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2020-08-26T09:39:46.000Z","updated_at":"2022-01-20T14:48:58.000Z","dependencies_parsed_at":"2023-04-22T17:31:12.573Z","dependency_job_id":null,"html_url":"https://github.com/KHC-ZhiHao/WebE2EGui","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/KHC-ZhiHao%2FWebE2EGui","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/KHC-ZhiHao%2FWebE2EGui/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/KHC-ZhiHao%2FWebE2EGui/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/KHC-ZhiHao%2FWebE2EGui/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/KHC-ZhiHao","download_url":"https://codeload.github.com/KHC-ZhiHao/WebE2EGui/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":243762269,"owners_count":20343979,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["e2e-tests","gui"],"created_at":"2024-11-21T13:58:59.818Z","updated_at":"2025-10-27T15:12:59.559Z","avatar_url":"https://github.com/KHC-ZhiHao.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"\u003cbr\u003e\n\n\u003cp align=\"center\"\u003e\u003cimg src=\"./logo.png\"\u003e\u003c/p\u003e\n\n\u003cp align=\"center\" style=\"font-size:2em\"\u003eWEB E2E GUI\u003c/p\u003e\n\u003ch3 align=\"center\"\u003e可介面操作 E2E 測試工具\u003c/h3\u003e\n\n\u003cp align=\"center\"\u003e\n    \u003ca href=\"https://www.npmjs.com/package/web-e2e-gui\"\u003e\u003cimg src=\"https://img.shields.io/npm/v/web-e2e-gui.svg\"\u003e\u003c/a\u003e\n    \u003ca href=\"https://github.com/KHC-ZhiHao/WebE2EGui\"\u003e\u003cimg src=\"https://img.shields.io/github/stars/KHC-ZhiHao/WebE2EGui.svg?style=social\"\u003e\u003c/a\u003e\n    \u003cbr\u003e\n\u003c/p\u003e\n\n\u003cbr\u003e\n\n## Table Of Contents\n\n* [Summary](#summary)\n* [安裝](#%e5%ae%89%e8%a3%9d)\n* [建議](#%e5%bb%ba%e8%ad%b0)\n* [操作手冊](#%e6%93%8d%e4%bd%9c%e6%89%8b%e5%86%8a)\n\n---\n\n## Summary\n\nWEB-E2E-GUI 是以 [Protractor](https://www.protractortest.org/) 為主的可介面操作 E2E 測試工具。\n\n目標與定位是在中小型專案，大多是人手不足的情況下(大多時候專案只有兩位人員)能夠平均分擔 QA 的部分，\n\n如果是大型專案或有專門進行 QA 的團隊基本上可以無視本工具。\n\nWEG有以下特點：\n\n1. 能夠輸出序列化檔案，利於工程師與其他專案管理人員交流。\n\n2. 最終結果仍是輸出 `Protractor` 專案，就算捨棄 GUI 工具也能擁有原生的 E2E 測試檔案。\n\n3. 進行測試時可以看到美麗的測試 Log。\n\n4. 可視化與可自定義操作的按鈕介面。\n\n---\n\n## 安裝\n\nWEG仍是較為工程師導向的工具，你必須安裝 [NodeJs](https://nodejs.org/en/) 才能正常運作。\n\n```bash\n# 安裝\nnpm install web-e2e-gui -g\n# 執行\nweg\n```\n\n---\n\n## 建議\n\n### JavaScript\n\n雖然盡可能的使用可視化按鍵來操作，但不用幻想不會 JavaScript 也能暢用 WEG，沒有 Node 的操作經驗大概在安裝就會卡關。\n\n### Protractor\n\n由於所有的程式碼都在 `Protractor(jasmine)` 中執行，理解其判斷方式與邏輯有助於寫出良好的測試。\n\n\u003e `Protractor` 是源於 `Angular` 的測試工具，但本工具只借用其自動化測試功能，在運行時會關閉 `Angular` 的檢測。\n\n### 邏輯測試應該通通由Javascript編寫\n\n有時候需要複雜的邏輯驗證，建議直接編寫 JavaScript，因此建議由工程師先行編寫測試，再由其他專案負責人補足應用方的應用操作。\n\n---\n\n## 操作手冊\n\n### 應用Store\n\n所有的`Spec`中都有一個全局且獨立的 store 物件，可以藉由該物件進行誇模板的測試：\n\n![store1](https://github.com/KHC-ZhiHao/web-e2e-gui/raw/master/images/store1.png)\n\n![store2](https://github.com/KHC-ZhiHao/web-e2e-gui/raw/master/images/store2.png)\n\n運行結果：\n\n![store3](https://github.com/KHC-ZhiHao/web-e2e-gui/raw/master/images/store3.png)\n\n### 使用變數\n\n你可以在工具列上看到 `(x)` 的按鈕，點擊後會出現變數編輯畫面。\n\n在所有文字輸出之後，WEG 會將 {key} 轉換成 Protractor Params：\n\n![var1](https://github.com/KHC-ZhiHao/web-e2e-gui/raw/master/images/var1.png)\n\n![var2](https://github.com/KHC-ZhiHao/web-e2e-gui/raw/master/images/var2.png)\n\n```js\nit('輸出結果', async function() {\n    console.log('執行 =\u003e C')\n    await browser.sleep(120)\n    await (async () =\u003e {\n        console.log('動作 =\u003e 驗證網址 包含 {baseUrl}')\n        await expect(await browser.getCurrentUrl()).toMatch(`${browser.params['baseUrl']}`)\n        await browser.sleep(100)\n    })()\n})\n```\n\n---\n\n### 自定義按鈕\n\n你需要理解 JavaScript 才能開始自訂按鈕，點擊自定義按鈕後可以建立一個按鈕並創造一個範例：\n\n```js\n{\n    // 短說明\n    info: '短說明',\n    // 點擊Help按鈕時出現的詳細說明，支援HTML格式\n    help: '詳細說明',\n    // 本按鈕的主題顏色\n    color: '#000000',\n    // 按鈕上的文字\n    btnText: '按鈕文字',\n    // 選項\n    props: {\n        value: {\n            type: 'text',\n            info: '毫秒',\n            default: '1000'\n        }\n    },\n    // 在模板與測試訊息中出現的文字\n    display(props) {\n        return '等待' + props.value + '毫秒'\n    },\n    // 驗證Props的格式是否正確，回傳字串代表錯誤\n    validate(props) {\n        let result = Number(props.value)\n        if (isNaN(result)) {\n            return '必須為數字'\n        } else {\n            return true\n        }\n    },\n    // 輸出成Protractor的文本，注意要使用變數的字串必須使用``包裹起來。\n    write(props) {\n        return 'await browser.sleep(' + props.value + ')'\n    }\n}\n```\n\n#### 輸出結果\n\n所有由 `write` 返回的結果都會輸出在一個 `async` 閉包內，因此你可以較大膽地宣告一些行為，輸出如下：\n\n```js\nawait (async () =\u003e {\n    console.log('動作 =\u003e 等待 1000 毫秒')\n    await browser.sleep(1000)\n    await browser.sleep(100) // 每個動作都會間格100毫秒\n})()\n```\n\n\u003e 其實 WEG 就是將模板轉化成程式碼的工具而已。\n\n#### Event\n\n有些功能比較難在 Node 中實現，例如：多媒體，此時可以藉由 `console.log('@event:{my-event}')` 推播 event 給瀏覽器知道：\n\n##### play-sound\n\n要求播放聲音：\n\n```js\nwrite(props) {\n    return `console.log('@event:play-sound')`\n}\n```\n\n#### 選項列表\n\n`Porp` 是使用者操作的核心目標，各類行所需要的屬性如下：\n\n##### text\n\n顯示單行文字輸入框。\n\n```js\n{\n    type: 'text',\n    info: 'label', // 文字框說明\n    show: (props) =\u003e { return Boolean }, // 回傳true即顯示\n    default: 'hello world.' // 預設值\n}\n```\n\n##### radio-group\n\n顯示多個選項。\n\n```js\n{\n    type: 'radio-group',\n    info: 'label', // 選項說明\n    // 顯示的選項，text是顯示文字，value是選取的值\n    options: [\n        {\n            text: '新增',\n            value: 'add'            \n        },\n        {\n            text: '清除',\n            value: 'clear'  \n        }\n    ],\n    show: (props) =\u003e { return Boolean }, // 回傳true即顯示\n    default: 'clear' // 預設值\n}\n```\n\n##### javascript\n\njavascript 的文字編輯器。\n\n```js\n{\n    type: 'javascript',\n    info: 'editor', // 編輯器說明\n    show: (props) =\u003e { return Boolean }, // 回傳true即顯示\n    default: '{}' // 預設值\n}\n```\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fkhc-zhihao%2Fwebe2egui","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fkhc-zhihao%2Fwebe2egui","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fkhc-zhihao%2Fwebe2egui/lists"}