Advertising as Code: Laravel Screenshot Automation

Your workforce has been doing work on your new venture for months (with Laravel of system) and you are completely ready to start the great products you’ve created. As you are starting off to style your marketing web site, you are inevitable faced with the dreaded task of preparing & getting screenshots to showcase all the fantastic characteristics & UX you’ve got crafted.

Screenshots are the great way to connect your product’s capabilities to buyers (let us deal with it, no one is examining very long marketing duplicate any more). But they can be incredibly tricky and time consuming to prepare:

• You have to come up with carefully crafted & terrific seeking sample content
• Sometimes it is really critical to get rid of specific things, update variations & disguise material to make points clearer
• You may possibly need to have to resize your browser to a certain dimension to match your site format
• And then you have to get the screenshots, rename information, retail store them in your repo and so on.

And then there’s updates. Switching the style and design of the app’s nav bar? Utilizing a color refresh? Including a main feature that impacts several locations of the app? You have to re-do all the screenshots, or accept that your web site slowly gets out of sync (and consumers missing all the new stuff you’ve got been doing work on).

For the web site of our exam management software Testmo we were being searching for a better way to get ready, acquire & keep our promoting screenshots. We have lots of dozens of complex screenshots on our internet site, and manually using & updating the screenshots was not an option for us. So automation to the rescue!

Screenshot Automation with Laravel Dusk

We are by now working with Laravel Dusk thoroughly for Testmo as portion of our test automation suites to validate & check out performance by way of browser automation. So why not also use Dusk to mechanically put together and choose our advertising screenshots? As we began experimenting with this notion, the positive aspects grew to become noticeable pretty promptly:

• Producing excellent sample articles is a lot a lot easier from code: In particular if you have a advanced UI with charts, dashboards and so on., it can be quite complicated to manually set up your screenshots. From our Laravel Dusk code we can easily use the inside styles of the application to prepare and incorporate wonderful looking sample data.
• Wonderful-tuning the UI via stylesheets & DOM variations: Generally moments you require to get rid of specified features or resize some information to make your screenshots clearer. Alternatively of obtaining to use Photoshop following using a screenshot to strengthen items, you can now use stylesheets or make small alterations to the DOM. This is a great deal less difficult and additional versatile.
• Adding placeholders & textual content bars: You want to continue to keep screenshots straightforward to realize for your internet site guests. That’s why many marketing internet sites include placeholders and grey bar overlays to screenshots to cover too in-depth textual content factors. This is again a great deal easier to do from code and saves tons of time in post-processing.
• Constant browser & screenshot dimensions: If you regularly have to update screenshots, it can be incredibly frustrating to consider to match the similar screenshot sizes yet again. Setting the browser measurement from Laravel Dusk is trivial, so you can have reliable screenshot sizes outlined in your code.
• Cropping to things with dynamic resizing: Alternatively, if you want to get screenshots of particular factors of your UI only, you can also easily crop your screenshots to specific DOM elements (centered on their coordinates & dimensions calculated by Dusk). Now if you update your UI in the upcoming (and the dimensions or position of components adjust), your screenshots will often properly match your new design and style.

Far more Examples & Laravel Screenshot Strategies

Fairly considerably any screenshot on our internet site has been automated with Laravel Dusk now, so we can basically update our screenshots when we want with a few keystrokes. For more examples, acquire a appear at our exam circumstance administration and exploratory testing tour webpages, which address & spotlight major attributes of our solution.

We’ve also published a extra specific post with more code samples & ideas on what we have uncovered from automating our screenshots:

Automating Program Advertising Screenshots with Code →

This guest publishing was penned by Dennis Gurock, a single of the founders of Testmo. Testmo is crafted making use of Laravel and helps groups handle all their program exams in a person modern system. If you are not common with QA equipment, Testmo not too long ago posted several software guides to get commenced: