Support for taking screenshots of elements

Signed-Off-By: Matthias Blümel <matthias.bluemel@krumedia.com>

Author: Blaimi

composer.json

@@ -21,7 +21,7 @@
     "require": {
         "php": ">=5.6.0 <9.0",
         "codeception/codeception": "^4.0",
-        "php-webdriver/webdriver": "^1.6.0"
+        "php-webdriver/webdriver": "^1.8.0"
     },
     "suggest": {
         "codeception/phpbuiltinserver": "Start and stop PHP built-in web server for your tests"

src/Codeception/Module/WebDriver.php

@@ -739,6 +739,20 @@ public function _saveScreenshot($filename)
         }
     }
 
+    public function _saveElementScreenshot($selector, $filename)
+    {
+        if (!isset($this->webDriver)) {
+            $this->debug('WebDriver::_saveElementScreenshot method has been called when webDriver is not set');
+            return;
+        }
+        try {
+            $this->matchFirstOrFail($this->webDriver, $selector)->takeElementScreenshot($filename);
+        } catch (\Exception $e) {
+            $this->debug('Unable to retrieve element screenshot from Selenium : ' . $e->getMessage());
+            return;
+        }
+    }
+
     public function _findElements($locator)
     {
         return $this->match($this->webDriver, $locator);
@@ -789,6 +803,34 @@ public function makeScreenshot($name = null)
         $this->debugSection('Screenshot Saved', "file://$screenName");
     }
 
+    /**
+     * Takes a screenshot of an element of the current window and saves it to `tests/_output/debug`.
+     *
+     * ``` php
+     * <?php
+     * $I->amOnPage('/user/edit');
+     * $I->makeElementScreenshot('#dialog', 'edit_page');
+     * // saved to: tests/_output/debug/edit_page.png
+     * $I->makeElementScreenshot('#dialog');
+     * // saved to: tests/_output/debug/2017-05-26_14-24-11_4b3403665fea6.png
+     * ```
+     *
+     * @param $name
+     */
+    public function makeElementScreenshot($selector, $name = null)
+    {
+        if (empty($name)) {
+            $name = uniqid(date("Y-m-d_H-i-s_"));
+        }
+        $debugDir = codecept_log_dir() . 'debug';
+        if (!is_dir($debugDir)) {
+            mkdir($debugDir, 0777);
+        }
+        $screenName = $debugDir . DIRECTORY_SEPARATOR . $name . '.png';
+        $this->_saveElementScreenshot($selector, $screenName);
+        $this->debugSection('Screenshot Saved', "file://$screenName");
+    }
+
     public function makeHtmlSnapshot($name = null)
     {
         if (empty($name)) {

tests/web/WebDriverTest.php

@@ -135,6 +135,21 @@ public function testScreenshot()
         @unlink(\Codeception\Configuration::outputDir().'testshot.png');
     }
 
+    public function testElementScreenshot()
+    {
+        $this->module->amOnPage('/');
+        @unlink(\Codeception\Configuration::outputDir().'testelementshot.png');
+        $testName="debugTestElement";
+
+        $this->module->makeElementScreenshot('#area4', $testName);
+        $this->assertFileExists(\Codeception\Configuration::outputDir().'debug/'.$testName.'.png');
+        @unlink(\Codeception\Configuration::outputDir().'debug/'.$testName.'.png');
+
+        $this->module->_saveElementScreenshot('#area4', \Codeception\Configuration::outputDir().'testshot.png');
+        $this->assertFileExists(\Codeception\Configuration::outputDir().'testshot.png');
+        @unlink(\Codeception\Configuration::outputDir().'testelementshot.png');
+    }
+
     public function testSnapshot()
     {
         $this->module->amOnPage('/');