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.

.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;
    }
}

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);
}

// 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');

// 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');
}