npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

@mpxjs/e2e

v0.0.13

Published

基于官方自动化库`miniprogram-automator`上进行了封装,提供了wait模式和mock的功能,另外获取dom元素更加稳定便捷。

Downloads

99

Readme

e2e-extension

基于官方自动化库miniprogram-automator上进行了封装,提供了wait模式和mock的功能,另外获取dom元素更加稳定便捷。

前置

mpx低版本需要在creatApp()上挂载xfetch, mixin([email protected]版本以上则无需此步骤)

  createApp({
    mixin: mpx.mixin.
    xfetch: mpx.xfetch
  })

发布

执行 npm run release 执行命令之前,请确保 report-client 已经 build,并且产出已经在 report-server 目录下。 由于 report-client 初始化比较耗时,发布过程中提供跳过选项,请自行判断是否需要 npm i

USAGE

Install

  pnpm add -D @mpxjs/e2e

API

1. Automator

Automator 模块提供了启动及连接开发者工具的方法。

继承微信自动化sdk

【新增方法】

1.1 initMock

初始化mock,提供mock需要的配置可实现本地mock或更改接口返回参数

  interface E2eMockConfig {
    staticDir: string, // 本地文件目录:
    debug: boolean // debug模式
  }

  Automator.initMock(mockCfg: E2eMockConfig): Promise<MiniProgram>

1.2 setMock

设置需要mock的路径和返回结果

  Automator.setMock (path:string, response:any): () => void

  // 示例:
  let un = Automator.setMock('https://api.hongyibo.com.cn/gulfstream/pre-sale/v1/other/pGetIndexInfo', {
    errno: 0,
    errmsg: 'mock-index-info',
    data: {
      a: 1,
      b: 2,
      c: 3
    }
  });

  // 需要取消时可以调用 un,注意这一步骤非必须!!
  un(); 

参数:

  1. path: 接口
  2. response: 该接口响应的 mock 数据

返回值:取消函数,调用该函数即可从 mock map 中移除该 mock

1.3 removeMockFromMap

从 mock map 中移除指定 path 对应的的 mock 数据;

  Automator.removeMockFromMap (path:string): void

2. Miniprogram

继承微信自动化sdk

【新增方法】

2.1 wait

稳定等待['页面', '组件', '组件更新', '接口发起', '接口返回'],解决waitFor不能解决时间不确定的情况,发生报错。并且增加多种等待时机,更加掌控e2e流程


  wait(path: string, type?: string): Promise<string | undefined> | void;

  const miniProgram = await Automator.launch({
    projectPath: './dist/wx'
  })
  // 页面
  page = await miniProgram.reLaunch('/pages/index/index')
  await miniProgram.wait('pages/index/index')
  // 组件
  const suggest1 = await miniProgram.wait('suggest/components/suggestcaafe3e4/suggest', 'component')

  // 组件更新
  const suggest2 = await miniProgram.wait('suggest/components/suggestcaafe3e4/suggest', 'componentUpdate')

  // 请求
  const request = await miniProgram.wait('https://xxxx.xxx/xxx', 'request')

  // 返回结果
  const response = await miniProgram.wait('https://xxxx.xxx/xxx', 'response')
  expect(response.options.data.errno).toBe(0)
  const data = response.options.data.data
  expect(data.status).toBe(1)

2.2 waitAll

同时等待多个操作

  waitAll<T> (args:[Promise<T>]): Promise<any>

  const [suggest] = await miniProgram.waitAll(miniProgram.wait('suggest/suggestcaafe3e4/suggest'), inputbtn.tap())

2.3 currentPagePath

获取当前页面的路径

  const curPath = await miniProgram.currentPagePath()
  expect(curPath).toBe('pages/index/index')

3 Page

继承微信自动化sdk

【重写方法】重写page和element的$,$$方法

3.1 $

获取dom元素,不同官方$的是,配合components名称可获取自定义组件中的元素,解决官方$获取不到的问题。(不传入components名称则走微信原生方式获取) 切忌传入组件名只能和class选择器配合使用,其他选择器方式可用原生方式

  $(className: string, componentsName?: string): Promise<Element | any>

  const confirmbtn = await page.$('confirm-btn', 'homepage/components/confirmef91faba/confirm')

  const confirmbtn2 = await page.$('.confirm-btn')
  const view = await page.$('view')
  const id = await page.$('#id')

3.2 $$

$$同$

  $(className: string, componentsName?: string): Promise<any>
  const btns = await page.$$('confirm-btn', 'homepage/components/btnf91faba/btn')

FAQ

  • $方法为什么取不到dom元素?

    可能存在以下几种情况

    1. dom类名不对,或者组件名不对,或者类名和组件名不匹配
    2. page对象没有更新,如果跳转到某一个页面,需要重新赋值page即:
      page = await miniProgram.currentPage()
    1. dom元素未渲染,即可能用wx:if控制的元素,如需要获取一定要保证该元素在获取时渲染在模拟器或者真机上
  • 组件名的hash值一改动代码就会发生变化,如何固定hash?

    在构建配置中加入此参数

      new MpxWebpackPlugin({
        pathHashMode: 'relative' // 可保证hash不变
      })
  • <web-view>中的内容能自动化测试吗?

    不能,web-view中的内容无法获取到

  • 登录功能能自动化测试吗?

    不能,工具无法操作原生的授权弹窗

  • 可以不用jest配合测试吗?

    可以,你可以把这个库理解成调用微信ide的工具库,jest是测试框架的一种,两者配合使用可以达到你想要的效果