miniprogram-visual-test

A visual regression testing tool for WeChat Mini Programs, inspired by cypress-plugin-visual-regression-diff. It helps you automate UI screenshot comparisons to catch visual changes and regressions in your miniprogram projects. Supports both Jest and Vitest.

Features

• Automated screenshot capture for miniprogram custom components
• Pixel-by-pixel image diffing with threshold configuration
• Integrates with Vitest and Jest
• Forwards wx.request to anywhere you want
• Easy to extend and customize

Installation

Install with npm:

npm install @devecorsoft/miniprogram-visual-test miniprogram-automator --save-dev

Or with yarn:

yarn add -D @devecorsoft/miniprogram-visual-test miniprogram-automator

Note that please make sure you have wechat miniprogram devtool installed.

Usage

Get started with Jest

1. Enable matcher in jest.config.js:

// jest.config.js
module.exports = {
  // ...existing config
  setupFilesAfterEnv: [
    // ...other setup files
    '@devecorsoft/miniprogram-visual-test/jest-matcher',
  ],
};

2. load test component and match screenshots

import { launchDevTool, loadTestComponent } from "../src/devTool/launcher.ts";
import type MiniProgram from "miniprogram-automator/out/MiniProgram";
import * as path from "path";

describe('screenshot', () => {
  let miniProgram: MiniProgram

  afterEach(() => miniProgram.close())

  it('should able to take screenshot for first running', async () => {
    const testProjectPath = path.resolve('.')
    loadTestComponent(
      path.resolve('test/test-component-js/test-component'),
      testProjectPath,
      {
        template: '<test-component title="visual" count="12"/>',
        includes: ['miniprogram_npm', 'styles', 'commonDeps']
      }
    )
    const devTool = await launchDevTool(appId, {forwardRequestTo: 'http://localhost:8080/path'})
    miniProgram = devTool.miniProgram
    
    const view = await devTool.page.$("view")
    await expect(view!.text()).resolves.toBe('js component')
    
    await expect(miniProgram).toMatchScreenshot({maxDiffThreshold: 0})
  })
})

Note that: see tests for all the usages.

Maintaining Stable Visual Testing

1. Use a fixed color profile by following these steps in DevTools: Settings → Open Chrome flags settings → Force color profile → sRGB.
2. Use monitors with similar physical resolutions. Although you can manually set the device's DPR (device pixel ratio) to 1 in the emulator, high-resolution monitors may still cause screenshots to double in size, making image comparisons less accurate.

Contributing

Contributions are welcome! Please open issues or pull requests for bug fixes, features, or documentation improvements.

License

This project is licensed under the MIT License.