https://github.com/yahoojapan/tappy
Analyze the sizes of buttons, links, and other elements on web pages, and output the tap success rate.
https://github.com/yahoojapan/tappy
Last synced: 13 days ago
JSON representation
Analyze the sizes of buttons, links, and other elements on web pages, and output the tap success rate.
- Host: GitHub
- URL: https://github.com/yahoojapan/tappy
- Owner: yahoojapan
- License: apache-2.0
- Created: 2025-08-25T07:01:52.000Z (about 2 months ago)
- Default Branch: main
- Last Pushed: 2025-09-30T06:22:00.000Z (21 days ago)
- Last Synced: 2025-09-30T08:29:16.068Z (21 days ago)
- Language: TypeScript
- Homepage: https://tappy.yahoo.co.jp/
- Size: 264 KB
- Stars: 18
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- Contributing: CONTRIBUTING.md
- License: LICENSE
Awesome Lists containing this project
README
---
[](https://www.npmjs.com/package/@lycorp-jp/tappy)
[](https://github.com/yahoojapan/tappy/actions/workflows/ci.yml)
Analyze the sizes of buttons, links, and other elements on web pages, and output the tap success rate.
## Installation
```bash
npm install @lycorp-jp/tappy puppeteer
# or
yarn add @lycorp-jp/tappy puppeteer
# or
pnpm add @lycorp-jp/tappy puppeteer
```
## Usage
```typescript
import { type Device, Tappy } from "@lycorp-jp/tappy";
import { PuppeteerAdapter } from "@lycorp-jp/tappy/adapters";
import puppeteer from "puppeteer";
// For accurate device specs, refer to: https://www.ios-resolution.com/
const device: Device = {
name: "iPhone 12 Pro",
width: 390,
height: 844,
scaleFactor: 3,
ppi: 460,
};
const browser = await puppeteer.launch();
const page = await browser.newPage();
const adapter = new PuppeteerAdapter(page);
await adapter.page.setViewport({
width: device.width,
height: device.height,
deviceScaleFactor: device.scaleFactor,
isMobile: true,
});
await adapter.page.goto("https://example.com/");
const tappy = new Tappy(adapter);
const result = await tappy.analyze(device);
console.log(result.elements);
// Example output:
// [
// {
// width: 136.984375, // Element width in CSS pixels
// height: 18, // Element height in CSS pixels
// left: 32, // X position from left edge
// top: 200.875, // Y position from top edge
// widthMm: 22.69..., // Element width in millimeters
// heightMm: 2.98..., // Element height in millimeters
// tapSuccessRate: 0.84... // Success rate (0-1, where 1 is 100%)
// }
// ]
await browser.close();
```
Check out the [examples](./examples) directory for other usage
## Contributing
Please see [CONTRIBUTING](./CONTRIBUTING.md) for details on how to get started.
## Project status
This package is in early development stage. The API may change significantly between releases without prior notice. Please use with caution in production environments.
## Citation
```bibtex
@misc{usuba2024tappy,
title={Tappy: Predicting Tap Accuracy of User-Interface Elements by Reverse-Engineering Webpage Structures},
author={Hiroki Usuba and Junichi Sato and Naomi Sasaya and Shota Yamanaka and Fumiya Yamashita},
year={2024},
eprint={2403.03097},
archivePrefix={arXiv},
primaryClass={cs.HC},
url={https://arxiv.org/abs/2403.03097},
}
```