Initial commit

Author: rossjcooper

.gitignore

@@ -0,0 +1,3 @@
+.gitattributes
+vendor
+.idea

README.md

@@ -0,0 +1,57 @@
+# Laravel Dusk Visual Assert
+
+This package adds assertions to compare screenshots taken during [Laravel Dusk](https://laravel.com/docs/10.x/dusk#taking-a-screenshot) tests using the Imagick extension.
+
+## Installation
+
+You can install the package via composer:
+
+```bash
+composer require --dev rossjcooper/laravel-dusk-visual-assert
+```
+
+## Usage
+
+The Dusk Browser class now has access to some new methods:
+
+### assertScreenshot()
+
+This method will take a screenshot of the current page and compare it to a reference image (generated the first time the test is run). 
+
+If the images are different, the test will fail and save the image diff so you can inspect the differences.
+
+```php
+$browser->assertScreenshot(string $name, float $threshold = 0.0001, int $metric = Imagick::METRIC_MEANSQUAREERROR)
+```
+
+Example: 
+
+```php
+$this->browse(function (Browser $browser) {
+        $browser->visit('/')
+            ->assertScreenshot('home');
+    });
+```
+
+### assertResponsiveScreenshots()
+
+This method is similar to the `assertScreenshot` as above but it screenshots the page at different screen sizes.
+
+```php
+$browser->assertResponsiveScreenshots(string $name, float $threshold = 0.0001, int $metric = Imagick::METRIC_MEANSQUAREERROR)
+```
+
+Example:
+
+```php
+$this->browse(function (Browser $browser) {
+        $browser->visit('/')
+            ->assertResponsiveScreenshots('home');
+    });
+```
+
+## Updating reference images
+
+If you want to update the reference images simply delete them from the `tests/Browser/screenshots` directory and re-run your tests to generate new ones.
+
+I would recommend committing the reference images to your repository so you can track changes to them over time.

composer.json

@@ -0,0 +1,39 @@
+{
+    "name": "rossjcooper/laravel-dusk-visual-assert",
+    "description": "Adds assertions to compare screenshots taken during Laravel Dusk tests",
+    "keywords": [
+        "laravel",
+        "dusk",
+        "visual",
+        "assert",
+        "screenshot",
+        "image",
+        "comparison",
+        "regression"
+    ],
+    "version": "1.0.0",
+    "type": "library",
+    "license": "MIT",
+    "autoload": {
+        "psr-4": {
+            "Rossjcooper\\LaravelDuskVisualAssert\\": "src/"
+        }
+    },
+    "authors": [
+        {
+            "name": "Ross Cooper",
+            "email": "[email protected]"
+        }
+    ],
+    "require-dev": {
+        "ext-imagick": "*",
+        "laravel/dusk": "^7"
+    },
+    "extra": {
+        "laravel": {
+            "providers": [
+                "Rossjcooper\\LaravelDuskVisualAssert\\ServiceProvider"
+            ]
+        }
+    }
+}

src/ServiceProvider.php

@@ -0,0 +1,64 @@
+<?php
+
+namespace Rossjcooper\LaravelDuskVisualAssert;
+
+use Imagick;
+use Laravel\Dusk\Browser;
+use PHPUnit\Framework\Assert;
+
+class ServiceProvider extends \Illuminate\Support\ServiceProvider
+{
+    public function boot()
+    {
+        Browser::macro('assertScreenshot', function (string $name, float $threshold = 0.0001, int $metric = Imagick::METRIC_MEANSQUAREERROR) {
+            /** @var Browser $this */
+
+            $filePath = sprintf('%s/%s.png', rtrim(Browser::$storeScreenshotsAt, '/'), $name);
+
+            $diffName = sprintf('%s-diff', $name);
+            $diffFilePath = sprintf('%s/diffs/%s.png', rtrim(Browser::$storeScreenshotsAt, '/'), $diffName);
+
+            $directoryPath = dirname($filePath);
+
+            if (! is_dir($directoryPath)) {
+                mkdir($directoryPath, 0777, true);
+            }
+
+            if (! file_exists($filePath)) {
+                $this->driver->takeScreenshot($filePath);
+            }
+
+            $this->driver->takeScreenshot($diffFilePath);
+
+            $originalImage =  new Imagick($filePath);
+            $diffImage =  new Imagick($diffFilePath);
+
+            $result = $originalImage->compareImages($diffImage, $metric);
+
+            if ($result[1] > $threshold) {
+                $result[0]->setImageFormat("png");
+                $result[0]->writeImage($diffFilePath);
+            } else {
+                unlink($diffFilePath);
+            }
+
+            Assert::assertLessThanOrEqual($threshold, $result[1], sprintf('Screenshots are not the same. Difference can be viewed at: %s', $diffFilePath));
+
+            return $this;
+        });
+
+        Browser::macro('assertResponsiveScreenshots', function (string $name, float $threshold = 0.0001, int $metric = Imagick::METRIC_MEANSQUAREERROR) {
+            if (substr($name, -1) !== '/') {
+                $name .= '-';
+            }
+
+            foreach (Browser::$responsiveScreenSizes as $device => $size) {
+                $this->resize($size['width'], $size['height'])
+                    ->assertScreenshot("$name$device");
+            }
+
+            return $this;
+        });
+    }
+
+}