From 48c2c91427bc0c0ff60542a563cf3218e1d45885 Mon Sep 17 00:00:00 2001 From: Nils Langner Date: Tue, 25 Mar 2014 08:52:39 +0100 Subject: [PATCH 01/14] Removed unneeded mkdir from travis script --- .travis.yml | 2 -- 1 file changed, 2 deletions(-) diff --git a/.travis.yml b/.travis.yml index 7a080b9..7fed369 100755 --- a/.travis.yml +++ b/.travis.yml @@ -9,7 +9,5 @@ before_script: - wget http://selenium.googlecode.com/files/selenium-server-standalone-2.35.0.jar - java -jar selenium-server-standalone-2.35.0.jar -port 4444 >/dev/null 2>&1 & - cd test/integration/ - - mkdir tests/_log - script: php codecept.phar run -d \ No newline at end of file From c7ce09e2ea3bc4778f32217810ed0d1769fcb000 Mon Sep 17 00:00:00 2001 From: Nils Langner Date: Tue, 25 Mar 2014 09:02:22 +0100 Subject: [PATCH 02/14] Renamed functions to seeVisualChanged, dontSeeVisualChanges --- module/VisualCeption.php | 72 ++++++++++++------- .../tests/acceptance/TimeComparisonCest.php | 4 +- 2 files changed, 49 insertions(+), 27 deletions(-) diff --git a/module/VisualCeption.php b/module/VisualCeption.php index 149763d..8dfa040 100755 --- a/module/VisualCeption.php +++ b/module/VisualCeption.php @@ -42,6 +42,53 @@ public function _before (\Codeception\TestCase $test) $this->test = $test; } + private function getDeviation($identifier, $elementID) + { + $coords = $this->getCoordinates($elementID); + $this->createScreenshot($identifier, $coords); + + $compareResult = $this->compare($identifier); + + unlink($this->getScreenshotPath($identifier)); + + $deviation = round($compareResult[1] * 100, 2); + return array("deviation" => $deviation, "deviationImage" => $compareResult[0]); + } + + /** + * Compare the reference image with a current screenshot, identified by their indentifier name + * and their element ID. + * + * @param string $identifier identifies your test object + * @param string $elementID DOM ID of the element, which should be screenshotted + */ + public function seeVisualChange($identifier, $elementID = null) + { + $deviationResult = $this->getDeviation($identifier, $elementID); + if ($deviationResult["deviation"] > $this->maximumDeviation) { + $compareScreenshotPath = $this->getDeviationScreenshotPath($identifier); + $deviationResult["deviationImage"]->writeImage($compareScreenshotPath); + $this->assertTrue(false, "The deviation of the taken screenshot is too high (".$deviationResult["deviation"]."%).\nSee $compareScreenshotPath for a deviation screenshot."); + } + } + + /** + * Compare the reference image with a current screenshot, identified by their indentifier name + * and their element ID. + * + * @param string $identifier identifies your test object + * @param string $elementID DOM ID of the element, which should be screenshotted + */ + public function dontSeeVisualChange($identifier, $elementID = null) + { + $deviationResult = $this->getDeviation($identifier, $elementID); + if ($deviationResult["deviation"] <= $this->maximumDeviation) { + $compareScreenshotPath = $this->getDeviationScreenshotPath($identifier); + $deviationResult["deviationImage"]->writeImage($compareScreenshotPath); + $this->assertTrue(false, "The deviation of the taken screenshot is too low (".$deviationResult["deviation"]."%).\nSee $compareScreenshotPath for a deviation screenshot."); + } + } + /** * Initialize the module and read the config. Throws a runtime exception, if the * reference image dir is not set in the config @@ -166,31 +213,6 @@ private function createScreenshot ($identifier, array $coords) return $elementPath; } - /** - * Compare the reference image with a current screenshot, identified by their indentifier name - * and their element ID - * - * @param string $identifier identifies your test object - * @param string $elementID DOM ID of the element, which should be screenshotted - */ - public function compareScreenshot ($identifier, $elementID = null) - { - $coords = $this->getCoordinates($elementID); - $this->createScreenshot($identifier, $coords); - - $compareResult = $this->compare($identifier); - - unlink($this->getScreenshotPath($identifier)); - - $deviation = round($compareResult[1] * 100, 2); - - if ($deviation > $this->maximumDeviation) { - $compareScreenshotPath = $this->getDeviationScreenshotPath($identifier); - $compareResult[0]->writeImage($compareScreenshotPath); - $this->assertTrue(false, "The deviation of the taken screenshot is too high (".$deviation."%).\nSee $compareScreenshotPath for a deviation screenshot."); - } - } - /** * Returns the image path including the filename of a deviation image * diff --git a/test/integration/tests/acceptance/TimeComparisonCest.php b/test/integration/tests/acceptance/TimeComparisonCest.php index 455660b..ec752ae 100755 --- a/test/integration/tests/acceptance/TimeComparisonCest.php +++ b/test/integration/tests/acceptance/TimeComparisonCest.php @@ -9,10 +9,10 @@ class TimeComparisonCest public function compareTimeString (WebGuy $I, $scenario) { $I->amOnPage("/VisualCeption/time.php"); - $I->compareScreenshot("the-time", "#thetime"); + $I->seeVisualChanges("the-time", "#thetime"); // the test has to be called twice for comparison on the travis server $I->amOnPage("/VisualCeption/time.php"); - $I->compareScreenshot("the-time", "#thetime"); + $I->seeVisualChanges("the-time", "#thetime"); } } \ No newline at end of file From 01330c50041d0be3696b9ddfe4ce3ad15a7acd40 Mon Sep 17 00:00:00 2001 From: Nils Langner Date: Tue, 25 Mar 2014 09:06:28 +0100 Subject: [PATCH 03/14] added mkdir to travis --- .travis.yml | 1 + 1 file changed, 1 insertion(+) diff --git a/.travis.yml b/.travis.yml index 7fed369..2de0c15 100755 --- a/.travis.yml +++ b/.travis.yml @@ -9,5 +9,6 @@ before_script: - wget http://selenium.googlecode.com/files/selenium-server-standalone-2.35.0.jar - java -jar selenium-server-standalone-2.35.0.jar -port 4444 >/dev/null 2>&1 & - cd test/integration/ + - mkdir tests/_log script: php codecept.phar run -d \ No newline at end of file From 10c51996982631bd3796d73262480493216503c9 Mon Sep 17 00:00:00 2001 From: Nils Langner Date: Tue, 25 Mar 2014 09:09:42 +0100 Subject: [PATCH 04/14] Added build to to travis --- .travis.yml | 1 + 1 file changed, 1 insertion(+) diff --git a/.travis.yml b/.travis.yml index 2de0c15..0c63a56 100755 --- a/.travis.yml +++ b/.travis.yml @@ -10,5 +10,6 @@ before_script: - java -jar selenium-server-standalone-2.35.0.jar -port 4444 >/dev/null 2>&1 & - cd test/integration/ - mkdir tests/_log + - php codecept.phar build script: php codecept.phar run -d \ No newline at end of file From 28243fd8ef93ac07402b8fb0daff780f56af71d7 Mon Sep 17 00:00:00 2001 From: Nils Langner Date: Tue, 25 Mar 2014 09:12:14 +0100 Subject: [PATCH 05/14] fixed typo in method name --- module/VisualCeption.php | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/module/VisualCeption.php b/module/VisualCeption.php index 8dfa040..75bab42 100755 --- a/module/VisualCeption.php +++ b/module/VisualCeption.php @@ -62,7 +62,7 @@ private function getDeviation($identifier, $elementID) * @param string $identifier identifies your test object * @param string $elementID DOM ID of the element, which should be screenshotted */ - public function seeVisualChange($identifier, $elementID = null) + public function seeVisualChanges($identifier, $elementID = null) { $deviationResult = $this->getDeviation($identifier, $elementID); if ($deviationResult["deviation"] > $this->maximumDeviation) { @@ -79,7 +79,7 @@ public function seeVisualChange($identifier, $elementID = null) * @param string $identifier identifies your test object * @param string $elementID DOM ID of the element, which should be screenshotted */ - public function dontSeeVisualChange($identifier, $elementID = null) + public function dontSeeVisualChanges($identifier, $elementID = null) { $deviationResult = $this->getDeviation($identifier, $elementID); if ($deviationResult["deviation"] <= $this->maximumDeviation) { From be8285b61bcf365874fe35e8336605cdceb20636 Mon Sep 17 00:00:00 2001 From: Nils Langner Date: Tue, 25 Mar 2014 09:15:36 +0100 Subject: [PATCH 06/14] CHaged lt to gt --- module/VisualCeption.php | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/module/VisualCeption.php b/module/VisualCeption.php index 75bab42..34efcef 100755 --- a/module/VisualCeption.php +++ b/module/VisualCeption.php @@ -62,7 +62,7 @@ private function getDeviation($identifier, $elementID) * @param string $identifier identifies your test object * @param string $elementID DOM ID of the element, which should be screenshotted */ - public function seeVisualChanges($identifier, $elementID = null) + public function dontseeVisualChanges($identifier, $elementID = null) { $deviationResult = $this->getDeviation($identifier, $elementID); if ($deviationResult["deviation"] > $this->maximumDeviation) { @@ -79,7 +79,7 @@ public function seeVisualChanges($identifier, $elementID = null) * @param string $identifier identifies your test object * @param string $elementID DOM ID of the element, which should be screenshotted */ - public function dontSeeVisualChanges($identifier, $elementID = null) + public function seeVisualChanges($identifier, $elementID = null) { $deviationResult = $this->getDeviation($identifier, $elementID); if ($deviationResult["deviation"] <= $this->maximumDeviation) { From 4375a36a274abb38379c5a48b20dec12ba5e31c1 Mon Sep 17 00:00:00 2001 From: Nils Langner Date: Tue, 25 Mar 2014 09:20:42 +0100 Subject: [PATCH 07/14] Added handling for first shots --- module/VisualCeption.php | 53 +++++++++++++++++++++++----------------- 1 file changed, 30 insertions(+), 23 deletions(-) diff --git a/module/VisualCeption.php b/module/VisualCeption.php index 34efcef..d8aa64c 100755 --- a/module/VisualCeption.php +++ b/module/VisualCeption.php @@ -4,6 +4,7 @@ /** * Class VisualCeption + * * @copyright Copyright (c) 2014 G+J Digital Products GmbH * @license MIT license, http://www.opensource.org/licenses/mit-license.php * @package Codeception\Module @@ -42,7 +43,7 @@ public function _before (\Codeception\TestCase $test) $this->test = $test; } - private function getDeviation($identifier, $elementID) + private function getDeviation ($identifier, $elementID) { $coords = $this->getCoordinates($elementID); $this->createScreenshot($identifier, $coords); @@ -52,7 +53,7 @@ private function getDeviation($identifier, $elementID) unlink($this->getScreenshotPath($identifier)); $deviation = round($compareResult[1] * 100, 2); - return array("deviation" => $deviation, "deviationImage" => $compareResult[0]); + return array ("deviation" => $deviation, "deviationImage" => $compareResult[0]); } /** @@ -62,13 +63,15 @@ private function getDeviation($identifier, $elementID) * @param string $identifier identifies your test object * @param string $elementID DOM ID of the element, which should be screenshotted */ - public function dontseeVisualChanges($identifier, $elementID = null) + public function dontseeVisualChanges ($identifier, $elementID = null) { $deviationResult = $this->getDeviation($identifier, $elementID); - if ($deviationResult["deviation"] > $this->maximumDeviation) { - $compareScreenshotPath = $this->getDeviationScreenshotPath($identifier); - $deviationResult["deviationImage"]->writeImage($compareScreenshotPath); - $this->assertTrue(false, "The deviation of the taken screenshot is too high (".$deviationResult["deviation"]."%).\nSee $compareScreenshotPath for a deviation screenshot."); + if (! is_null($deviationResult["deviationImage"])) { + if ($deviationResult["deviation"] > $this->maximumDeviation) { + $compareScreenshotPath = $this->getDeviationScreenshotPath($identifier); + $deviationResult["deviationImage"]->writeImage($compareScreenshotPath); + $this->assertTrue(false, "The deviation of the taken screenshot is too high (" . $deviationResult["deviation"] . "%).\nSee $compareScreenshotPath for a deviation screenshot."); + } } } @@ -79,18 +82,21 @@ public function dontseeVisualChanges($identifier, $elementID = null) * @param string $identifier identifies your test object * @param string $elementID DOM ID of the element, which should be screenshotted */ - public function seeVisualChanges($identifier, $elementID = null) + public function seeVisualChanges ($identifier, $elementID = null) { $deviationResult = $this->getDeviation($identifier, $elementID); - if ($deviationResult["deviation"] <= $this->maximumDeviation) { - $compareScreenshotPath = $this->getDeviationScreenshotPath($identifier); - $deviationResult["deviationImage"]->writeImage($compareScreenshotPath); - $this->assertTrue(false, "The deviation of the taken screenshot is too low (".$deviationResult["deviation"]."%).\nSee $compareScreenshotPath for a deviation screenshot."); + if (! is_null($deviationResult["deviationImage"])) { + if ($deviationResult["deviation"] <= $this->maximumDeviation) { + $compareScreenshotPath = $this->getDeviationScreenshotPath($identifier); + $deviationResult["deviationImage"]->writeImage($compareScreenshotPath); + $this->assertTrue(false, "The deviation of the taken screenshot is too low (" . $deviationResult["deviation"] . "%).\nSee $compareScreenshotPath for a deviation screenshot."); + } } } /** - * Initialize the module and read the config. Throws a runtime exception, if the + * Initialize the module and read the config. + * Throws a runtime exception, if the * reference image dir is not set in the config * * @throws \RuntimeException @@ -114,7 +120,8 @@ private function init () } /** - * Find the position and proportion of a DOM element, specified by it's ID. The method inject the + * Find the position and proportion of a DOM element, specified by it's ID. + * The method inject the * JQuery Framework and uses the "noConflict"-mode to get the width, height and offset params. * * @param $elementId DOM ID of the element, which should be screenshotted @@ -127,7 +134,7 @@ private function getCoordinates ($elementId) $elementId = 'body'; } - $jQueryString = file_get_contents(__DIR__."/jquery.js"); + $jQueryString = file_get_contents(__DIR__ . "/jquery.js"); $webDriver->executeScript($jQueryString); $webDriver->executeScript('jQuery.noConflict();'); @@ -165,12 +172,11 @@ private function getScreenshotPath ($identifier) $debugDir = \Codeception\Configuration::logDir() . 'debug/tmp/'; if (! is_dir($debugDir)) { $created = mkdir($debugDir, 0777, true); - if( $created ) { - $this->debug("Creating directory: $debugDir"); - }else{ + if ($created) { + $this->debug("Creating directory: $debugDir"); + } else { throw new \RuntimeException("Unable to create temporary screenshot dir ($debugDir)"); } - } return $debugDir . $this->getScreenshotName($identifier); } @@ -204,9 +210,9 @@ private function createScreenshot ($identifier, array $coords) $webDriver->takeScreenshot($screenshotPath); $screenShotImage = new \Imagick(); - $screenShotImage->readImage( $screenshotPath ); - $screenShotImage->cropImage( $coords['width'], $coords['height'], $coords['offset_x'], $coords['offset_y'] ); - $screenShotImage->writeImage( $elementPath ); + $screenShotImage->readImage($screenshotPath); + $screenShotImage->cropImage($coords['width'], $coords['height'], $coords['offset_x'], $coords['offset_y']); + $screenShotImage->writeImage($elementPath); unlink($screenshotPath); @@ -226,7 +232,8 @@ private function getDeviationScreenshotPath ($identifier) } /** - * Compare two images by its identifiers. If the reference image doesn't exists + * Compare two images by its identifiers. + * If the reference image doesn't exists * the image is copied to the reference path. * * @param $identifier identifies your test object From 95ee846dfbec7fe6b2bb9ac8b2e93007b1509eb0 Mon Sep 17 00:00:00 2001 From: Nils Langner Date: Tue, 25 Mar 2014 09:25:56 +0100 Subject: [PATCH 08/14] Changed test case fixures --- test/integration/tests/acceptance/TimeComparisonCest.php | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/test/integration/tests/acceptance/TimeComparisonCest.php b/test/integration/tests/acceptance/TimeComparisonCest.php index ec752ae..1cebc64 100755 --- a/test/integration/tests/acceptance/TimeComparisonCest.php +++ b/test/integration/tests/acceptance/TimeComparisonCest.php @@ -8,11 +8,11 @@ class TimeComparisonCest */ public function compareTimeString (WebGuy $I, $scenario) { - $I->amOnPage("/VisualCeption/time.php"); - $I->seeVisualChanges("the-time", "#thetime"); + $I->amOnPage("/VisualCeption/seeVisualChanges.php"); + $I->seeVisualChanges("block", "#theblock"); // the test has to be called twice for comparison on the travis server $I->amOnPage("/VisualCeption/time.php"); - $I->seeVisualChanges("the-time", "#thetime"); + $I->seeVisualChanges("block", "#theblock"); } } \ No newline at end of file From 41bb7dacfe769e915bb6737c5416a129f8a37ab2 Mon Sep 17 00:00:00 2001 From: Nils Langner Date: Tue, 25 Mar 2014 09:28:50 +0100 Subject: [PATCH 09/14] Added new integration test --- .../tests/acceptance/TimeComparisonCest.php | 18 +++++++++++++++--- 1 file changed, 15 insertions(+), 3 deletions(-) diff --git a/test/integration/tests/acceptance/TimeComparisonCest.php b/test/integration/tests/acceptance/TimeComparisonCest.php index 1cebc64..93d1615 100755 --- a/test/integration/tests/acceptance/TimeComparisonCest.php +++ b/test/integration/tests/acceptance/TimeComparisonCest.php @@ -6,13 +6,25 @@ class TimeComparisonCest /** * Coparing a div that renders the current time */ - public function compareTimeString (WebGuy $I, $scenario) + public function seeVisualChanges (WebGuy $I, $scenario) { $I->amOnPage("/VisualCeption/seeVisualChanges.php"); $I->seeVisualChanges("block", "#theblock"); // the test has to be called twice for comparison on the travis server - $I->amOnPage("/VisualCeption/time.php"); + $I->amOnPage("/VisualCeption/seeVisualChanges.php"); $I->seeVisualChanges("block", "#theblock"); } -} \ No newline at end of file + + public function dontSeeVisualChanges (WebGuy $I, $scenario) + { + $I->amOnPage("/VisualCeption/dontSeeVisualChanges.php"); + $I->dontSeeVisualChanges("block", "#theblock"); + + // the test has to be called twice for comparison on the travis server + $I->amOnPage("/VisualCeption/dontSeeVisualChanges.php"); + $I->dontSeeVisualChanges("block", "#theblock"); + } + +} + From 4b346d83d5b8ae1ba1bf9b23080ec4f9160033b4 Mon Sep 17 00:00:00 2001 From: Nils Langner Date: Tue, 25 Mar 2014 10:21:44 +0100 Subject: [PATCH 10/14] Added new debug output for deviation --- module/VisualCeption.php | 1 + test/integration/tests/acceptance/TimeComparisonCest.php | 3 +-- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/module/VisualCeption.php b/module/VisualCeption.php index d8aa64c..cd78b40 100755 --- a/module/VisualCeption.php +++ b/module/VisualCeption.php @@ -53,6 +53,7 @@ private function getDeviation ($identifier, $elementID) unlink($this->getScreenshotPath($identifier)); $deviation = round($compareResult[1] * 100, 2); + $this->debug("The deviation between the images is ". $deviation . " percent"); return array ("deviation" => $deviation, "deviationImage" => $compareResult[0]); } diff --git a/test/integration/tests/acceptance/TimeComparisonCest.php b/test/integration/tests/acceptance/TimeComparisonCest.php index 93d1615..b07418d 100755 --- a/test/integration/tests/acceptance/TimeComparisonCest.php +++ b/test/integration/tests/acceptance/TimeComparisonCest.php @@ -26,5 +26,4 @@ public function dontSeeVisualChanges (WebGuy $I, $scenario) $I->dontSeeVisualChanges("block", "#theblock"); } -} - +} \ No newline at end of file From c7c3310b2e3c0231aa4cba1fe326638882bd5486 Mon Sep 17 00:00:00 2001 From: Nils Langner Date: Tue, 25 Mar 2014 10:27:28 +0100 Subject: [PATCH 11/14] Update readme.md --- readme.md | 9 ++++++--- 1 file changed, 6 insertions(+), 3 deletions(-) diff --git a/readme.md b/readme.md index 4de3619..3c4c34a 100644 --- a/readme.md +++ b/readme.md @@ -52,10 +52,11 @@ VisualCeption: ## Usage -VisualCeption is really easy to use. There is only one method that will be added to your WebGuy compareScreenshot. This will be used to name the screenshot and identify the elements that has to be screenshot. +VisualCeption is really easy to use. There are only two method that will be added to your WebGuy seeVisualChanges and dontSeeVisualChanges. ```php -$I->compareScreenshot( "uniqueIdentifier", "elementId" ); +$I->seeVisualChanges( "uniqueIdentifier1", "elementId1" ); +$I->dontSeeVisualChanges( "uniqueIdentifier2", "elementId2" ); ``` * **uniqueIdentifier** For comparing the images it is important to have a stable name. This is the corresponding name. @@ -63,9 +64,11 @@ $I->compareScreenshot( "uniqueIdentifier", "elementId" ); **Example Usage** ```php -$I->compareScreenshot( "subNavigation", "#subNav" ); +$I->seeVisualChanges( "subNavigation", "#subNav" ); ``` +If you need more information about the test run please use the command line debug option (-d). + ## Restriction VisualCeption uses the WebDriver module for making the screenshots. As a consequence we are not able to take screenshots via google chrome as the chromedriver does not allow full page screenshots. From 031a3bd5096f4fe214cbeeee1a4d2eea321e2bd7 Mon Sep 17 00:00:00 2001 From: Nils Langner Date: Tue, 25 Mar 2014 10:34:16 +0100 Subject: [PATCH 12/14] Added php 5.4 to travis ci --- .travis.yml | 1 + 1 file changed, 1 insertion(+) diff --git a/.travis.yml b/.travis.yml index 0c63a56..c5c4a37 100755 --- a/.travis.yml +++ b/.travis.yml @@ -1,6 +1,7 @@ language: php php: + - 5.3 - 5.4 - 5.5 From 5054cbae4b4f50105abf4ce25d52a211458dc1d9 Mon Sep 17 00:00:00 2001 From: Nils Langner Date: Tue, 25 Mar 2014 10:37:38 +0100 Subject: [PATCH 13/14] Update readme.md --- readme.md | 2 ++ 1 file changed, 2 insertions(+) diff --git a/readme.md b/readme.md index 3c4c34a..7502df3 100644 --- a/readme.md +++ b/readme.md @@ -1,6 +1,8 @@ # VisualCeption Visual regression tests integrated in [Codeception](http://codeception.com/). +[![Build Status](https://travis-ci.org/DigitalProducts/codeception-module-visualception.svg?branch=master)](https://travis-ci.org/DigitalProducts/codeception-module-visualception) + This module can be used to compare the current representation of a website element with an expeted. It was written on the shoulders of codeception and integrates in a very easy way. **Example** From 177813846ddf1166be4cb92357393ea5be7d79ab Mon Sep 17 00:00:00 2001 From: Nils Langner Date: Tue, 25 Mar 2014 10:42:44 +0100 Subject: [PATCH 14/14] fixed typo in methodname --- module/VisualCeption.php | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/module/VisualCeption.php b/module/VisualCeption.php index cd78b40..36249ba 100755 --- a/module/VisualCeption.php +++ b/module/VisualCeption.php @@ -64,7 +64,7 @@ private function getDeviation ($identifier, $elementID) * @param string $identifier identifies your test object * @param string $elementID DOM ID of the element, which should be screenshotted */ - public function dontseeVisualChanges ($identifier, $elementID = null) + public function dontSeeVisualChanges ($identifier, $elementID = null) { $deviationResult = $this->getDeviation($identifier, $elementID); if (! is_null($deviationResult["deviationImage"])) {