[1.12] Add the ability to screenshot individual elements on the page (#…

…553) * Add the ability to screenshot individual elements on the page * Fixed Clip class * Update NodePosition.php * Update Clip.php * Update Clip.php * Update Clip.php * Update NodePosition.php * Update Node.php --------- Co-authored-by: Graham Campbell <[email protected]>
chrome-php · Nov 6, 2024 · e30b0bd · e30b0bd
1 parent dc463f0
commit e30b0bd
Show file tree

Hide file tree

Showing 5 changed files with 78 additions and 34 deletions.
diff --git a/src/Clip.php b/src/Clip.php
@@ -13,20 +13,23 @@
 
 class Clip
 {
+    /** @var int|float */
     protected $x;
+    /** @var int|float */
     protected $y;
+    /** @var int|float */
     protected $height;
+    /** @var int|float */
     protected $width;
+    /** @var float */
     protected $scale;
 
     /**
-     * Clip constructor.
-     *
-     * @param int   $x
-     * @param int   $y
-     * @param int   $height
-     * @param int   $width
-     * @param float $scale
+     * @param int|float $x
+     * @param int|float $y
+     * @param int|float $height
+     * @param int|float $width
+     * @param float     $scale
      */
     public function __construct($x, $y, $width, $height, $scale = 1.0)
     {
@@ -38,79 +41,79 @@ public function __construct($x, $y, $width, $height, $scale = 1.0)
     }
 
     /**
-     * @return mixed
+     * @return int|float
      */
     public function getX()
     {
         return $this->x;
     }
 
     /**
-     * @return mixed
+     * @return int|float
      */
     public function getY()
     {
         return $this->y;
     }
 
     /**
-     * @return mixed
+     * @return int|float
      */
     public function getHeight()
     {
         return $this->height;
     }
 
     /**
-     * @return mixed
+     * @return int|float
      */
     public function getWidth()
     {
         return $this->width;
     }
 
     /**
-     * @return mixed
+     * @return float
      */
     public function getScale()
     {
         return $this->scale;
     }
 
     /**
-     * @param mixed $x
+     * @param int|float $x
      */
     public function setX($x): void
     {
         $this->x = $x;
     }
 
     /**
-     * @param mixed $y
+     * @param int|float $y
      */
     public function setY($y): void
     {
         $this->y = $y;
     }
 
     /**
-     * @param mixed $height
+     * @param int $height
      */
     public function setHeight($height): void
     {
         $this->height = $height;
     }
 
     /**
-     * @param mixed $width
+     * @param int $width
      */
     public function setWidth($width): void
     {
         $this->width = $width;
     }
 
     /**
-     * @param mixed $scale
+     * @param float $scale
      */
     public function setScale($scale): void
     {

diff --git 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;
@@ -177,7 +178,7 @@ public function click(): void
         $this->scrollIntoView();
         $position = $this->getPosition();
         $this->page->mouse()
-            ->move($position->getCenterX(), $position->getCenterY())
+            ->move((int) $position->getCenterX(), (int) $position->getCenterY())
             ->click();
     }
 
@@ -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
@@ -37,40 +37,40 @@ public function __construct(array $points)
         $leftBottomX = $points[6];
         $leftBottomY = $points[7];
 
-        $this->x = $leftTopX;
-        $this->y = $leftTopY;
+        $this->x = (float) $leftTopX;
+        $this->y = (float) $leftTopY;
 
-        $this->height = $leftBottomY - $leftTopY;
-        $this->width = $rightBottomX - $leftBottomX;
+        $this->height = (float) ($leftBottomY - $leftTopY);
+        $this->width = (float) ($rightBottomX - $leftBottomX);
     }
 
-    public function getX(): int
+    public function getX(): float
     {
-        return (int) $this->x;
+        return $this->x;
     }
 
-    public function getY(): int
+    public function getY(): float
     {
-        return (int) $this->y;
+        return $this->y;
     }
 
-    public function getWidth(): int
+    public function getWidth(): float
     {
-        return (int) $this->width;
+        return $this->width;
     }
 
-    public function getHeight(): int
+    public function getHeight(): float
     {
-        return (int) $this->height;
+        return $this->height;
     }
 
-    public function getCenterX(): int
+    public function getCenterX(): float
     {
-        return (int) ($this->x + ($this->width / 2));
+        return $this->x + ($this->width / 2);
     }
 
-    public function getCenterY(): int
+    public function getCenterY(): float
     {
-        return (int) ($this->y + ($this->height / 2));
+        return $this->y + ($this->height / 2);
     }
 }
diff --git 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;
@@ -683,6 +684,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
@@ -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()));
+    }
 }