feat: responsive screenshots

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<string, array{width: int, height: int}>  $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.
      */

src/Playwright/Page.php

@@ -438,6 +438,29 @@ 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.
+     *
+     * @param  array<string, array{width: int, height: int}>  $responsiveScreenSizes
+     */
+    public function responsiveScreenshots(string $filename, array $responsiveScreenSizes = []): self
+    {
+        if (mb_substr($filename, -1) !== '/') {
+            $filename .= '-';
+        }
+
+        if ($responsiveScreenSizes === []) {
+            $responsiveScreenSizes = $this->responsiveScreenSizes();
+        }
+
+        foreach ($responsiveScreenSizes as $device => $size) {
+            $this->setViewportSize($size['width'], $size['height'])
+                ->screenshot(filename: "$filename$device");
+        }
+
+        return $this;
+    }
+
     /**
      * Make screenshot of a specific element.
      */
@@ -662,6 +685,41 @@ private function screenshotOptions(bool $fullPage = true): array
         ];
     }
 
+    /**
+     * Returns the responsive screen sizes.
+     *
+     * @return array<string, array{width: int, height: int}>
+     */
+    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.
      */

tests/Browser/Webpage/ScreenshotTest.php

@@ -42,3 +42,40 @@
     expect(file_exists(Screenshot::path('element-screenshot.png')))
         ->toBeTrue();
 });
+
+it('captures responsive screenshots', function (string $device): void {
+    Route::get('/', fn (): string => '<div>
+        <h1>Responsive Screenshot Test</h1>
+        <p>This page will be captured at different screen sizes</p>
+    </div>');
+
+    $page = visit('/');
+
+    $page->responsiveScreenshots(filename: 'responsive-test');
+
+    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 => '<div>
+        <h1>Responsive Screenshot Test</h1>
+        <p>This page will be captured at different screen sizes</p>
+    </div>');
+
+    $page = visit('/');
+
+    $responsiveScreenSizes = [
+        'xs' => ['width' => 360, 'height' => 640],
+        'sm' => ['width' => 640, 'height' => 360],
+    ];
+
+    $page->responsiveScreenshots(filename: 'responsive-test', responsiveScreenSizes: $responsiveScreenSizes);
+
+    $devices = array_keys($responsiveScreenSizes);
+
+    foreach ($devices as $device) {
+        expect(file_exists(Screenshot::path("responsive-test-{$device}.png")))
+            ->toBeTrue();
+    }
+});