PHPackages                             stechstudio/laravel-visual-testing - 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. [Testing & Quality](/categories/testing)
4. /
5. stechstudio/laravel-visual-testing

ActiveLibrary[Testing & Quality](/categories/testing)

stechstudio/laravel-visual-testing
==================================

Visual UI testing for Laravel Dusk using percy.io

2.1(4y ago)3365.4k9[1 issues](https://github.com/stechstudio/laravel-visual-testing/issues)MITPHPCI failing

Since Jan 25Pushed 4y ago4 watchersCompare

[ Source](https://github.com/stechstudio/laravel-visual-testing)[ Packagist](https://packagist.org/packages/stechstudio/laravel-visual-testing)[ RSS](/packages/stechstudio-laravel-visual-testing/feed)WikiDiscussions master Synced 4d ago

READMEChangelogDependencies (3)Versions (20)Used By (0)

Visual UI screenshot testing for Laravel Dusk
=============================================

[](#visual-ui-screenshot-testing-for-laravel-dusk)

[![Latest Version on Packagist](https://camo.githubusercontent.com/f46213b83b2a12b854425f3e9560e1be6d40637e061babd2a2591f1f7e6846fd/68747470733a2f2f696d672e736869656c64732e696f2f7061636b61676973742f762f737465636873747564696f2f6c61726176656c2d76697375616c2d74657374696e672e7376673f7374796c653d666c61742d737175617265)](https://packagist.org/packages/stechstudio/laravel-visual-testing)[![Software License](https://camo.githubusercontent.com/55c0218c8f8009f06ad4ddae837ddd05301481fcf0dff8e0ed9dadda8780713e/68747470733a2f2f696d672e736869656c64732e696f2f62616467652f6c6963656e73652d4d49542d627269676874677265656e2e7376673f7374796c653d666c61742d737175617265)](LICENSE.md)[![Build Status](https://camo.githubusercontent.com/580ba9a8397b9b52b432dc8cba0795a8f02f1a222c39cc6ee55c04f06e962b9e/68747470733a2f2f6170702e6368697070657263692e636f6d2f70726f6a656374732f35636339356533632d363238662d343863362d383135632d3166313636323163393531342f7374617475732f6d6173746572)](https://camo.githubusercontent.com/580ba9a8397b9b52b432dc8cba0795a8f02f1a222c39cc6ee55c04f06e962b9e/68747470733a2f2f6170702e6368697070657263692e636f6d2f70726f6a656374732f35636339356533632d363238662d343863362d383135632d3166313636323163393531342f7374617475732f6d6173746572)

This package extends Dusk with the ability to do visual diffs with the [Percy visual testing](https://percy.io/) platform.

### Why write visual tests?

[](#why-write-visual-tests)

If you are new to the idea of visual testing we recommend reading through [Visual testing and visual diffs](https://blog.percy.io/product-spotlight-series-visual-testing-and-visual-diffs-6a1fc540fc93) on the Percy blog.

> Sometimes called visual regression testing or UI testing, visual testing is the process of automatically discovering and reviewing software for perceptual changes.
>
> **Visual testing is all about what your users actually see and interact with.**

This form of testing is very useful in cases where you want to guard against unexpected changed to your UI. Visual testing is not meant to replace your Laravel unit/feature/browser tests, but rather provide another tool in your testing toolbox.

Getting started
---------------

[](#getting-started)

This package integrates with [Laravel Dusk](https://laravel.com/docs/master/dusk). If you haven't already, first go through the Dusk [installation steps](https://laravel.com/docs/master/dusk#installation) and make sure you can run the example test with `php artisan dusk`.

Next:

1. Sign up for a free account at [percy.io](https://percy.io) and create your first project. Put your `PERCY_TOKEN` in your Laravel .env file (or [specific dusk environment files](https://laravel.com/docs/5.7/dusk#environment-handling) if you are using those).

    ```
    PERCY_TOKEN=aaabbbcccdddeeefff

    ```
2. Install the [`@percy/agent`](https://www.npmjs.com/package/@percy/agent) NPM package.

    ```
    npm install --save-dev @percy/agent

    ```
3. Install this composer package.

    ```
    composer require stechstudio/laravel-visual-testing --dev

    ```

How to use
----------

[](#how-to-use)

To take a snapshot call `snapshot()` on the browser instance in any of your Dusk tests.

```
$browser->visit('/auth/login')
        ->snapshot();
```

Then run your test suite like your normally would.

```
php artisan dusk

```

### Naming your snapshots

[](#naming-your-snapshots)

By default the name of your snapshot will be the relative URL of the page (e.g. `/auth/login`). You can also pass in your own name when taking the snapshot.

```
$browser->visit('/auth/login')
        ->snapshot('Login page');
```

### Snapshot options

[](#snapshot-options)

You can pass in an array of options when taking a snapshot:

- `widths`: An array of integers representing the browser widths at which you want to take snapshots.
- `minHeight`: An integer specifying the minimum height of the resulting snapshot, in pixels. Defaults to 1024px.

```
$browser->visit('/auth/login')
        ->snapshot('Login page', [ 'widths' => [768, 992, 1200] ]);
```

### Disabling snapshots

[](#disabling-snapshots)

If you want to run your tests without snapshots, use the `--without-percy` command line option.

### Selecting base build branch

[](#selecting-base-build-branch)

Percy uses a variety of strategies to determine the optimal base build for comparison. For details see [Base build selection](https://docs.percy.io/docs/baseline-picking-logic).

If you want to override and specify your own base you have two options:

- `--percy-target-branch` : Specify base by branch name
- `--percy-target-commit` : Specify by target commit SHA (only works if there is a finished Percy build for that commit)

Basic example
-------------

[](#basic-example)

Open the example test at `tests/Browser/ExampleTest.php`. Add a call to `snapshot()` right after the `visit`, and pass in a name for your snapshot.

```
public function testBasicExample()
{
    $this->browse(function (Browser $browser) {
        $browser->visit('/')
            ->snapshot('basic-example') // assertSee('Laravel');

    });
}
```

Now go run your test:

```
php artisan dusk

```

If all goes well, you should see output similar to this:

```
$ php artisan dusk
[percy] created build #1
[percy] percy has started.

[percy] snapshot taken: 'basic-example'
.                                                                   1 / 1 (100%)

Time: 2.37 seconds, Memory: 22.00MB

OK (1 test, 1 assertion)
[percy] stopping percy...
[percy] waiting for 1 snapshots to complete...
[percy] done.
[percy] finalized build #1

```

Now go check out your Percy dashboard, and you should see the new build.

[![](docs/first-run.png)](docs/first-run.png)

At this point it won't have anything to compare the snapshot to. But if you go modify the `welcome.blade.php` file and run it again, you'll get a nice visual diff of your change.

[![](docs/second-run.png)](docs/second-run.png)

###  Health Score

39

—

LowBetter than 86% of packages

Maintenance19

Infrequent updates — may be unmaintained

Popularity37

Limited adoption so far

Community18

Small or concentrated contributor base

Maturity69

Established project with proven stability

 Bus Factor1

Top contributor holds 91.1% of commits — single point of failure

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 ~51 days

Recently: every ~149 days

Total

19

Last Release

1743d ago

Major Versions

0.11 → 1.02019-01-29

1.5 → 2.02021-03-31

### Community

Maintainers

![](https://www.gravatar.com/avatar/315be5f111b5501a41b99a0205c9c85915335391168a0ed10316546a1a38bbd8?d=identicon)[jszobody](/maintainers/jszobody)

---

Top Contributors

[![jszobody](https://avatars.githubusercontent.com/u/203749?v=4)](https://github.com/jszobody "jszobody (41 commits)")[![chrysanthos](https://avatars.githubusercontent.com/u/48060191?v=4)](https://github.com/chrysanthos "chrysanthos (1 commits)")[![inventionate](https://avatars.githubusercontent.com/u/872787?v=4)](https://github.com/inventionate "inventionate (1 commits)")[![mattias-sanfridsson](https://avatars.githubusercontent.com/u/34786113?v=4)](https://github.com/mattias-sanfridsson "mattias-sanfridsson (1 commits)")[![mattrabe](https://avatars.githubusercontent.com/u/1786783?v=4)](https://github.com/mattrabe "mattrabe (1 commits)")

---

Tags

laravellaravel-duskpercytestingvisual-diffs

###  Code Quality

TestsPHPUnit

### Embed Badge

![Health badge](/badges/stechstudio-laravel-visual-testing/health.svg)

```
[![Health](https://phpackages.com/badges/stechstudio-laravel-visual-testing/health.svg)](https://phpackages.com/packages/stechstudio-laravel-visual-testing)
```

###  Alternatives

[orchestra/testbench-dusk

Laravel Dusk Testing Helper for Packages Development

105936.1k161](/packages/orchestra-testbench-dusk)[magic-test/magic-test-laravel

Use Magic Test with Laravel

45731.1k](/packages/magic-test-magic-test-laravel)[derekmd/laravel-dusk-firefox

Run Laravel Dusk tests in a Firefox browser

4883.4k1](/packages/derekmd-laravel-dusk-firefox)[protonemedia/laravel-dusk-fakes

Persistent Fakes for Laravel Dusk

2195.1k2](/packages/protonemedia-laravel-dusk-fakes)

PHPackages © 2026

[Directory](/)[Categories](/categories)[Trending](/trending)[Changelog](/changelog)[Analyze](/analyze)