Catch unexpected visual and accessibility changes and UI bugs
npm install happo
An open source library for integrating with happo.io - a visual and accessibility regression testing platform that helps you catch unintended changes in your applications.
For comprehensive documentation, visit docs.happo.io.
- CLI Tool: Includes a command-line interface for easy integration
- Flexible Configuration: Support for multiple configuration file formats
- TypeScript Support: Built with TypeScript and provides full type definitions
- ES Modules: Uses modern ES modules for better tree-shaking and performance
``bash`
npm install happo --save-devor
pnpm add happo --save-devor
yarn add happo --dev
Create a happo.config.ts file in your project root:
`typescript
import { defineConfig } from 'happo';
export default defineConfig({
apiKey: process.env.HAPPO_API_KEY!,
apiSecret: process.env.HAPPO_API_SECRET!,
targets: {
'chrome-desktop': {
type: 'chrome',
viewport: '1280x720',
},
'firefox-desktop': {
type: 'firefox',
viewport: '1280x720',
},
'ios-safari': {
type: 'ios-safari',
},
},
});
`
Run Happo using the CLI:
`bash`
npx happo
The CLI will automatically find your configuration file and run the visual regression test suite.
The library automatically detects configuration files in the following order:
- happo.config.jshappo.config.mjs
- happo.config.cjs
- happo.config.ts
- happo.config.mts
- happo.config.cts
-
- apiKey & apiSecret: Authentication credentials for happo.io
- integration: Set up the integration type
- targets: Target configurations, including regular browsers and accessibility targets
- project: Optional project name
Supported browser types:
- Desktop: chrome, firefox, edge, safari, accessibilityios-safari
- Mobile: , ipad-safari
Each target supports advanced options like:
- Viewport sizing
- Maximum dimensions
- Color scheme preferences
- Settings for silencing animations
Pull requests are welcome! For major changes, please open an issue first to discuss what you would like to change.
1. Clone the repository
2. Install dependencies: pnpm installpnpm build
3. Build the project: pnpm all
4. Run all tests and checks:
To run the tests you will need a .env.local file with some keys. Useenv.example` as a starting point.
- Uses ESLint for code linting
- Prettier for code formatting
- TypeScript for type safety
This project is licensed under the MIT License - see the LICENSE file for details.
- Documentation
- happo.io
- npm package
For support and questions:
- Check the documentation
- Open an issue in this GitHub repository
- Contact happo.io support at support@happo.io