@@ -22,9 +22,46 @@ pnpm add @lycorp-jp/tappy puppeteer
2222
2323## Examples
2424
25- Check out the [ examples] ( ./examples ) directory for usage patterns:
25+ ``` typescript
26+ import { type Device , Tappy } from " @lycorp-jp/tappy" ;
27+ import { PuppeteerAdapter } from " @lycorp-jp/tappy/adapters" ;
28+ import puppeteer from " puppeteer" ;
29+
30+ const browser = await puppeteer .launch ();
31+ const page = await browser .newPage ();
32+
33+ const adapter = new PuppeteerAdapter (page );
34+ const tappy = new Tappy (adapter );
35+
36+ // For accurate device specs, refer to: https://www.ios-resolution.com/
37+ const device: Device = {
38+ name: " iPhone 12 Pro" ,
39+ width: 390 ,
40+ height: 844 ,
41+ scale: 3 ,
42+ ppi: 460 ,
43+ };
44+
45+ const result = await tappy .analyze (" https://example.com" , device );
46+
47+ console .log (result .elements );
48+ // This contains information about all analyzed tappable elements
49+ // Example output:
50+ // [
51+ // {
52+ // width: 136.984375, // Element width in CSS pixels
53+ // height: 18, // Element height in CSS pixels
54+ // left: 32, // X position from left edge
55+ // top: 200.875, // Y position from top edge
56+ // tapSuccessRate: 0.8497559260608007 // Success rate (0-1, where 1 is 100%)
57+ // }
58+ // ]
59+
60+ await browser .close ();
61+ ```
62+
63+ Check out the [ examples] ( ./examples ) directory for other usage:
2664
27- - [ Basic usage] ( ./examples/basic.ts )
2865- [ Visualization] ( ./examples/visualization.ts )
2966
3067## Requirements
0 commit comments