New Helper elementScreenshot (#1093)

* Add Helper: `elementScreenshot`

* Tests added for new helper `elementScreenshot`

* rename method

---------

Co-authored-by: Taylor Otwell <[email protected]>

Author: rabrowne85

src/Browser.php

@@ -448,6 +448,30 @@ public function responsiveScreenshots($name)
         return $this;
     }
 
+    /**
+     * Take a screenshot of a specific element and store it with the given name.
+     *
+     * @param  string  $selector
+     * @param  string  $name
+     * @return $this
+     */
+    public function screenshotElement($selector, $name)
+    {
+        $filePath = sprintf('%s/%s.png', rtrim(static::$storeScreenshotsAt, '/'), $name);
+
+        $directoryPath = dirname($filePath);
+
+        if (! is_dir($directoryPath)) {
+            mkdir($directoryPath, 0777, true);
+        }
+
+        $this->scrollIntoView($selector)
+            ->driver->findElement(WebDriverBy::cssSelector($selector))
+            ->takeElementScreenshot($filePath);
+
+        return $this;
+    }
+
     /**
      * Store the console output with the given name.
      *

tests/Unit/BrowserTest.php

@@ -3,7 +3,10 @@
 namespace Laravel\Dusk\Tests\Unit;
 
 use Facebook\WebDriver\Remote\RemoteKeyboard;
+use Facebook\WebDriver\Remote\RemoteWebDriver;
+use Facebook\WebDriver\Remote\RemoteWebElement;
 use Facebook\WebDriver\Remote\WebDriverBrowserType;
+use Facebook\WebDriver\WebDriverBy;
 use Facebook\WebDriver\WebDriverKeys;
 use Laravel\Dusk\Browser;
 use Laravel\Dusk\Keyboard;
@@ -241,6 +244,60 @@ public function test_screenshot_in_subdirectory()
         $this->assertFileExists(Browser::$storeScreenshotsAt.'/'.$name.'.png');
     }
 
+    public function test_element_screenshot()
+    {
+        $elementMock = $this->createMock(RemoteWebElement::class);
+        $elementMock->expects($this->once())
+            ->method('takeElementScreenshot')
+            ->willReturnCallback(function ($filePath) {
+                return touch($filePath);
+            });
+
+        $driverMock = $this->createMock(RemoteWebDriver::class);
+        $driverMock->expects($this->once())
+            ->method('findElement')
+            ->with(WebDriverBy::cssSelector('#selector'))
+            ->willReturn($elementMock);
+
+        $browser = new Browser($driverMock);
+
+        $browser::$storeScreenshotsAt = sys_get_temp_dir();
+
+        $browser->screenshotElement(
+            '#selector',
+            $name = 'screenshot-01',
+        );
+
+        $this->assertFileExists(Browser::$storeScreenshotsAt.'/'.$name.'.png');
+    }
+
+    public function test_element_screenshot_in_subdirectory()
+    {
+        $elementMock = $this->createMock(RemoteWebElement::class);
+        $elementMock->expects($this->once())
+            ->method('takeElementScreenshot')
+            ->willReturnCallback(function ($filePath) {
+                return touch($filePath);
+            });
+
+        $driverMock = $this->createMock(RemoteWebDriver::class);
+        $driverMock->expects($this->once())
+            ->method('findElement')
+            ->with(WebDriverBy::cssSelector('#selector'))
+            ->willReturn($elementMock);
+
+        $browser = new Browser($driverMock);
+
+        $browser::$storeScreenshotsAt = sys_get_temp_dir();
+
+        $browser->screenshotElement(
+            '#selector',
+            $name = uniqid('random').'/sub/dir/screenshot-01',
+        );
+
+        $this->assertFileExists(Browser::$storeScreenshotsAt.'/'.$name.'.png');
+    }
+
     public function test_can_disable_fit_on_failure()
     {
         $this->browser->fitOnFailure = true;