feat(PuppeteerRunnerExtension): improve handling of SVG elements (#41)

puppeteer · Mar 9, 2022 · d709140 · d709140
1 parent a8475ee
commit d709140
Show file tree

Hide file tree

Showing 3 changed files with 58 additions and 3 deletions.
diff --git a/src/PuppeteerRunnerExtension.ts b/src/PuppeteerRunnerExtension.ts
@@ -326,19 +326,45 @@ async function scrollIntoViewIfNeeded(
   timeout: number
 ): Promise<void> {
   await waitForConnected(element, timeout);
-  const isInViewport = await element.isIntersectingViewport({ threshold: 0 });
+  const isSvg = await element.evaluate((element: Element) => {
+    /* c8 ignore next 1 */
+    return element instanceof SVGElement;
+  });
+  const intersectionTarget = isSvg
+    ? await getOwnerSVGElement(element)
+    : element;
+  const isInViewport = intersectionTarget
+    ? await intersectionTarget.isIntersectingViewport({ threshold: 0 })
+    : false;
   if (isInViewport) {
     return;
   }
+  await scrollIntoView(element);
+  if (intersectionTarget) {
+    await waitForInViewport(intersectionTarget, timeout);
+  }
+}
+
+async function getOwnerSVGElement(
+  element: ElementHandle<Element>
+): Promise<ElementHandle<Element> | null> {
+  return (
+    await element.evaluateHandle((element: Element) => {
+      /* c8 ignore next 1 */
+      return (element as SVGElement).ownerSVGElement;
+    })
+  ).asElement();
+}
+
+async function scrollIntoView(element: ElementHandle<Element>): Promise<void> {
   await element.evaluate((element: Element) => {
-    /* c8 ignore next 1 */
+    /* c8 ignore next 5 */
     element.scrollIntoView({
       block: 'center',
       inline: 'center',
       behavior: 'auto',
     });
   });
-  await waitForInViewport(element, timeout);
 }
 
 async function waitForConnected(

diff --git a/test/resources/svg.html b/test/resources/svg.html
@@ -0,0 +1,7 @@
+<svg viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg">
+  <path d="M 10,30
+           A 20,20 0,0,1 50,30
+           A 20,20 0,0,1 90,30
+           Q 90,60 50,90
+           Q 10,60 10,30 z"/>
+</svg>
diff --git a/test/runner_test.ts b/test/runner_test.ts
@@ -130,6 +130,28 @@ describe('Runner', () => {
     assert.strictEqual(page.url(), `${HTTP_PREFIX}/main2.html`);
   });
 
+  it('should be able to replay click steps on SVG path elements', async () => {
+    const runner = await createRunner(
+      {
+        title: 'test',
+        steps: [
+          {
+            type: 'navigate',
+            url: `${HTTP_PREFIX}/svg.html`,
+          },
+          {
+            type: 'click',
+            selectors: ['svg > path'],
+            offsetX: 1,
+            offsetY: 1,
+          },
+        ],
+      },
+      new PuppeteerRunnerExtension(browser, page)
+    );
+    await runner.run();
+  });
+
   it('should be able to replay click steps on checkboxes', async () => {
     const runner = await createRunner(
       {