PHPackages paulmskim/module-visualception - PHPackages - PHPackages [Skip to content](#main-content)[PHPackages](/)[Directory](/)[Categories](/categories)[Trending](/trending)[Leaderboard](/leaderboard)[Changelog](/changelog)[Analyze](/analyze)[Collections](/collections)[Log in](/login)[Sign up](/register) 1. [Directory](/) 2. / 3. paulmskim/module-visualception ActiveLibrary paulmskim/module-visualception ============================== Visual regression tests for Codeception 4.0.0(3y ago)014Apache-2.0PHPPHP >=5.6.0 Since Mar 1Pushed 3y agoCompare [ Source](https://github.com/paulmskim/module-visualception)[ Packagist](https://packagist.org/packages/paulmskim/module-visualception)[ Docs](https://github.com/paulmskim/module-visualception)[ RSS](/packages/paulmskim-module-visualception/feed)WikiDiscussions master Synced 1mo ago READMEChangelog (4)Dependencies (3)Versions (15)Used By (0) VisualCeption ============= [](#visualception) [![](https://camo.githubusercontent.com/115d7c1ab18ccea9f682ed290d39ad538bf7a5b5619de1e6cc741b606932ea12/687474703a2f2f7777772e74686577656268617465736d652e636f6d2f77702d636f6e74656e742f75706c6f6164732f76697375616c63657074696f6e2e706e67)](https://camo.githubusercontent.com/115d7c1ab18ccea9f682ed290d39ad538bf7a5b5619de1e6cc741b606932ea12/687474703a2f2f7777772e74686577656268617465736d652e636f6d2f77702d636f6e74656e742f75706c6f6164732f76697375616c63657074696f6e2e706e67) Visual regression tests for [Codeception](http://codeception.com/). This module can be used to compare the current representation of a website element with an expected. It was written on the shoulders of codeception and integrates in a very easy way. **WARNING** This module can reduce the execution speed of acceptance tests. Use it only for visual regression test suite and not for regular end to end testing. **Example** [![](https://camo.githubusercontent.com/43dd28cbae6ffdb8d83716b38ea7ba50a25a4064671c71f895a8d02e6ed208e1/687474703a2f2f7777772e74686577656268617465736d652e636f6d2f56697375616c43657074696f6e2f636f6d706172652e706e67)](https://camo.githubusercontent.com/43dd28cbae6ffdb8d83716b38ea7ba50a25a4064671c71f895a8d02e6ed208e1/687474703a2f2f7777772e74686577656268617465736d652e636f6d2f56697375616c43657074696f6e2f636f6d706172652e706e67) How it works ------------ [](#how-it-works) VisualCeption uses a combination of the "make a screenshot" feature in webdriver, imagick and native JavaScript to compare visual elements on a website. This comparison is done in five steps: 1. **Take a screenshot** of the full page using webdriver. 2. **Calculate the position** and size of the selected element using JavaScript. 3. **Crop the element** out of the full screenshot using imagick. 4. **Compare the element** with an older version of the screenshot that has been proofed as valid using imagick. If no previous image exists the current image will be used fur future comparions. As an effect of this approach the test has to be **run twice** before it works. 5. If the deviation is too high **throw an exception** that is caught by Codeception. Requirements ------------ [](#requirements) VisualCeption needs the following components to run: - **Codeception** VisualCeption is a module for [Codeception](http://codeception.com/). It will need a running version of this tool. - **Imagick** For comparing two images VisualCeption is using the imagick library for php. For more information visit [php.net](http://www.php.net/manual/de/book.imagick.php) or the [installation guide](http://www.php.net/manual/en/imagick.setup.php). - **WebDriver module** This tool only works with the webdriver module in Codeception at the moment. Installation ------------ [](#installation) Make sure you have php-imagick extension installed. Run `php -m` to see if imagick extension is enabled. Then add VisualCeption to composer.json: ``` composer require "paulmskim/module-visualception:*" --dev ``` ### Configuration [](#configuration) To use the VisualCeption module you have to configure it. **Example Configuration** ``` modules: enabled: - WebDriver: url: http://localhost.com browser: firefox - VisualCeption: maximumDeviation: 5 # deviation in percent saveCurrentImageIfFailure: true # if true, VisualCeption saves the current fullScreenShot: true # fullpage screenshot ``` - **referenceImageDir** (default: `'VisualCeption/'`) VisualCeption uses an "old" image for calculating the deviation. These images have to be stored in data directory (tests/\_data) or be relative to it. - **currentImageDir** (default: `'debug/visual/'`) temporary directory for current processed images. Relative to output dir `tests/_output`. - **maximumDeviation** (default: `0`) When comparing two images the deviation will be calculated. If this deviation is greater than the maximum deviation the test will fail. - **saveCurrentImageIfFailure** (default: `true`) When the test fails, the current image will be saved too, so it's easier to change the reference image with this one. The image will appear beside the compare image with the prefix "current." - **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 Usage ----- [](#usage) VisualCeption is really easy to use. There are only two methods that will be added to $I `seeVisualChanges` and `dontSeeVisualChanges`. ``` $I->seeVisualChanges("uniqueIdentifier1", "elementId1"); $I->dontSeeVisualChanges("uniqueIdentifier2", "elementId2"); $I->dontSeeVisualChanges("uniqueIdentifier3", "elementId3", array("excludeElement1", "excludeElement2")); $I->dontSeeVisualChanges("uniqueIdentifier3", "elementId3", array("excludeElement1", "excludeElement2"), $deviation]); ``` - **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*. - **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. **Example Usage** ``` $I->seeVisualChanges( "subNavigation", "#subNav" ); $I->dontSeeVisualChanges("content", "div.content", array("#intro")); ``` If you need more information about the test run please use the command line debug option (-d or --debug). HTML Reports ------------ [](#html-reports) Enable Reports in config and use nice HTML output to see all failed visual tests with their image diffs on a page: ``` modules: enabled: - WebDriver: url: http://localhost.com browser: firefox - VisualCeption: report: true templateFile: "/report/template2.php" # Absolute path or relative from module dir to report template. Default "/report/template.php" ``` Restriction ----------- [](#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. Run tests with Docker --------------------- [](#run-tests-with-docker) ``` docker-compose up --abort-on-container-exit ``` ### Health Score 29 — LowBetter than 59% of packages Maintenance20 Infrequent updates — may be unmaintained Popularity6 Limited adoption so far Community16 Small or concentrated contributor base Maturity66 Established project with proven stability Bus Factor2 2 contributors hold 50%+ of commits How is this calculated?**Maintenance (25%)** — Last commit recency, latest release date, and issue-to-star ratio. Uses a 2-year decay window. **Popularity (30%)** — Total and monthly downloads, GitHub stars, and forks. Logarithmic scaling prevents top-heavy scores. **Community (15%)** — Contributors, dependents, forks, watchers, and maintainers. Measures real ecosystem engagement. **Maturity (30%)** — Project age, version count, PHP version support, and release stability. ### Release Activity Cadence Every ~242 days Recently: every ~69 days Total 10 Last Release 1183d ago Major Versions 0.9.0 → 1.0.02017-08-18 1.0.4 → 2.0.02023-02-09 2.0.0 → 3.0.02023-02-09 2.0.1 → 4.0.02023-02-20 PHP version history (2 changes)0.9.0PHP >=5.4.0 2.0.0PHP >=5.6.0 ### Community Maintainers ![](https://www.gravatar.com/avatar/e9def89126d3b62ee560108992cb795b42837c6e6b7d65451f242180a75201ef?d=identicon)[paulmskim](/maintainers/paulmskim) --- Top Contributors [![buresmi7](https://avatars.githubusercontent.com/u/1267665?v=4)](https://github.com/buresmi7 "buresmi7 (34 commits)")[![DavertMik](https://avatars.githubusercontent.com/u/220264?v=4)](https://github.com/DavertMik "DavertMik (17 commits)")[![DigitalProducts](https://avatars.githubusercontent.com/u/7011638?v=4)](https://github.com/DigitalProducts "DigitalProducts (14 commits)")[![paulmskim](https://avatars.githubusercontent.com/u/16699941?v=4)](https://github.com/paulmskim "paulmskim (12 commits)")[![RayRom](https://avatars.githubusercontent.com/u/9988573?v=4)](https://github.com/RayRom "RayRom (6 commits)")[![toddy](https://avatars.githubusercontent.com/u/977658?v=4)](https://github.com/toddy "toddy (4 commits)")[![spaceman-cb](https://avatars.githubusercontent.com/u/19659124?v=4)](https://github.com/spaceman-cb "spaceman-cb (2 commits)")[![mklepaczewski](https://avatars.githubusercontent.com/u/1395675?v=4)](https://github.com/mklepaczewski "mklepaczewski (1 commits)")[![nook-ru](https://avatars.githubusercontent.com/u/444489?v=4)](https://github.com/nook-ru "nook-ru (1 commits)")[![sebastianneubert](https://avatars.githubusercontent.com/u/2872569?v=4)](https://github.com/sebastianneubert "sebastianneubert (1 commits)")[![the-web-hates-me](https://avatars.githubusercontent.com/u/4029191?v=4)](https://github.com/the-web-hates-me "the-web-hates-me (1 commits)")[![mgerasimchuk](https://avatars.githubusercontent.com/u/13135129?v=4)](https://github.com/mgerasimchuk "mgerasimchuk (1 commits)")[![DanielRuf](https://avatars.githubusercontent.com/u/827205?v=4)](https://github.com/DanielRuf "DanielRuf (1 commits)")[![EvgeniyMarchenko89](https://avatars.githubusercontent.com/u/44601290?v=4)](https://github.com/EvgeniyMarchenko89 "EvgeniyMarchenko89 (1 commits)")[![eXorus](https://avatars.githubusercontent.com/u/1255561?v=4)](https://github.com/eXorus "eXorus (1 commits)")[![koehnlein](https://avatars.githubusercontent.com/u/16088567?v=4)](https://github.com/koehnlein "koehnlein (1 commits)")[![MatissJanis](https://avatars.githubusercontent.com/u/886567?v=4)](https://github.com/MatissJanis "MatissJanis (1 commits)")[![al-zakharov](https://avatars.githubusercontent.com/u/104079778?v=4)](https://github.com/al-zakharov "al-zakharov (1 commits)") ### Code Quality TestsCodeception ### Embed Badge ![Health badge](/badges/paulmskim-module-visualception/health.svg) ``` [![Health](https://phpackages.com/badges/paulmskim-module-visualception/health.svg)](https://phpackages.com/packages/paulmskim-module-visualception) ``` PHPackages © 2026 [Directory](/)[Categories](/categories)[Trending](/trending)[Changelog](/changelog)[Analyze](/analyze)