Loki

Loki

  • Getting Started
  • Configuration
  • Command Line Arguments

›API Reference

Introduction

  • Getting started

API Reference

  • Configuration
  • Command line arguments

Guides

  • Continuous Integration
  • Serverless renderer
  • Handling Flaky Tests

Configuration

The init command will add a loki section to your package.json, but you can edit it to your wishes. NOTE: Any command line argument that loki test accepts can also be added to the loki config object.

Example package.json:

{
  "name": "my-project",
  "version": "1.0.0",
  "loki": {
    "chromeSelector": "#my-decorator > *",
    "configurations": {
      "chrome.laptop": {
        "target": "chrome.app",
        "width": 1366,
        "height": 768
      },
      "chrome.iphone7": {
        "target": "chrome.docker",
        "preset": "iPhone 7"
      },
      "chrome.a4": {
        "target": "chrome.aws-lambda",
        "preset": "A4 Paper"
      },
      "ios": {
        "target": "ios.simulator"
      },
      "android": {
        "target": "android.emulator"
      }
    }
  }
}

You may also use a file named .lokirc, .lokirc.json or loki.config.js (see the react example) if you don't want to pollute your package.json.

chromeSelector

This setting is a CSS selector to the part of the page you want screenshots of. This is useful if you have decorators that's not really part of the component itself. Note that it doesn't screenshot the DOM element itself but rather the crops the screenshot to those dimensions, so if you have any elements absolutely positioned above they will be included.

diffingEngine

There are three currently available options to choose from when comparing images in loki. These are configurable by passing in a JSON block to them with their name in the configuration. This block will be passed through to the library and you can use their specific reference documentation. Example package.json:

{
  "loki": {
    "looks-same": {
      "ignoreCaret": true
    }
  }
}

pixelmatch

The default engine and is JavaScript only. It's more sensitive to changes on large images and is less susceptible to anti alias flakiness.

gm

Uses the GraphicsMagick library to create diffs, this is generally faster but requires to have the library installed. You can install it with homebrew using brew install graphicsmagick. chromeTolerance percentage is based on overall image, meaning you'd likely want a low threshold.

The configuration is parsed to the options argument in gm.compare

looks-same

A JavaScript only solution that will work out of the box on every machine, however it is slower and will produce a different diff image. chromeTolerance percentage is based on neighboring pixels which makes it ideal when you have different pixel densities.

pixelmatchgmlooks-same
DependencyNoneGraphicsMagickNone
Speed🏃Fast🏃Faster🚶Slower
Output

verboseRenderer

Plain text output, useful for debugging CI.

skipStories DEPRECATED

This setting is a regular expression matched against the concatenated kind and story name (${kind} ${story}), case insensitive. It's useful if some story breaks the tests or contains animations as an alternative to comment it out.

This setting is deprecated, use storiesOf().add.skip() instead on the stories you want to skip.

storiesFilter

Opposite to skipStories.

fetchFailIgnore

The default behaviour of Loki is to fail a test if the story makes a network requests that fails. This setting is a regular expression, if the URL of a failed request matches it, the test will not fail, overriding the default behaviour.

fileNameFormatter

By default loki will produce a flat file structure, but if you want to have hiearchy or make all names lower case you can pass a custom formatter function. It should return a string without an extension and takes an object with these properties: configurationName, kind, story.

Since JSON doesn't support functions, you need to be using the loki.config.js to configure your project, like so:

module.exports = {
  // ...other config goes here
  fileNameFormatter: ({ configurationName, kind, story, parameters }) =>
    `${configurationName}/${kind} ${story}`.toLowerCase(),
};

configurations

NameTypeDescriptionTargets
targetstringTarget platform, possible values are chrome.app, chrome.docker, chrome.aws-lambda, ios.simulator, android.emulator.All
skipStoriesstringDEPRECATED Same as loki.skipStories, but applied to only this configuration.All
storiesFilterstringSame as loki.storiesFilter, but applied to only this configuration.All
chromeSelectorstringSame as loki.chromeSelector, but applied to only this configuration.chrome.*
presetstringPredefined bundled configuration, possible values are Retina Macbook Pro 15, Retina Macbook Pro 15 Dark Mode, iPhone 7, iPhone 7 Dark Mode, iPhone 5, iPhone 5 Dark Mode, Google Pixel, Google Pixel Dark Mode, A4 Paper, and US Letter Paper.chrome.*
userAgentstringCustom user agent.chrome.*
widthintegerBrowser viewport width.chrome.*
heightintegerBrowser viewport height.chrome.*
disableAutomaticViewportHeightbooleanIf the content goes below the viewport do not increase the height so that it fits.chrome.*
deviceScaleFactorintegerBrowser pixel density multiple, use 2 for retina, not supported in docker.chrome.app
mobilebooleanWhether to emulate mobile device. This includes viewport meta tag, overlay scrollbars, text autosizing and more.chrome.*
mediastringEmulates the given media for CSS media queries.None
featuresarrayEmulates the given features for CSS media queries. See setEmulatedMedia docschrome.*
diffOnlybooleanChanges the mode of loki approve if set to true, only the images which failed loki test beforehand will be updated. This configuration can be overwritten on demand using the cli flag --diffOnly.All
Last updated on 8/27/2024
← Getting startedCommand line arguments →
  • chromeSelector
  • diffingEngine
    • pixelmatch
    • gm
    • looks-same
  • verboseRenderer
  • skipStories DEPRECATED
  • storiesFilter
  • fetchFailIgnore
  • fileNameFormatter
  • configurations
Loki
Docs
Getting StartedAPI ReferenceGuides
Community
User Showcase
More
GitHubStar
Follow @trastknast
Copyright © 2024 Joel Arvidsson