Merge pull request #890 from alexwass-lr/feat-add-media-features

Add support for media features
spatie · Nov 25, 2024 · 8b6a057 · 8b6a057
2 parents 8f7d222 + fd2d6a4
commit 8b6a057
Show file tree

Hide file tree

Showing 4 changed files with 41 additions and 0 deletions.
diff --git a/bin/browser.cjs b/bin/browser.cjs
@@ -257,6 +257,10 @@ const callChrome = async pup => {
             await page.emulateMediaType(request.options.emulateMedia);
         }
 
+        if (request.options && request.options.emulateMediaFeatures) {
+            await page.emulateMediaFeatures(JSON.parse(request.options.emulateMediaFeatures));
+        }
+
         if (request.options && request.options.viewport) {
             await page.setViewport(request.options.viewport);
         }

diff --git a/docs/miscellaneous-options/setting-the-css-media-type-of-the-page.md b/docs/miscellaneous-options/setting-the-css-media-type-of-the-page.md
@@ -11,3 +11,12 @@ Browsershot::url('https://example.com')
     ->savePdf($pathToPdf);
 ```
 
+You can also emulate [media features](https://www.w3.org/TR/mediaqueries-5/), such as dark mode or reduced motion.
+
+```php
+Browsershot::url('https://example.com')
+    ->emulateMediaFeatures([
+        ['name' => 'prefers-color-scheme', 'value' => 'dark']
+    ])
+    ->save($pathToImage);
+```
diff --git a/src/Browsershot.php b/src/Browsershot.php
@@ -529,6 +529,11 @@ public function emulateMedia(?string $media): static
         return $this->setOption('emulateMedia', $media);
     }
 
+    public function emulateMediaFeatures(array $features): static
+    {
+        return $this->setOption('emulateMediaFeatures', json_encode($features));
+    }
+
     public function newHeadless(): self
     {
         return $this->setOption('newHeadless', true);

diff --git a/tests/CommandTest.php b/tests/CommandTest.php
@@ -343,6 +343,29 @@
     ], $command);
 });
 
+it('can set emulate media features', function () {
+    $command = Browsershot::url('https://example.com')
+        ->emulateMediaFeatures([
+            ['name' => 'prefers-color-scheme', 'value' => 'dark']
+        ])
+        ->createScreenshotCommand('screenshot.png');
+
+    $this->assertEquals([
+        'url' => 'https://example.com',
+        'action' => 'screenshot',
+        'options' => [
+            'path' => 'screenshot.png',
+            'viewport' => [
+                'width' => 800,
+                'height' => 600,
+            ],
+            'emulateMediaFeatures' => '[{"name":"prefers-color-scheme","value":"dark"}]',
+            'args' => [],
+            'type' => 'png',
+        ],
+    ], $command);
+});
+
 it('can use pipe', function () {
     $command = Browsershot::url('https://example.com')
         ->usePipe()