From dadf9ed9552da584a00f666712ba5d89eea97a0f Mon Sep 17 00:00:00 2001 From: paulmskim Date: Tue, 8 Nov 2022 02:05:46 +0800 Subject: [PATCH 1/4] Add force full screenshot config option to fix issue of crop coordinates being outside window dimensions --- module/VisualCeption.php | 22 ++++++++++++++-------- 1 file changed, 14 insertions(+), 8 deletions(-) diff --git a/module/VisualCeption.php b/module/VisualCeption.php index 0c7e2f4..86dbce9 100755 --- a/module/VisualCeption.php +++ b/module/VisualCeption.php @@ -29,9 +29,10 @@ class VisualCeption extends CodeceptionModule implements MultiSession 'currentImageDir' => 'debug/visual/', 'report' => false, 'module' => 'WebDriver', - 'fullScreenShot' => false + 'fullScreenShot' => false, + 'forceFullScreenShot' => false, ]; - + protected $saveCurrentImageIfFailure; private $referenceImageDir; @@ -161,7 +162,7 @@ protected function getBrowserModule() { return null; } - + /** * Get value of the private property $referenceImageDir * @@ -179,7 +180,7 @@ public function getReferenceImageDir() * @param string $identifier Identifies your test object * @param string $elementID DOM ID of the element, which should be screenshotted * @param string|array $excludeElements Element name or array of Element names, which should not appear in the screenshot - * @param float $deviation + * @param float $deviation */ public function seeVisualChanges($identifier, $elementID = null, $excludeElements = array(), $deviation = null) { @@ -197,7 +198,7 @@ public function seeVisualChanges($identifier, $elementID = null, $excludeElement * @param string $identifier identifies your test object * @param string $elementID DOM ID of the element, which should be screenshotted * @param string|array $excludeElements string of Element name or array of Element names, which should not appear in the screenshot - * @param float $deviation + * @param float $deviation */ public function dontSeeVisualChanges($identifier, $elementID = null, $excludeElements = array(), $deviation = null) { @@ -411,7 +412,7 @@ private function createScreenshot($identifier, array $coords, array $excludeElem $this->hideElementsForScreenshot($excludeElements); - if ($this->config["fullScreenShot"] == true) { + if ($this->config["fullScreenShot"] == true || $this->config["forceFullScreenShot"] == true) { $height = $this->webDriver->executeScript("var ele=document.querySelector('html'); return ele.scrollHeight;"); list($viewportHeight, $devicePixelRatio) = $this->webDriver->executeScript("return [window.innerHeight, window.devicePixelRatio]"); @@ -430,8 +431,13 @@ private function createScreenshot($identifier, array $coords, array $excludeElem $screenShotImage->resetIterator(); $fullShot = $screenShotImage->appendImages(true); - $fullShot->writeImage($elementPath); + if ($this->config["fullScreenShot"] == true) { + $fullShot->writeImage($elementPath); + } else { + $fullShot->cropImage($coords['width'], $coords['height'], $coords['offset_x'], $coords['offset_y']); + $fullShot->writeImage($elementPath); + } } else { $screenshotBinary = $this->webDriver->takeScreenshot(); @@ -605,4 +611,4 @@ public function _closeSession($session = null) { // this method will never be needed } -} \ No newline at end of file +} From 3c1e13027fa27438754e29c732310e0f4de26689 Mon Sep 17 00:00:00 2001 From: paulmskim Date: Tue, 8 Nov 2022 02:07:41 +0800 Subject: [PATCH 2/4] Fix problem with webdriver not resetting window position after screenshot --- module/VisualCeption.php | 2 ++ 1 file changed, 2 insertions(+) diff --git a/module/VisualCeption.php b/module/VisualCeption.php index 86dbce9..276dee4 100755 --- a/module/VisualCeption.php +++ b/module/VisualCeption.php @@ -448,6 +448,8 @@ private function createScreenshot($identifier, array $coords, array $excludeElem $this->resetHideElementsForScreenshot($excludeElements); + $this->webDriver->executeScript("window.scrollTo(0, 0);"); + return $elementPath; } From d3ccfe565839f271a5caa0f77dcf8dd983fe6b0d Mon Sep 17 00:00:00 2001 From: paulmskim Date: Tue, 8 Nov 2022 02:14:54 +0800 Subject: [PATCH 3/4] Move webdriver window position reset to within full screenshot block --- module/VisualCeption.php | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/module/VisualCeption.php b/module/VisualCeption.php index 276dee4..68bb1f2 100755 --- a/module/VisualCeption.php +++ b/module/VisualCeption.php @@ -438,6 +438,8 @@ private function createScreenshot($identifier, array $coords, array $excludeElem $fullShot->cropImage($coords['width'], $coords['height'], $coords['offset_x'], $coords['offset_y']); $fullShot->writeImage($elementPath); } + + $this->webDriver->executeScript("window.scrollTo(0, 0);"); } else { $screenshotBinary = $this->webDriver->takeScreenshot(); @@ -448,8 +450,6 @@ private function createScreenshot($identifier, array $coords, array $excludeElem $this->resetHideElementsForScreenshot($excludeElements); - $this->webDriver->executeScript("window.scrollTo(0, 0);"); - return $elementPath; } From 06333b47e8767bbededd3fb48de8477c4589a725 Mon Sep 17 00:00:00 2001 From: paulmskim Date: Tue, 8 Nov 2022 02:26:49 +0800 Subject: [PATCH 4/4] Add new config to readme --- readme.md | 11 ++++++----- 1 file changed, 6 insertions(+), 5 deletions(-) diff --git a/readme.md b/readme.md index 566da41..cd7c43b 100755 --- a/readme.md +++ b/readme.md @@ -44,13 +44,13 @@ composer require "codeception/visualception:*" --dev ### Configuration -To use the VisualCeption module you have to configure it. +To use the VisualCeption module you have to configure it. **Example Configuration** ```yaml modules: - enabled: + enabled: - WebDriver: url: http://localhost.com browser: firefox @@ -67,6 +67,7 @@ modules: * **report** (default: `false`) When enabled an HTML report with diffs for failing tests is generated. Report is stored in `tests/_output/vcresult.html`. * **module** (default: `'WebDriver'`) module responsible for browser interaction, default: WebDriver. * **fullScreenShot** (default: `false`) fullpage screenshot for Chrome and Firefox +* **forceFullScreenShot** (default: `false`) force fullpage screenshot for Chrome and Firefox. Useful when element to capture is outside the initial window dimensions of WebDriver. ## Usage @@ -82,7 +83,7 @@ $I->dontSeeVisualChanges("uniqueIdentifier3", "elementId3", array("excludeElemen ``` * **uniqueIdentifier** For comparing the images it is important to have a stable name. This is the corresponding name. -* **elementId** It is possible to only compare a special div container. The element id can be passed. *You can use CSS locators*. +* **elementId** It is possible to only compare a special div container. The element id can be passed. *You can use CSS locators*. * **excludeElements** Optional parameter as string or an array of strings to exclude an element from the screenshot. Maybe there is an animated image in your test container, so you can ignore it. *You can use CSS locators*. * **$deviation** Optional parameter as float use if it is necessary to establish deviation coefficient other than configuration. @@ -97,10 +98,10 @@ If you need more information about the test run please use the command line debu ## HTML Reports Enable Reports in config and use nice HTML output to see all failed visual tests with their image diffs on a page: - + ```yaml modules: - enabled: + enabled: - WebDriver: url: http://localhost.com browser: firefox