From aea7f4dffc22ff4d1fb794524479b8c5ede5d1ce Mon Sep 17 00:00:00 2001 From: Ostap Brehin Date: Sun, 8 Oct 2023 15:32:00 +0100 Subject: [PATCH 1/8] 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())); + } } From fd3792fe223e54ad6d50e530b4527d8bf11b57fd Mon Sep 17 00:00:00 2001 From: Graham Campbell Date: Thu, 12 Oct 2023 18:03:38 +0100 Subject: [PATCH 2/8] Fixed Clip class --- src/Clip.php | 50 +++++++++++++++++++++++++------------------------- 1 file changed, 25 insertions(+), 25 deletions(-) diff --git a/src/Clip.php b/src/Clip.php index 7be7cd7e..a03921d0 100644 --- a/src/Clip.php +++ b/src/Clip.php @@ -22,23 +22,23 @@ class Clip /** * 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 int|float $scale */ public function __construct($x, $y, $width, $height, $scale = 1.0) { - $this->x = $x; - $this->y = $y; - $this->height = $height; - $this->width = $width; - $this->scale = $scale; + $this->x = (float) $x; + $this->y = (float) $y; + $this->height = (float) $height; + $this->width = (float) $width; + $this->scale = (float) $scale; } /** - * @return mixed + * @return float */ public function getX() { @@ -46,7 +46,7 @@ public function getX() } /** - * @return mixed + * @return float */ public function getY() { @@ -54,7 +54,7 @@ public function getY() } /** - * @return mixed + * @return float */ public function getHeight() { @@ -62,7 +62,7 @@ public function getHeight() } /** - * @return mixed + * @return float */ public function getWidth() { @@ -70,7 +70,7 @@ public function getWidth() } /** - * @return mixed + * @return float */ public function getScale() { @@ -78,42 +78,42 @@ public function getScale() } /** - * @param mixed $x + * @param int|float $x */ public function setX($x): void { - $this->x = $x; + $this->x = (float) $x; } /** - * @param mixed $y + * @param int|float $y */ public function setY($y): void { - $this->y = $y; + $this->y = (float) $y; } /** - * @param mixed $height + * @param int|float $height */ public function setHeight($height): void { - $this->height = $height; + $this->height = (float) $height; } /** - * @param mixed $width + * @param int|float $width */ public function setWidth($width): void { - $this->width = $width; + $this->width = (float) $width; } /** - * @param mixed $scale + * @param int|float $scale */ public function setScale($scale): void { - $this->scale = $scale; + $this->scale = (float) $scale; } } From 7654a99915822f5ec2d5a1ea72687a10ac90cd81 Mon Sep 17 00:00:00 2001 From: Graham Campbell Date: Thu, 12 Oct 2023 18:05:41 +0100 Subject: [PATCH 3/8] Update NodePosition.php --- src/Dom/NodePosition.php | 12 ++++++------ 1 file changed, 6 insertions(+), 6 deletions(-) diff --git a/src/Dom/NodePosition.php b/src/Dom/NodePosition.php index 95835a6b..0460f923 100644 --- a/src/Dom/NodePosition.php +++ b/src/Dom/NodePosition.php @@ -37,21 +37,21 @@ 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(): float { - return (float) $this->x; + return $this->x; } public function getY(): float { - return (float) $this->y; + return $this->y; } public function getWidth(): int From 8a2e5b71e9af363a4e053076493f3b1636f3cddd Mon Sep 17 00:00:00 2001 From: Graham Campbell Date: Thu, 12 Oct 2023 18:07:11 +0100 Subject: [PATCH 4/8] Update Clip.php --- src/Clip.php | 28 ++++++++++++++-------------- 1 file changed, 14 insertions(+), 14 deletions(-) diff --git a/src/Clip.php b/src/Clip.php index a03921d0..18940bff 100644 --- a/src/Clip.php +++ b/src/Clip.php @@ -24,17 +24,17 @@ class Clip * * @param int|float $x * @param int|float $y - * @param int|float $height - * @param int|float $width - * @param int|float $scale + * @param int $height + * @param int $width + * @param float $scale */ public function __construct($x, $y, $width, $height, $scale = 1.0) { $this->x = (float) $x; $this->y = (float) $y; - $this->height = (float) $height; - $this->width = (float) $width; - $this->scale = (float) $scale; + $this->height = $height; + $this->width = $width; + $this->scale = $scale; } /** @@ -54,7 +54,7 @@ public function getY() } /** - * @return float + * @return int */ public function getHeight() { @@ -62,7 +62,7 @@ public function getHeight() } /** - * @return float + * @return int */ public function getWidth() { @@ -94,26 +94,26 @@ public function setY($y): void } /** - * @param int|float $height + * @param int $height */ public function setHeight($height): void { - $this->height = (float) $height; + $this->height = $height; } /** - * @param int|float $width + * @param int $width */ public function setWidth($width): void { - $this->width = (float) $width; + $this->width = $width; } /** - * @param int|float $scale + * @param float $scale */ public function setScale($scale): void { - $this->scale = (float) $scale; + $this->scale = $scale; } } From 0a8fd67559fdb2f69b6b06dd556b696879bb369a Mon Sep 17 00:00:00 2001 From: Graham Campbell Date: Thu, 12 Oct 2023 18:07:42 +0100 Subject: [PATCH 5/8] Update Clip.php --- src/Clip.php | 7 +++++-- 1 file changed, 5 insertions(+), 2 deletions(-) diff --git a/src/Clip.php b/src/Clip.php index 18940bff..e597f9c1 100644 --- a/src/Clip.php +++ b/src/Clip.php @@ -13,15 +13,18 @@ class Clip { + /** @var float */ protected $x; + /** @var float */ protected $y; + /** @var int */ protected $height; + /** @var int */ protected $width; + /** @var float */ protected $scale; /** - * Clip constructor. - * * @param int|float $x * @param int|float $y * @param int $height From b31714510c2ae67fe1b4a7f419d2efb2954b8997 Mon Sep 17 00:00:00 2001 From: Graham Campbell Date: Thu, 12 Oct 2023 18:10:48 +0100 Subject: [PATCH 6/8] Update Clip.php --- src/Clip.php | 28 ++++++++++++++-------------- 1 file changed, 14 insertions(+), 14 deletions(-) diff --git a/src/Clip.php b/src/Clip.php index e597f9c1..ec24d5c0 100644 --- a/src/Clip.php +++ b/src/Clip.php @@ -13,13 +13,13 @@ class Clip { - /** @var float */ + /** @var int|float */ protected $x; - /** @var float */ + /** @var int|float */ protected $y; - /** @var int */ + /** @var int|float */ protected $height; - /** @var int */ + /** @var int|float */ protected $width; /** @var float */ protected $scale; @@ -27,21 +27,21 @@ class Clip /** * @param int|float $x * @param int|float $y - * @param int $height - * @param int $width + * @param int|float $height + * @param int|float $width * @param float $scale */ public function __construct($x, $y, $width, $height, $scale = 1.0) { - $this->x = (float) $x; - $this->y = (float) $y; + $this->x = $x; + $this->y = $y; $this->height = $height; $this->width = $width; $this->scale = $scale; } /** - * @return float + * @return int|float */ public function getX() { @@ -49,7 +49,7 @@ public function getX() } /** - * @return float + * @return int|float */ public function getY() { @@ -57,7 +57,7 @@ public function getY() } /** - * @return int + * @return int|float */ public function getHeight() { @@ -65,7 +65,7 @@ public function getHeight() } /** - * @return int + * @return int|float */ public function getWidth() { @@ -85,7 +85,7 @@ public function getScale() */ public function setX($x): void { - $this->x = (float) $x; + $this->x = $x; } /** @@ -93,7 +93,7 @@ public function setX($x): void */ public function setY($y): void { - $this->y = (float) $y; + $this->y = $y; } /** From 4f842f183fe352e6c06d2fb524b2860dfd8de679 Mon Sep 17 00:00:00 2001 From: Graham Campbell Date: Thu, 12 Oct 2023 18:12:13 +0100 Subject: [PATCH 7/8] Update NodePosition.php --- src/Dom/NodePosition.php | 16 ++++++++-------- 1 file changed, 8 insertions(+), 8 deletions(-) diff --git a/src/Dom/NodePosition.php b/src/Dom/NodePosition.php index 0460f923..1deea329 100644 --- a/src/Dom/NodePosition.php +++ b/src/Dom/NodePosition.php @@ -54,23 +54,23 @@ public function getY(): float 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); } } From 33b7fba34b37476dddc1fc7134e7de6b8b175e8f Mon Sep 17 00:00:00 2001 From: Graham Campbell Date: Thu, 12 Oct 2023 18:15:09 +0100 Subject: [PATCH 8/8] Update Node.php --- src/Dom/Node.php | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/Dom/Node.php b/src/Dom/Node.php index e28dcd6d..85525150 100644 --- a/src/Dom/Node.php +++ b/src/Dom/Node.php @@ -178,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(); }