feat: adds elementScreenshot

Author: fbarrento

.temp/e2e/runtime.spec.js

@@ -2,5 +2,5 @@ import { test, expect } from '@playwright/test';
 
 test('runtime', async ({ page }) => {
     await page.goto('https://laravel.com');
-await expect(page).toHaveTitle(/Laravel/);
+await page.locator('footer').screenshot({ path: '/Users/franciscobarrento/Codex/open-source/pest/pest-plugin-browser/tests/Feature/section.png' });
 });

src/Operations/ElementScreenshot.php

@@ -0,0 +1,28 @@
+<?php
+
+declare(strict_types=1);
+
+namespace Pest\Browser\Operations;
+
+use Pest\Browser\Contracts\Operation;
+
+/**
+ * @internal
+ */
+final readonly class ElementScreenshot implements Operation
+{
+    /**
+     * Creates an operation instance.
+     */
+    public function __construct(
+        private string $selector,
+        private string $path,
+    ) {
+        //
+    }
+
+    public function compile(): string
+    {
+        return sprintf("await page.locator('%s').screenshot({ path: '%s' });", $this->selector, $this->path);
+    }
+}

src/PendingTest.php

@@ -50,6 +50,13 @@ public function build(): void
         expect($result->ok())->toBeTrue();
     }
 
+    public function elementScreenshot(string $selector, string $path): self
+    {
+        $this->operations[] = new Operations\ElementScreenshot($selector, $path);
+
+        return $this;
+    }
+
     /**
      * Ends the chain and builds the test result.
      */

tests/Feature/ElementScreenshotTest.php

@@ -0,0 +1,16 @@
+<?php declare(strict_types=1);
+
+use function Pest\Browser\visit;
+
+test('it takes a screenshot of an element', function (): void {
+    $filePath = __DIR__.'/footer.png';
+
+    visit('https://laravel.com')
+        ->elementScreenshot('footer', $filePath);
+
+
+    expect(file_exists($filePath))
+        ->toBeTrue();
+
+    unlink('footer.png');
+});