Automatic screenshots of your App for App Store / Play Store

Ionic Framework ionic-v3
1

I couldn’t believe I have to do screenshots manual. So i did some research.
This is the best way i found. And its free! :smiley:

I think the script is self-explaining. The inspiration is from: https://coligo.io/webpage-screenshots-headless-chrome-node/

It works with: https://github.com/GoogleChrome/puppeteer

const puppeteer = require('puppeteer');
const devices = require('puppeteer/DeviceDescriptors');
const sleep = require('util').promisify(setTimeout);
const emulate = false;
const tablet = 7;

const captureScreenshots = async () => {

    let devicesToEmulate = [];
    if (emulate) {
        devicesToEmulate = [
            'iPhone 6 Plus',
            'Nexus 6'
        ];
    } else {
        if (tablet == 7) {
            devicesToEmulate = [
                'Tablet 7'
            ];
        } else {
            devicesToEmulate = [
                'Tablet 10'
            ];
        }
    }


    const browser = await puppeteer.launch();
    const page = await browser.newPage();

    // capture a screenshot of each device we wish to emulate (`devicesToEmulate`)
    for (let device of devicesToEmulate) {
        if (emulate) {
            await page.emulate(devices[device]);
        } else {
            if (tablet == 7) {
                await page.setViewport({ width: 1024, height: 600 , isMobile: true, hasTouch: true});
            } else {
                await page.setViewport({ width: 1280, height: 800 , isMobile: true, hasTouch: true});
            }
        }
        await page.goto('http://localhost:8100/', { waitUntil: 'domcontentloaded' });

        await page.waitForSelector('ion-content').then(async () => {
            await page.screenshot({path: `${device}-Home.png`, fullPage: true});
            await page.click('button.bar-button-menutoggle');
            await sleep(1000);
            await page.screenshot({path: `${device}-Menu.png`, fullPage: true});
            await page.click('button#Editor');
            await sleep(1000);
            await page.screenshot({path: `${device}-Editor.png`, fullPage: true});
            await page.click('button.bar-button-menutoggle');
            await sleep(500);
            await page.click('button#Player');
            await sleep(1000);
            await page.screenshot({path: `${device}-Player.png`, fullPage: true});
            await page.click('button.bar-button-menutoggle');
            await sleep(500);
            await page.click('button#Tutorial');
            await sleep(1000);
            await page.screenshot({path: `${device}-Tutorial.png`, fullPage: true});
            await page.click('button.bar-button-menutoggle');
            await sleep(500);
            await page.click('button#Settings');
            await sleep(1000);
            await page.screenshot({path: `${device}-Settings.png`, fullPage: true});
        });

    }

    await browser.close()
};


captureScreenshots();

Have fun!

3 Likes
2

I don’t find the screenshots to be too much of a pain, personally. You just have to open up the emulator and take 5-10 screenshots on 4 devices (android phone/android tablet/iPhone/iPad).

It only takes me 20 minutes to screenshot everything and you don’t need to change marketing images unless your UI drastically changes or you want to advertise a specific new feature.