🔜 den Miniprogrammpfad und erfassen Sie Ausnahmen, die während des Vorgangs auftreten, um festzustellen, ob diese Version Auswirkungen auf die Grundfunktionen des Miniprogramms hat.
Steuern Sie das Miniprogramm, um zur angegebenen Seite zu springen
Abrufen des Miniprogramm-Seitenelementstatus miniprogram-automator
Gehen Sie zu AppService Inject Code Snippets.
// 引入sdkconst automator = require('miniprogram-automator')// 启动微信开发者工具automator.launch({ // 微信开发者工具安装路径下的 cli 工具
// Windows下为安装路径下的 cli.bat
// MacOS下为安装路径下的 cli
cliPath: 'path/to/cli', // 项目地址，即要运行的小程序的路径
projectPath: 'path/to/project',
}).then(async miniProgram => { // miniProgram 为 IDE 启动后的实例
// 启动小程序里的 index 页面
const page = await miniProgram.reLaunch('/page/index/index') // 等待 500 ms
await page.waitFor(500) // 获取页面元素
const element = await page.$('.main-btn') // 点击元素
await element.tap() // 关闭 IDE
await miniProgram.close()
})复制代码gepackt werden, damit wir sie neu schreiben können Diese beiden Methoden fangen die eingehende Methode ab und bestimmen, ob der erste Parameter ein
-Objekt ist, um alle Ereignisse zu erfassen.// 暂存原生方法const originPage = Pageconst originComponent = Component// 改写 PagePage = (params) => { const names = Object.keys(params) for (const name of names) { // 进行方法拦截
if (typeof obj[name] === 'function') {
params[name] = hookMethod(name, params[name], false)
}
}
originPage(params)
}// 改写 ComponentComponent = (params) => { if (params.methods) { const { methods } = params const names = Object.keys(methods) for (const name of names) { // 进行方法拦截
if (typeof methods[name] === 'function') {
methods[name] = hookMethod(name, methods[name], true)
}
}
}
originComponent(params)
}const hookMethod = (name, method, isComponent) => { return function(...args) { const [evt] = args // 取出第一个参数
// 判断是否为 event 对象
if (evt && evt.target && evt.type) { // 记录用户行为
} return method.apply(this, args)
}
}复制代码const evtTypes = [ 'tap', // 点击
'input', // 输入
'confirm', // 回车
'longpress' // 长按]const hookMethod = (name, method) => { return function(...args) { const [evt] = args // 取出第一个参数
// 判断是否为 event 对象
if (
evt && evt.target && evt.type &&
evtTypes.includes(evt.type) // 判断事件类型
) { // 记录用户行为
} return method.apply(this, args)
}
}复制代码
Nachdem Sie den Ereignistyp ermittelt haben, müssen Sie noch klären, auf welches Element geklickt wurde. Die Gefahr des Miniprogramms besteht jedoch darin, dass das Zielattribut des Ereignisobjekts nicht den Klassennamen des Elements, sondern den Datensatz davon enthält Das Element kann erhalten werden. -Attribute aller Elemente nach Page kopieren. Component
<!-- 构建前 --><view></view><view></view><!-- 构建后 --><view></view><view></view>复制代码
eventAber nach dem Erhalt der Klasse gibt es eine weitere Gefahr. Das automatisierte Testtool des Miniprogramms kann die Elemente in der benutzerdefinierten Komponente auf der Seite nicht direkt abrufen. <!-- Page --><toast></toast><!-- Component --><view>
<text>{{text}}</text>
<view></view></view>复制代码// 如果直接查找 .toast-close 会得到 nullconst element = await page.$('.toast-close')
element.tap() // Error!// 必须先通过自定义组件的 tagName 找到自定义组件// 再从自定义组件中通过 className 查找对应元素const element = await page.$('toast .toast-close')
element.tap()复制代码Wenn wir also die Operation erstellen, müssen wir auch tagName für das Element einfügen.
<!-- 构建前 --><view></view><toast></toast><!-- 构建后 --><view></view><toast></toast>复制代码
Jetzt können wir weiterhin fröhlich das Nutzerverhalten aufzeichnen.
// 记录用户行为的数组const actions = [];// 添加用户行为const addAction = (type, query, value = '') => {
actions.push({ time: Date.now(),
type,
query,
value
})
}// 代理事件方法const hookMethod = (name, method, isComponent) => { return function(...args) { const [evt] = args // 取出第一个参数
// 判断是否为 event 对象
if (
evt && evt.target && evt.type &&
evtTypes.includes(evt.type) // 判断事件类型
) { const { type, target, detail } = evt const { id, dataset = {} } = target const { className = '' } = dataset const { value = '' } = detail // input事件触发时，输入框的值
// 记录用户行为
let query = ''
if (isComponent) { // 如果是组件内的方法，需要获取当前组件的 tagName
query = `${this.dataset.tagName} `
} if (id) { // id 存在，则直接通过 id 查找元素
query += id
} else { // id 不存在，才通过 className 查找元素
query += className
}
addAction(type, query, value)
} return method.apply(this, args)
}
}复制代码
-Methode von Page direkt delegieren. // 记录用户行为的数组const actions = [];// 添加用户行为const addAction = (type, query, value = '') => { if (type === 'scroll' || type === 'input') { // 如果上一次行为也是滚动或输入，则重置 value 即可
const last = this.actions[this.actions.length - 1] if (last && last.type === type) {
last.value = value
last.time = Date.now() return
}
}
actions.push({ time: Date.now(),
type,
query,
value
})
}
Page = (params) => { const names = Object.keys(params) for (const name of names) { // 进行方法拦截
if (typeof obj[name] === 'function') {
params[name] = hookMethod(name, params[name], false)
}
} const { onPageScroll } = params // 拦截滚动事件
params.onPageScroll = function (...args) { const [evt] = args const { scrollTop } = evt
addAction('scroll', '', scrollTop)
onPageScroll.apply(this, args)
}
originPage(params)
}复制代码Benutzerverhalten wiederherstellenclassdata-classNameNachdem der Benutzervorgang abgeschlossen ist, kann der JSON-Text des Benutzerverhaltens in der Konsole ausgegeben werden. Nach dem Kopieren des JSON-Textes kann dieser über das Automatisierungstool ausgeführt werden.
// 引入sdkconst automator = require('miniprogram-automator')// 用户操作行为const actions = [
{ type: 'tap', query: 'goods .title', value: '', time: 1596965650000 },
{ type: 'scroll', query: '', value: 560, time: 1596965710680 },
{ type: 'tap', query: 'gotoTop', value: '', time: 1596965770000 }
]// 启动微信开发者工具automator.launch({ projectPath: 'path/to/project',
}).then(async miniProgram => { let page = await miniProgram.reLaunch('/page/index/index')
let prevTime for (const action of actions) { const { type, query, value, time } = action if (prevTime) { // 计算两次操作之间的等待时间
await page.waitFor(time - prevTime)
} // 重置上次操作时间
prevTime = time
// 获取当前页面实例
page = await miniProgram.currentPage() switch (type) { case 'tap': const element = await page.$(query) await element.tap() break; case 'input': const element = await page.$(query) await element.input(value) break; case 'confirm': const element = await page.$(query) await element.trigger('confirm', { value }); break; case 'scroll': await miniProgram.pageScrollTo(value) break;
} // 每次操作结束后，等待 5s，防止页面跳转过程中，后面的操作找不到页面
await page.waitFor(5000)
} // 关闭 IDE
await miniProgram.close()
})复制代码Dies ist nur eine einfache Wiederherstellung des Betriebsverhaltens des Benutzers. Während des eigentlichen Betriebs sind auch Netzwerkanforderungen und lokale Speichermocks beteiligt, die hier nicht beschrieben werden. Gleichzeitig können wir auch auf das Jest-Tool zugreifen, um das Schreiben von Anwendungsfällen zu erleichtern.
Für scheinbar schwierige Bedürfnisse können Sie immer die entsprechende Lösung finden, solange Sie sie sorgfältig untersuchen. Darüber hinaus gibt es in den Automatisierungstools von WeChat-Miniprogrammen wirklich viele Fallstricke. Wenn Sie auf Probleme stoßen, können Sie diese zunächst in der Miniprogramm-Community finden Probleme, die im Moment nicht gelöst werden können und die man nur auf andere Weise lösen kann. Abschließend wünsche ich mir, dass die Welt fehlerfrei ist.
Verwandte Lernempfehlungen: Tutorial zur Entwicklung eines öffentlichen WeChat-Kontos
Das obige ist der detaillierte Inhalt vonDetaillierte Erläuterung des automatisierten Testens kleiner Programme. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!
