Analyze the sizes of buttons, links, and other elements on web pages, and output the tap success rate.

Installation

npm install @lycorp-jp/tappy puppeteer
# or
yarn add @lycorp-jp/tappy puppeteer
# or
pnpm add @lycorp-jp/tappy puppeteer

Usage

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 directory for other usage

Contributing

Please see CONTRIBUTING 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

@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},
}