Demonstrate HN: How we automate our (complex) product screenshots

Demonstrate HN: How we automate our (complex) product screenshots

TLDR: Tall marketing and marketing and marketing screenshots are time drinking and don’t age successfully. Right here’s how we increase this with browser automation & code.

Producing immense taking a look screenshots for software program marketing and marketing and marketing web sites could per chance also additionally be surprisingly refined and time drinking. It the least bit times entails preparing the app with pattern records, editing the photographs to conceal irrelevant particulars, cropping to explicit sizes and overriding texts (equivalent to dates or names).

With dozens of screenshots for a odd product web sites plus traditional weblog postings for new characteristic releases, this can amount to a quantity of labor.

And then there is updates. Altering the diagram of the app’s nav bar? Enforcing a shade refresh? Adding a first-rate characteristic that impacts many areas of the app? That you just would be in a position to per chance perchance want to re-attain your entire screenshots, or settle for that your web sites slowly will get out of sync (and customers missing your entire original stuff you’ve been working on).

Designing supreme taking a look screenshots has the least bit times been one in all our least favorite parts of building our marketing and marketing and marketing living. So for our original test management device Testmo we wished to have interaction a have a study one thing utterly different.

Mechanically generating a posh product screenshot of Testmo (video slowed down).

.placeholder {
    subject: relative;
    shade: transparent;

    &:after {
        negate: block;
        teach material: '';
        subject: absolute;
        supreme: 0;
        left: 0;
        high: 50%;
        margin-high: -5px;
        high: 10px;
        background: #e0e1e2;

Adding placeholder bars with a pair of traces of customized kinds.

public draw cropScreenshotToSelector($image, $selector) {
    $ratio = $this->getDevicePixelRatio();
    $subject = $this->getSelectorPosition($selector);
    $image->cleave($subject['width'] $ratio, $subject['height'] $ratio,
        $subject['windowLeft'] $ratio, $subject['windowTop'] $ratio);

Croping an image to a component’s window subject.

// Cowl vertical scrollbar to alter visible list size
$this->setSelectorCss('.part', 'overflow-y', 'hidden');

// Reset background to optimize shade for the web sites
$this->setSelectorCss('.part', 'background', 'none');

// Cowl part irrelevant for the characteristic we are making an strive to specialize in
$this->setSelectorCss('.part', 'negate', 'none');

// Override responsive grid layout to greater match window size
$this->setSelectorCss('.part', 'grid-template-columns', '1fr 1fr 1fr');

Adjusting varied parts to elegant-tune screenshot for web sites.

// From the negate line, power Chrome to make employ of a explicit pixel ratio
$ chrome --power-device-scale-ingredient=2 [..]

// Then detect the pixel ration in your code (from Selenium)
public draw getDevicePixelRatio() {
    return $this->driver->executeScript('return window.devicePixelRatio');

Place in power Chrome’s pixel ratio and detect it from Selenium/JavaScript.

PS: We on a conventional basis publish usual software program attempting out & QA analysis, incuding free guides, experiences and news. To receive our next postings, you can per chance perchance perchance also
to updates. You are going to be in a subject to also observe us on
Twitter and

NOW WITH OVER +8500 USERS. folks can Join Knowasiak at free of charge. Join on
Read More

Charlie Layers

Charlie Layers

Fill your life with experiences so you always have a great story to tell

you're currently offline