13518219792

建站动态

根据您的个性需求进行定制 先人一步 抢占小程序红利时代

创新互联百度小程序教程:脚本示例

脚本示例

智能小程序自动化 SDK 本身不提供测试框架。这意味着你可以将它与市面上流行的任意 Node.js 测试框架结合使用,以此来达到编写小程序测试用例的目的。接下来将使用 Jest 测试框架来编写一个实际的小程序自动化测试。

创新互联公司是一家集网站建设,横山企业网站建设,横山品牌网站建设,网站定制,横山网站建设报价,网络营销,网络优化,横山网站推广为一体的创新建站企业,帮助传统企业提升企业形象加强企业竞争力。可充分满足这一群体相比中小企业更为丰富、高端、多元的互联网需求。同时我们时刻保持专业、时尚、前沿,时刻以成就客户成长自我,坚持不断学习、思考、沉淀、净化自己,让我们为更多的企业打造出实用型网站。

完整示例

以下讲解内容的完整示例可以从 点击这里 下载,确保 运行环境 符合要求后,执行以下命令,即可开始在工具中运行自动化测试。

 
 
 
  1. npm install
  2. npm run test

Tips: 如果在安装jest过程中出现下图提示,请点击“安装”。

接下来,我们分步骤对整个测试用例的编写过程进行介绍。

测试对象

这里以小程序示例为测试对象,将 小程序示例 的源码下载到本地,然后打开小程序开发者工具,将该项目导入进去。

初始化环境

新建文件夹test目录用于放置测试代码,执行以下命令安装依赖:

 
 
 
  1. npm i swan-automator jest --save-dev

按照 快速开始 中的使用说明安装符合要求的开发者工具版本并配置运行环境。

脚本编写

现在我们准备为小程序示例的组件首页编写测试用例,如下图所示:

创建测试文件 test/component.spec.js 后,首先要做的是:

  1. 启动并连接工具
  2. 重新启动小程序到组件首页
  3. 断开连接并关闭工具

对应脚本如下:

 
 
 
  1. const automator = require('swan-automator');
  2. describe('index', () => {
  3. let smartProgram;
  4. let page;
  5. beforeAll(async () => {
  6. smartProgram = await automator.launch({
  7. projectPath: 'path/to/swan-demo'
  8. });
  9. page = await smartProgram.reLaunch('/pages/component/component');
  10. }, 50000);
  11. afterAll(async () => {
  12. await smartProgram.close();
  13. });
  14. });

开发者工具项目窗口启动及初次编译需要一定时长,Jest 默认 5 秒超时太短,需修改。

1. 测试搜索框文字

  1. 通过 text 选择器获取目标元素
  2. 目标元素应该是个 text 组件
  3. 目标元素应该包含有“搜索组件和接口”的文本

对应脚本如下:

 
 
 
  1. it('text', async () => {
  2. const text = await page.$('text');
  3. expect(text.tagName).toBe('text');
  4. expect(await text.text()).toContain('搜索组件和接口');
  5. });

2. 测试列表项

  1. 获取列表元素集合
  2. 目标元素集的个数应该是 8 个
  3. 第一个列表元素的标题应该是“视图窗器”

对应脚本如下:

 
 
 
  1. it('items', async () => {
  2. const lists = await page.$$('.item');
  3. expect(lists.length).toBe(8);
  4. const list = await lists[0].$('.item-desc');
  5. expect(await list.text()).toBe('视图容器');
  6. });

3. 测试列表项行为

  1. 点击列表标题应该展示或隐藏子列表
  2. 点击子列表项应该会跳转到指定页面

对应脚本如下:

 
 
 
  1. it('item action', async () => {
  2. const className = 'item-close';
  3. const firstItem = await page.$('.item');
  4. expect(await firstItem.attribute('class')).toContain(className);
  5. await firstItem.tap();
  6. expect(await firstItem.attribute('class')).toEqual(expect.not.stringContaining(className));
  7. await firstItem.tap();
  8. expect(await firstItem.attribute('class')).toContain(className);
  9. await firstItem.tap();
  10. const subItem = await page.$('.sub-item');
  11. await subItem.tap();
  12. await page.waitFor(500);
  13. expect((await smartProgram.currentPage()).path).toBe('pages/view/view');
  14. });

脚本执行

编写完脚本后直接执行以下脚本:

 
 
 
  1. npx jest test/component.spec.js

如果看到控制台输出以下信息,说明测试成功。

 
 
 
  1. PASS test/component.spec.js (23.384s)
  2. index
  3. text (82ms)
  4. items (34ms)
  5. item action (642ms)
  6. Test Suites: 1 passed, 1 total
  7. Tests: 3 passed, 3 total
  8. Snapshots: 0 total
  9. Time: 24.522s, estimated 33s
  10. Ran all test suites matching /test\/component.spec.js/i.

当前题目:创新互联百度小程序教程:脚本示例
文章转载:http://cdbrznjsb.com/article/coijjgh.html

其他资讯

让你的专属顾问为你服务