創(chuàng)新互聯(lián)百度小程序教程：腳本示例
- 腳本示例
- 完整示例
- 測試對象
- 初始化環(huán)境
- 腳本編寫
- 1. 測試搜索框文字
- 2. 測試列表項(xiàng)
- 3. 測試列表項(xiàng)行為
- 腳本執(zhí)行
腳本示例
智能小程序自動(dòng)化 SDK 本身不提供測試框架。這意味著你可以將它與市面上流行的任意 Node.js 測試框架結(jié)合使用，以此來達(dá)到編寫小程序測試用例的目的。接下來將使用 Jest 測試框架來編寫一個(gè)實(shí)際的小程序自動(dòng)化測試。
創(chuàng)新互聯(lián)公司是一家集網(wǎng)站建設(shè),橫山企業(yè)網(wǎng)站建設(shè),橫山品牌網(wǎng)站建設(shè),網(wǎng)站定制,橫山網(wǎng)站建設(shè)報(bào)價(jià),網(wǎng)絡(luò)營銷,網(wǎng)絡(luò)優(yōu)化,橫山網(wǎng)站推廣為一體的創(chuàng)新建站企業(yè)，幫助傳統(tǒng)企業(yè)提升企業(yè)形象加強(qiáng)企業(yè)競爭力?？沙浞譂M足這一群體相比中小企業(yè)更為豐富、高端、多元的互聯(lián)網(wǎng)需求。同時(shí)我們時(shí)刻保持專業(yè)、時(shí)尚、前沿，時(shí)刻以成就客戶成長自我，堅(jiān)持不斷學(xué)習(xí)、思考、沉淀、凈化自己，讓我們?yōu)楦嗟钠髽I(yè)打造出實(shí)用型網(wǎng)站。
完整示例
以下講解內(nèi)容的完整示例可以從 點(diǎn)擊這里 下載，確保 運(yùn)行環(huán)境 符合要求后，執(zhí)行以下命令，即可開始在工具中運(yùn)行自動(dòng)化測試。
npm installnpm run test
Tips: 如果在安裝jest過程中出現(xiàn)下圖提示，請點(diǎn)擊“安裝”。
接下來，我們分步驟對整個(gè)測試用例的編寫過程進(jìn)行介紹。
測試對象
這里以小程序示例為測試對象，將 小程序示例 的源碼下載到本地，然后打開小程序開發(fā)者工具，將該項(xiàng)目導(dǎo)入進(jìn)去。
初始化環(huán)境
新建文件夾test目錄用于放置測試代碼，執(zhí)行以下命令安裝依賴：
npm i swan-automator jest --save-dev
按照 快速開始 中的使用說明安裝符合要求的開發(fā)者工具版本并配置運(yùn)行環(huán)境。
腳本編寫
現(xiàn)在我們準(zhǔn)備為小程序示例的組件首頁編寫測試用例，如下圖所示：
創(chuàng)建測試文件 test/component.spec.js 后，首先要做的是：
- 啟動(dòng)并連接工具
- 重新啟動(dòng)小程序到組件首頁
- 斷開連接并關(guān)閉工具
對應(yīng)腳本如下：
const automator = require('swan-automator');describe('index', () => {let smartProgram;let page;beforeAll(async () => {smartProgram = await automator.launch({projectPath: 'path/to/swan-demo'});page = await smartProgram.reLaunch('/pages/component/component');}, 50000);afterAll(async () => {await smartProgram.close();});});
開發(fā)者工具項(xiàng)目窗口啟動(dòng)及初次編譯需要一定時(shí)長，Jest 默認(rèn) 5 秒超時(shí)太短，需修改。
1. 測試搜索框文字
- 通過 text 選擇器獲取目標(biāo)元素
- 目標(biāo)元素應(yīng)該是個(gè) text 組件
- 目標(biāo)元素應(yīng)該包含有“搜索組件和接口”的文本
對應(yīng)腳本如下：
it('text', async () => {const text = await page.$('text');expect(text.tagName).toBe('text');expect(await text.text()).toContain('搜索組件和接口');});
2. 測試列表項(xiàng)
- 獲取列表元素集合
- 目標(biāo)元素集的個(gè)數(shù)應(yīng)該是 8 個(gè)
- 第一個(gè)列表元素的標(biāo)題應(yīng)該是“視圖窗器”
對應(yīng)腳本如下：
it('items', async () => {const lists = await page.$$('.item');expect(lists.length).toBe(8);const list = await lists[0].$('.item-desc');expect(await list.text()).toBe('視圖容器');});
3. 測試列表項(xiàng)行為
- 點(diǎn)擊列表標(biāo)題應(yīng)該展示或隱藏子列表
- 點(diǎn)擊子列表項(xiàng)應(yīng)該會(huì)跳轉(zhuǎn)到指定頁面
對應(yīng)腳本如下：
it('item action', async () => {const className = 'item-close';const firstItem = await page.$('.item');expect(await firstItem.attribute('class')).toContain(className);await firstItem.tap();expect(await firstItem.attribute('class')).toEqual(expect.not.stringContaining(className));await firstItem.tap();expect(await firstItem.attribute('class')).toContain(className);await firstItem.tap();const subItem = await page.$('.sub-item');await subItem.tap();await page.waitFor(500);expect((await smartProgram.currentPage()).path).toBe('pages/view/view');});
腳本執(zhí)行
編寫完腳本后直接執(zhí)行以下腳本：
npx jest test/component.spec.js
如果看到控制臺(tái)輸出以下信息，說明測試成功。
PASS test/component.spec.js (23.384s)indextext (82ms)items (34ms)item action (642ms)Test Suites: 1 passed, 1 totalTests: 3 passed, 3 totalSnapshots: 0 totalTime: 24.522s, estimated 33sRan all test suites matching /test\/component.spec.js/i.
分享文章：創(chuàng)新互聯(lián)百度小程序教程：腳本示例
轉(zhuǎn)載來于：http://www.jiaotiyi.com/article/coijjgh.html