From aea7f4dffc22ff4d1fb794524479b8c5ede5d1ce Mon Sep 17 00:00:00 2001
From: Ostap Brehin <osbre@protonmail.com>
Date: Sun, 8 Oct 2023 15:32:00 +0100
Subject: [PATCH] Add the ability to screenshot individual elements on the page

---
 src/Dom/Node.php         | 17 +++++++++++++++++
 src/Dom/NodePosition.php |  8 ++++----
 src/Page.php             |  8 ++++++++
 tests/PageTest.php       | 16 ++++++++++++++++
 4 files changed, 45 insertions(+), 4 deletions(-)

diff --git a/src/Dom/Node.php b/src/Dom/Node.php
index bf8df5c5..e28dcd6d 100644
--- a/src/Dom/Node.php
+++ b/src/Dom/Node.php
@@ -4,6 +4,7 @@
 
 namespace HeadlessChromium\Dom;
 
+use HeadlessChromium\Clip;
 use HeadlessChromium\Communication\Message;
 use HeadlessChromium\Communication\Response;
 use HeadlessChromium\Exception\DomException;
@@ -214,4 +215,20 @@ public function assertNotError(Response $response): void
             throw new DOMException($response->getErrorMessage());
         }
     }
+
+    public function getClip(): ?Clip
+    {
+        $position = $this->getPosition();
+
+        if (!$position) {
+            return null;
+        }
+
+        return new Clip(
+            $position->getX(),
+            $position->getY(),
+            $position->getWidth(),
+            $position->getHeight(),
+        );
+    }
 }
diff --git a/src/Dom/NodePosition.php b/src/Dom/NodePosition.php
index 0d4f07ec..95835a6b 100644
--- a/src/Dom/NodePosition.php
+++ b/src/Dom/NodePosition.php
@@ -44,14 +44,14 @@ public function __construct(array $points)
         $this->width = $rightBottomX - $leftBottomX;
     }
 
-    public function getX(): int
+    public function getX(): float
     {
-        return (int) $this->x;
+        return (float) $this->x;
     }
 
-    public function getY(): int
+    public function getY(): float
     {
-        return (int) $this->y;
+        return (float) $this->y;
     }
 
     public function getWidth(): int
diff --git a/src/Page.php b/src/Page.php
index 82ce9117..301d2029 100644
--- a/src/Page.php
+++ b/src/Page.php
@@ -17,6 +17,7 @@
 use HeadlessChromium\Cookies\Cookie;
 use HeadlessChromium\Cookies\CookiesCollection;
 use HeadlessChromium\Dom\Dom;
+use HeadlessChromium\Dom\Node;
 use HeadlessChromium\Dom\Selector\CssSelector;
 use HeadlessChromium\Dom\Selector\Selector;
 use HeadlessChromium\Exception\CommunicationException;
@@ -673,6 +674,13 @@ public function screenshot(array $options = []): PageScreenshot
         return new PageScreenshot($responseReader);
     }
 
+    public function screenshotElement(Node $node): PageScreenshot
+    {
+        return $this->screenshot([
+            'clip' => $node->getClip(),
+        ]);
+    }
+
     /**
      * Generate a PDF
      * Usage:.
diff --git a/tests/PageTest.php b/tests/PageTest.php
index 8a9c7f5b..8174ca8e 100644
--- a/tests/PageTest.php
+++ b/tests/PageTest.php
@@ -507,4 +507,20 @@ public function testSetScriptExecution(): void
             $page->evaluate('document.body.innerText')->getReturnValue()
         );
     }
+
+    public function testElementScreenshot(): void
+    {
+        $factory = new BrowserFactory();
+
+        $browser = $factory->createBrowser();
+        $page = $browser->createPage();
+
+        $page->navigate($this->sitePath('domForm.html'))->waitForNavigation();
+
+        $element = $page->dom()->querySelector('#myform');
+        $screenshot = $page->screenshotElement($element);
+
+        self::assertNotEmpty($screenshot->getBase64());
+        self::assertGreaterThan(4000, \strlen($screenshot->getBase64()));
+    }
 }