From 6371838102e43f198b44840dfdb85b6a50c00589 Mon Sep 17 00:00:00 2001 From: Mansoor Khan <8mansoorkhan@gmail.com> Date: Sat, 6 Sep 2025 16:12:16 +0500 Subject: [PATCH 1/4] feat: add support for capturing responsive screenshots --- src/Playwright/Page.php | 52 +++++++++++++++++++++++++++++++++++++++++ 1 file changed, 52 insertions(+) diff --git a/src/Playwright/Page.php b/src/Playwright/Page.php index d97f3db3..100cd9b8 100644 --- a/src/Playwright/Page.php +++ b/src/Playwright/Page.php @@ -438,6 +438,23 @@ public function screenshot(bool $fullPage = true, ?string $filename = null): ?st return Screenshot::save($binary, $filename); } + /** + * Take a series of screenshots at different browser sizes to emulate different devices. + */ + public function responsiveScreenshots(string $filename): self + { + if (mb_substr($filename, -1) !== '/') { + $filename .= '-'; + } + + foreach ($this->responsiveScreenSizes() as $device => $size) { + $this->setViewportSize($size['width'], $size['height']) + ->screenshot(filename: "$filename$device"); + } + + return $this; + } + /** * Make screenshot of a specific element. */ @@ -662,6 +679,41 @@ private function screenshotOptions(bool $fullPage = true): array ]; } + /** + * Returns the responsive screen sizes. + * + * @return array + */ + private function responsiveScreenSizes(): array + { + return [ + 'xs' => [ + 'width' => 360, + 'height' => 640, + ], + 'sm' => [ + 'width' => 640, + 'height' => 360, + ], + 'md' => [ + 'width' => 768, + 'height' => 1024, + ], + 'lg' => [ + 'width' => 1024, + 'height' => 768, + ], + 'xl' => [ + 'width' => 1280, + 'height' => 1024, + ], + '2xl' => [ + 'width' => 1536, + 'height' => 864, + ], + ]; + } + /** * Create an HTML view for the image diff. */ From fa299c8fa832ab9151fc70e5cae8100d431ba11f Mon Sep 17 00:00:00 2001 From: Mansoor Khan <8mansoorkhan@gmail.com> Date: Sat, 6 Sep 2025 16:15:22 +0500 Subject: [PATCH 2/4] wip --- src/Api/Concerns/InteractsWithScreen.php | 14 ++++++++ src/Playwright/Page.php | 10 ++++-- tests/Browser/Webpage/ScreenshotTest.php | 41 ++++++++++++++++++++++++ 3 files changed, 63 insertions(+), 2 deletions(-) diff --git a/src/Api/Concerns/InteractsWithScreen.php b/src/Api/Concerns/InteractsWithScreen.php index 4ff8b439..655f7b0b 100644 --- a/src/Api/Concerns/InteractsWithScreen.php +++ b/src/Api/Concerns/InteractsWithScreen.php @@ -18,6 +18,20 @@ public function screenshot(bool $fullPage = true, ?string $filename = null): sel return $this; } + /** + * Performs a series of screenshots at different browser sizes to emulate different devices. + * + * @param array $responsiveScreenSizes + */ + public function responsiveScreenshots(?string $filename = null, array $responsiveScreenSizes = []): self + { + $filename = $this->getFilename($filename); + + $this->page->responsiveScreenshots($filename, $responsiveScreenSizes); + + return $this; + } + /** * Performs a screenshot of an element and saves it to the given path. */ diff --git a/src/Playwright/Page.php b/src/Playwright/Page.php index 100cd9b8..d750075a 100644 --- a/src/Playwright/Page.php +++ b/src/Playwright/Page.php @@ -440,14 +440,20 @@ public function screenshot(bool $fullPage = true, ?string $filename = null): ?st /** * Take a series of screenshots at different browser sizes to emulate different devices. + * + * @param array $responsiveScreenSizes */ - public function responsiveScreenshots(string $filename): self + public function responsiveScreenshots(string $filename, array $responsiveScreenSizes = []): self { if (mb_substr($filename, -1) !== '/') { $filename .= '-'; } - foreach ($this->responsiveScreenSizes() as $device => $size) { + if ($responsiveScreenSizes === []) { + $responsiveScreenSizes = $this->responsiveScreenSizes(); + } + + foreach ($responsiveScreenSizes as $device => $size) { $this->setViewportSize($size['width'], $size['height']) ->screenshot(filename: "$filename$device"); } diff --git a/tests/Browser/Webpage/ScreenshotTest.php b/tests/Browser/Webpage/ScreenshotTest.php index cc15fceb..3bb2224a 100644 --- a/tests/Browser/Webpage/ScreenshotTest.php +++ b/tests/Browser/Webpage/ScreenshotTest.php @@ -42,3 +42,44 @@ expect(file_exists(Screenshot::path('element-screenshot.png'))) ->toBeTrue(); }); + +it('captures responsive screenshots', function (): void { + Route::get('/', fn (): string => '
+

Responsive Screenshot Test

+

This page will be captured at different screen sizes

+
'); + + $page = visit('/'); + + $page->responsiveScreenshots(filename: 'responsive-test'); + + $devices = ['xs', 'sm', 'md', 'lg', 'xl', '2xl']; + + foreach ($devices as $device) { + expect(file_exists(Screenshot::path("responsive-test-{$device}.png"))) + ->toBeTrue(); + } +}); + +it('captures responsive screenshots with custom screen sizes', function (): void { + Route::get('/', fn (): string => '
+

Responsive Screenshot Test

+

This page will be captured at different screen sizes

+
'); + + $page = visit('/'); + + $responsiveScreenSizes = [ + 'xs' => ['width' => 360, 'height' => 640], + 'sm' => ['width' => 640, 'height' => 360], + ]; + + $page->responsiveScreenshots(filename: 'responsive-test', $responsiveScreenSizes); + + $devices = array_keys($responsiveScreenSizes); + + foreach ($devices as $device) { + expect(file_exists(Screenshot::path("responsive-test-{$device}.png"))) + ->toBeTrue(); + } +}); From db8f5e275b9724b37a99a7ed31f45484e6ad1c8c Mon Sep 17 00:00:00 2001 From: Mansoor Khan <8mansoorkhan@gmail.com> Date: Sat, 6 Sep 2025 21:44:29 +0500 Subject: [PATCH 3/4] fix --- tests/Browser/Webpage/ScreenshotTest.php | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/tests/Browser/Webpage/ScreenshotTest.php b/tests/Browser/Webpage/ScreenshotTest.php index 3bb2224a..05154645 100644 --- a/tests/Browser/Webpage/ScreenshotTest.php +++ b/tests/Browser/Webpage/ScreenshotTest.php @@ -74,7 +74,7 @@ 'sm' => ['width' => 640, 'height' => 360], ]; - $page->responsiveScreenshots(filename: 'responsive-test', $responsiveScreenSizes); + $page->responsiveScreenshots(filename: 'responsive-test', responsiveScreenSizes: $responsiveScreenSizes); $devices = array_keys($responsiveScreenSizes); From dc905c700f231c9ecfc408ba2b07f98ca49da846 Mon Sep 17 00:00:00 2001 From: Mansoor Khan <8mansoorkhan@gmail.com> Date: Mon, 8 Sep 2025 18:32:20 +0500 Subject: [PATCH 4/4] fix: resolve requested change --- tests/Browser/Webpage/ScreenshotTest.php | 12 ++++-------- 1 file changed, 4 insertions(+), 8 deletions(-) diff --git a/tests/Browser/Webpage/ScreenshotTest.php b/tests/Browser/Webpage/ScreenshotTest.php index 05154645..2a522069 100644 --- a/tests/Browser/Webpage/ScreenshotTest.php +++ b/tests/Browser/Webpage/ScreenshotTest.php @@ -43,7 +43,7 @@ ->toBeTrue(); }); -it('captures responsive screenshots', function (): void { +it('captures responsive screenshots', function (string $device): void { Route::get('/', fn (): string => '

Responsive Screenshot Test

This page will be captured at different screen sizes

@@ -53,13 +53,9 @@ $page->responsiveScreenshots(filename: 'responsive-test'); - $devices = ['xs', 'sm', 'md', 'lg', 'xl', '2xl']; - - foreach ($devices as $device) { - expect(file_exists(Screenshot::path("responsive-test-{$device}.png"))) - ->toBeTrue(); - } -}); + expect(file_exists(Screenshot::path("responsive-test-{$device}.png"))) + ->toBeTrue(); +})->with(['xs', 'sm', 'md', 'lg', 'xl', '2xl']); it('captures responsive screenshots with custom screen sizes', function (): void { Route::get('/', fn (): string => '