Marketing as Code: Laravel Screenshot Automation

Published on by

Marketing as Code: Laravel Screenshot Automation image

Your team has been working on your new project for months (with Laravel of course) and you are ready to launch the nice product you've built. As you are starting to design your marketing website, you are inevitable faced with the dreaded task of preparing & taking screenshots to showcase all the great features & UX you've built.

Screenshots are the perfect way to communicate your product's capabilities to users (let's face it, nobody is reading long marketing copy anymore). But they can be surprisingly difficult and time consuming to prepare:

  • You have to come up with carefully crafted & great looking sample content
  • Sometimes it's important to remove certain elements, update styles & hide content to make things clearer
  • You might need to resize your browser to a certain size to match your website layout
  • And then you have to take the screenshots, rename files, store them in your repo etc.

And then there's updates. Changing the design of the app's nav bar? Implementing a color refresh? Adding a major feature that impacts many areas of the app? You have to re-do all the screenshots, or accept that your website slowly gets out of sync (and customers missing all the new stuff you've been working on).

For the website of our test management tool Testmo we were looking for a better way to prepare, take & maintain our marketing screenshots. We have many dozens of complex screenshots on our website, and manually taking & updating the screenshots wasn't an option for us. So automation to the rescue!

Screenshot Automation with Laravel Dusk

We are already using Laravel Dusk extensively for Testmo as part of our test automation suites to verify & check functionality via browser automation. So why not also use Dusk to automatically prepare and take our marketing screenshots? As we started experimenting with this idea, the advantages became obvious pretty quickly:

  • Generating great sample content is much easier from code: Especially if you have a complex UI with charts, dashboards etc., it can be very difficult to manually set up your screenshots. From our Laravel Dusk code we can easily use the internal models of the app to prepare and add great looking sample data.

  • Fine-tuning the UI via stylesheets & DOM changes: Often times you need to remove certain elements or resize some details to make your screenshots clearer. Instead of having to use Photoshop after taking a screenshot to improve things, you can now use stylesheets or make small changes to the DOM. This is much easier and more flexible.

  • Adding placeholders & text bars: You want to keep screenshots simple to understand for your website visitors. That's why many marketing websites add placeholders and gray bar overlays to screenshots to hide too detailed text elements. This is again much easier to do from code and saves tons of time in post-processing.

  • Consistent browser & screenshot sizes: If you regularly have to update screenshots, it can be very annoying to try to match the same screenshot sizes again. Setting the browser size from Laravel Dusk is trivial, so you can have consistent screenshot sizes defined in your code.

  • Cropping to elements with dynamic resizing: Alternatively, if you want to take screenshots of certain elements of your UI only, you can also easily crop your screenshots to certain DOM elements (based on their coordinates & size calculated by Dusk). Now if you update your UI in the future (and the size or position of elements change), your screenshots will always perfectly match your new design.

More Examples & Laravel Screenshot Tips

Pretty much any screenshot on our website has been automated with Laravel Dusk now, so we can simply update our screenshots whenever we want with a few keystrokes. For more examples, take a look at our test case management and exploratory testing tour pages, which cover & highlight major features of our product.

We've also published a more detailed article with additional code samples & tips on what we've learned from automating our screenshots:

Automating Software Marketing Screenshots with Code →

This guest posting was written by Dennis Gurock, one of the founders of Testmo. Testmo is built using Laravel and helps teams manage all their software tests in one modern platform. If you are not familiar with QA tools, Testmo recently published various tool guides to get started:

Eric L. Barnes photo

Eric is the creator of Laravel News and has been covering Laravel since 2012.

Filed in:

Laravel Newsletter

Join 40k+ other developers and never miss out on new tips, tutorials, and more.


Version 4 of Tinkerwell is available now. Get the most popular PHP scratchpad with all its new features and simplify your development workflow today.

Visit Tinkerwell

The latest

View all →
Use Ollama LLM Models Locally with Laravel image

Use Ollama LLM Models Locally with Laravel

Read article
TallStackUI - a new component library for TALL Stack apps image

TallStackUI - a new component library for TALL Stack apps

Read article
Laravel 10.34 Released image

Laravel 10.34 Released

Read article
Laravel Tailwind Merge image

Laravel Tailwind Merge

Read article
Generate Validation Rules from a Database Schema in Laravel image

Generate Validation Rules from a Database Schema in Laravel

Read article
A Feature Flags Implementation for Filament image

A Feature Flags Implementation for Filament

Read article
Honeybadger logo


Zero-instrumentation, 360 degree coverage of errors, outages and service degradation.

Laravel Forge logo

Laravel Forge

Easily create and manage your servers and deploy your Laravel applications in seconds.

Laravel Forge
Oh Dear logo

Oh Dear

Oh Dear is the best all-in-one monitoring tool for all your Laravel apps.

Oh Dear
Tinkerwell logo


The must-have code runner for Laravel developers. Tinker with AI, autocompletion and instant feedback on local and production environments.

Kirschbaum logo


Providing innovation and stability to ensure your web application succeeds.

Shift logo


Running an old Laravel version? Instant, automated Laravel upgrades and code modernization to keep your applications fresh.

Bacancy logo


Supercharge your project with a seasoned Laravel developer with 4-6 years of experience for just $2500/month. Get 160 hours of dedicated expertise & a risk-free 15-day trial. Schedule a call now!

LoadForge logo


Easy, affordable load testing and stress tests for websites, APIs and databases.

Paragraph logo


Manage your Laravel app as if it was a CMS – edit any text on any page or in any email without touching Blade or language files.

Lucky Media logo

Lucky Media

Bespoke software solutions built for your business. Partner with Lucky Media, your favorite Laravel Development Agency!

Lucky Media
Lunar: Laravel E-Commerce logo

Lunar: Laravel E-Commerce

E-Commerce for Laravel. An open-source package that brings the power of modern headless e-commerce functionality to Laravel.

Lunar: Laravel E-Commerce