百度智能小程序 腳本示例

腳本示例

智能小程序自動(dòng)化 SDK 本身不提供測(cè)試框架。這意味著你可以將它與市面上流行的任意 Node.js 測(cè)試框架結(jié)合使用，以此來(lái)達(dá)到編寫(xiě)小程序測(cè)試用例的目的。接下來(lái)將使用 Jest 測(cè)試框架來(lái)編寫(xiě)一個(gè)實(shí)際的小程序自動(dòng)化測(cè)試。

完整示例

以下講解內(nèi)容的完整示例可以從 點(diǎn)擊這里 下載，確保 運(yùn)行環(huán)境 符合要求后，執(zhí)行以下命令，即可開(kāi)始在工具中運(yùn)行自動(dòng)化測(cè)試。

npm install
npm run test

Tips: 如果在安裝jest過(guò)程中出現(xiàn)下圖提示，請(qǐng)點(diǎn)擊“安裝”。

接下來(lái)，我們分步驟對(duì)整個(gè)測(cè)試用例的編寫(xiě)過(guò)程進(jìn)行介紹。

測(cè)試對(duì)象

這里以小程序示例為測(cè)試對(duì)象，將 小程序示例 的源碼下載到本地，然后打開(kāi)小程序開(kāi)發(fā)者工具，將該項(xiàng)目導(dǎo)入進(jìn)去。

初始化環(huán)境

新建文件夾 test 目錄用于放置測(cè)試代碼，執(zhí)行以下命令安裝依賴：

npm i swan-automator jest --save-dev

按照 快速開(kāi)始 中的使用說(shuō)明安裝符合要求的開(kāi)發(fā)者工具版本并配置運(yùn)行環(huán)境。

腳本編寫(xiě)

現(xiàn)在我們準(zhǔn)備為小程序示例的組件首頁(yè)編寫(xiě)測(cè)試用例，如下圖所示：

創(chuàng)建測(cè)試文件 test/component.spec.js 后，首先要做的是：

1. 啟動(dòng)并連接工具
2. 重新啟動(dòng)小程序到組件首頁(yè)
3. 斷開(kāi)連接并關(guān)閉工具

對(duì)應(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();
    });
});

開(kāi)發(fā)者工具項(xiàng)目窗口啟動(dòng)及初次編譯需要一定時(shí)長(zhǎng)，Jest 默認(rèn) 5 秒超時(shí)太短，需修改。

1. 測(cè)試搜索框文字

1. 通過(guò) text 選擇器獲取目標(biāo)元素
2. 目標(biāo)元素應(yīng)該是個(gè) text 組件
3. 目標(biāo)元素應(yīng)該包含有“搜索組件和接口”的文本

對(duì)應(yīng)腳本如下：

it('text', async () => {
    const text = await page.$('text');
    expect(text.tagName).toBe('text');
    expect(await text.text()).toContain('搜索組件和接口');
});

2. 測(cè)試列表項(xiàng)

1. 獲取列表元素集合
2. 目標(biāo)元素集的個(gè)數(shù)應(yīng)該是 8 個(gè)
3. 第一個(gè)列表元素的標(biāo)題應(yīng)該是“視圖窗器”

對(duì)應(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. 測(cè)試列表項(xiàng)行為

1. 點(diǎn)擊列表標(biāo)題應(yīng)該展示或隱藏子列表
2. 點(diǎn)擊子列表項(xiàng)應(yīng)該會(huì)跳轉(zhuǎn)到指定頁(yè)面

對(duì)應(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í)行

編寫(xiě)完腳本后直接執(zhí)行以下腳本：

npx jest test/component.spec.js

如果看到控制臺(tái)輸出以下信息，說(shuō)明測(cè)試成功。

 PASS  test/component.spec.js (23.384s)
  index
    ? text (82ms)
    ? items (34ms)
    ? item action (642ms)

Test Suites: 1 passed, 1 total
Tests:       3 passed, 3 total
Snapshots:   0 total
Time:        24.522s, estimated 33s
Ran all test suites matching /test\/component.spec.js/i.