Viewport tests

Lost Pixel supports testing different viewports. You can use the breakpoints option in the config. Page/story level breakpoints will override the top-level breakpoints.

Breakpoint tests are supported in both OSS and Platform versions of Lost Pixel

lostpixel.config.ts

import { CustomProjectConfig } from 'lost-pixel';

export const config: CustomProjectConfig = {
    pageShots: {
        pages: [
            { path: '/', name: 'landing' },
            {
                path: '/blog',
                name: 'blog',
                breakpoints: [800, 1400],
            },
        ],
        baseUrl: 'http://172.17.0.1:3000',
        breakpoints: [640, 1024],
    },
    waitBeforeScreenshot: 3500,
    lostPixelProjectId: 'YOUR_PROJECT_ID',
    apiKey: process.env.LOST_PIXEL_API_KEY,
};