Sitemaps and URLs

Pixeleye can crawl your sitemaps & provided URLs to automatically capture screenshots of your website. This is a really quick way to get started with Pixeleye.

Prerequisites

Quick start

Installation

We require the Pixeleye cli tool:

Terminal

npm install pixeleye --save-dev

Terminal

npm install pixeleye --save-dev

Capture your sitemap

Terminal

npm run pixeleye snapshot --sitemaps https://example.com/sitemap.xml

Terminal

npm run pixeleye snapshot --sitemaps https://example.com/sitemap.xml

Capture a list of URLs

Terminal

npm run pixeleye snapshot --urls https://example.com/page1 https://example.com/page2

Terminal

npm run pixeleye snapshot --urls https://example.com/page1 https://example.com/page2

Defining URLs in a configuration file

If you want to have per-page options or a more organized way to define your URLs, you can use a configuration file.

Create a pixeleye.config.{js,ts} file

snaps.pixeleye.ts

import {SnapshotDefinition} from "pixeleye";

const urls: SnapshotDefinition[] = [
  {
    url: "https://example.com/page1",
    // options
  },
  {
    url: "https://example.com/page2",
    // options
  },
  // ...
];

export default urls;

snaps.pixeleye.ts

import {SnapshotDefinition} from "pixeleye";

const urls: SnapshotDefinition[] = [
  {
    url: "https://example.com/page1",
    // options
  },
  {
    url: "https://example.com/page2",
    // options
  },
  // ...
];

export default urls;

There is no requirement to use a specific name. But we recommend using *.pixeleye.ts to make it clear that this file is for Pixeleye.

Adding file to `config.pixeleye.ts`

You can also declare the snapshot files as the main argument in pixeleye snapshot <files> command.

config.pixeleye.ts

import { Config } from "pixeleye";

const config: Config = {
  ...
  snapshotFiles: ["./**/*.pixeleye.ts"],
};

export default config;

config.pixeleye.ts

import { Config } from "pixeleye";

const config: Config = {
  ...
  snapshotFiles: ["./**/*.pixeleye.ts"],
};

export default config;

We accept globs in the snapshotFiles array. This means you can use ./**/*.pixeleye.ts to include all files with the .pixeleye.ts extension.

Dynamic URLs

We support providing a function that returns an array of URLs. This is useful if you have a dynamic list of URLs that you want to capture.

Create a pixeleye.config.{js,ts} file

config.pixeleye.ts

import { Config, ConfigWithoutSnapshotFiles } from "pixeleye";

const config: Config = {
  ...
  snapshotFiles: (config: ConfigWithoutSnapshotFiles) => {
    return [
      {
        url: "https://example.com/page1",
        // options
      },
      {
        url: "https://example.com/page2",
        // options
      },
      // ...
    ];
  },
};

export default config;

config.pixeleye.ts

import { Config, ConfigWithoutSnapshotFiles } from "pixeleye";

const config: Config = {
  ...
  snapshotFiles: (config: ConfigWithoutSnapshotFiles) => {
    return [
      {
        url: "https://example.com/page1",
        // options
      },
      {
        url: "https://example.com/page2",
        // options
      },
      // ...
    ];
  },
};

export default config;

Last modified: 3/10/2024

storybook

Any other platform (CLI)