📖 Parameters

Figma

You can integrate 🎨 Figma with Sherlo to see designs side-by-side with screenshots

Add the design parameter with type "figma":

Button.stories.js

export default {
  component: Button,
  parameters: {
    design: {
      type: "figma",
      url: "https://www.figma.com/file/..." // Your Figma design URL
    },
  },
};

Sherlo Parameters

Each story can have a set of parameters that customize the test setup

Parameter	Type	Default	Description
platform	<Platform.OS>	undefined	Test the story only on a specific platform
exclude	<boolean>	false	Skip the story during testing
disableScrollCapture	<boolean>	false	Disable scroll capture for scrollable stories

Button.stories.js

export default {
  component: Button,
  parameters: {
    sherlo: {
      platform: "android", // Specify the testing platform
      exclude: false // Set to true to exclude the story from testing
    },
  },
};

Platform

Setting platform parameter to either "android" or "ios" tests the story only on that specific platform

Exclude

Setting exclude to true skips the story during testing

tip

Before excluding stories, consider using the isRunningVisualTests to control rendering behavior

Scroll Capture

By default, Sherlo automatically captures the full scrollable content of a story as a single stitched screenshot. Setting disableScrollCapture to true captures only the visible viewport instead.

LongList.stories.js

export default {
  component: LongList,
  parameters: {
    sherlo: {
      disableScrollCapture: true, // Only capture the visible viewport
    },
  },
};

info

Very tall stories are automatically truncated at the maximum scroll capture height