Screenshot Multiple URLs with Loki & When to Use Playwright

This guide shows you how to capture screenshots of multiple URLs using Loki, a lightweight screenshot comparison tool, and explains when to switch to Playwright for more advanced capture needs. You’ll learn the exact commands, configuration steps, and practical tips to automate bulk screenshots efficiently.

What You’ll Need

Node.js (v14 or later) installed on your machine.
Docker (for running Loki’s Chrome container).
A basic terminal/command line interface.
Access to the URLs you want to capture (public or internal with proper network access).

Step-by-Step

Install Loki globally (optional but convenient): Run npm install -g loki in your terminal. This gives you the loki command anywhere.
Initialize Loki in your project: Navigate to your project folder and run npx loki init. This creates a loki configuration folder with a default loki.config.js file.

Configure Chrome as the browser: Open loki.config.js and set chromeSelector to a valid selector (e.g., '.storybook-loki'). For plain URLs, you’ll use the chromeDocker option. Add this to your config:

module.exports = {
  chromeSelector: '.storybook-loki',
  chromeDocker: {
    image: 'yukinying/chrome-headless-browser-stable:latest',
    },
  configurations: {
    'chrome.laptop': {
      target: 'chrome.docker',
      width: 1366,
      height: 768,
    },
  },
};

Create a URL list: Loki works with Storybook by default, but you can capture arbitrary URLs using the loki --url option. Create a text file (e.g., urls.txt) with one URL per line:
```
https://example.com
https://example.com/about
https://example.com/contact
```
Run Loki with the URL file: Use the command:
```
npx loki --url file:./urls.txt --config ./loki.config.js
```
This will start a Docker container with Chrome, navigate to each URL, and take a screenshot. Screenshots are saved in .loki/current/ by default.
Specify a viewport: To capture at a specific resolution, add --viewport 1366x768 (or your desired width/height). For example: npx loki --url file:./urls.txt --viewport 1366x768.
Capture full-page screenshots: Loki captures only the visible viewport by default. To get full-page screenshots, you need to use Playwright instead (see below). Loki does not support full-page capture natively.
Review the output: After running, check the .loki/current/ folder for your screenshots. They are named based on the URL path (e.g., example.com_about.png).

Common Mistakes

Forgetting to start Docker: Loki’s Chrome runs in Docker. If Docker is not running, you’ll get a connection error. Ensure Docker Desktop or the Docker daemon is active.
Using the wrong URL format: The --url option expects a file path prefixed with file:. If you pass a plain path, Loki may not read it correctly.
Not configuring the Chrome selector: If you’re not using Storybook, you must set chromeSelector to a valid selector (even a dummy one) or Loki may fail to launch Chrome.
Assuming full-page capture: Loki only captures the viewport. If you need full-page, switch to Playwright.

Tips

Use a configuration file for repeatability: Instead of long CLI commands, define your URL list and viewport in the config file. This makes it easy to re-run and share.
Add delays for dynamic content: If your pages load content asynchronously, use the --delay option (in milliseconds) to wait before capturing. For example: --delay 2000.
Organize screenshots by project: Use separate .loki folders for different projects to avoid overwriting.
Use Playwright for complex scenarios: If you need to interact with the page (click buttons, scroll, fill forms) before capturing, Playwright is the right tool.

Troubleshooting

Error: “Cannot connect to the Docker daemon” – Start Docker Desktop or the Docker service, then retry.
Error: “Chrome failed to launch” – Make sure you have set chromeSelector and that the Docker image is pulled correctly. Try running docker pull yukinying/chrome-headless-browser-stable:latest manually.
Screenshots are blank or missing content – Increase the delay with --delay 3000 to allow the page to fully render. Also check if the URL is accessible from the Docker container (e.g., localhost URLs won’t work from inside Docker; use host.docker.internal for local dev).
Loki is not recognized as a command – If you installed locally, use npx loki instead of loki. If you installed globally, ensure your npm global bin is in your PATH.

Frequently Asked Questions

Can Loki capture full-page screenshots?

No, Loki only captures the visible viewport. For full-page captures, use Playwright’s fullPage: true option.

Do I need Docker to use Loki?

Yes, Loki uses a Docker container to run Chrome headlessly. This is required for the default setup.

Can I capture screenshots of multiple URLs at once?

Yes, by providing a file with a list of URLs, Loki will iterate through them and capture each one.

How do I change the output directory?

You can set the outputDir in the config file to a custom path, e.g., outputDir: 'screenshots'.

When should I use Playwright instead of Loki?

Use Playwright when you need full-page screenshots, need to interact with the page (click, scroll, type), or need to capture after dynamic content loads. Loki is better for visual regression testing of static views.

Can I use Loki with a local development server?

Yes, but remember that Docker containers cannot access localhost directly. Use http://host.docker.internal:PORT instead of http://localhost:PORT.

Method: the standard formula for this calculation, rounded as each result states. See how the calculators work or report an error.

More cards in this drawer

The whole Numbers and Powers drawer →