chore(clip): add puppeteer getBoundingClientRect handling

a11ywatch · Sep 18, 2023 · 9bd141b · 9bd141b
1 parent 496fde5
commit 9bd141b
Show file tree

Hide file tree

Showing 4 changed files with 10 additions and 4 deletions.
diff --git a/README.md b/README.md
@@ -57,7 +57,6 @@ const results = await autoKayle({
 ## Clips
 
 You can include base64 images with the audits to get a visual of the exact location of the issue.
-Currently this is only supported with playwright with default chrome launch args.
 
 ```ts
 const results = await kayle({

diff --git a/kayle/lib/runner.ts b/kayle/lib/runner.ts
@@ -54,7 +54,14 @@
       context = getElementContext(issue.element);
       selector = getElementSelector(issue.element);
       if (cliped) {
-        clip = issue.element.getBoundingClientRect();
+        const { x, y, width, height } = issue.element.getBoundingClientRect();
+
+        clip = {
+          x,
+          y,
+          width,
+          height,
+        };
       }
     }
 

diff --git a/kayle/package.json b/kayle/package.json
@@ -1,6 +1,6 @@
 {
   "name": "kayle",
-  "version": "0.6.0",
+  "version": "0.6.1",
   "description": "Extremely fast and accurate accessibility engine built for any headless tool like playwright or puppeteer.",
   "main": "./build/index.js",
   "keywords": [

diff --git a/kayle/tests/clips.ts b/kayle/tests/clips.ts
@@ -26,7 +26,7 @@ import { performance } from "perf_hooks";
   });
   const nextTime = performance.now() - startTime;
 
-  console.log(issues)
+  console.log(issues);
 
   console.log(`Issue count ${issues.length}`);
   console.log(meta);