freeze

Install

npm i -D @notiz/freeze

Initialize your freeze config

npx freeze init

A simple freeze.config.ts is generated for you.

import { mobileDevices } from '@notiz/freeze/devices';
import { defineConfig } from '@notiz/freeze/config';

export default defineConfig({
  baseUrl: 'http://localhost:4200',
  output: 'generated/screenshots',
  devices: mobileDevices,
  screens: [{ name: 'landing', url: '' }],
});

Read more about the freeze config file.

Screenshots

npx freeze run

Freeze Config File

• baseUrl - taking screenshots of your web application e.g your local development server at localhost:4200 or your project website.
• output - directory saving your screenshots
• devices - a set of devices you want to generate screenshots
• screens - a set of screens you want to navigate to before taking a screenshot
  • name - name of the screen used as the filename
  • url - navigate to the url before taking the screenshot e.g /portfolio
  • pageActions - perform specific actions per page before taking a screenshot, has access to the puppeteer Page

  pageActions: async (page: Page) => {
      await page.click('accept-cookie');
    },

  • screenshotTypes- supports png, jpeg and webp as single value or as array