For designers and design-system teams

Capture the hover state, the focus ring and the dark theme

Hold a button in its hover or focus state, render the page in dark mode, and capture exactly that.

Get your free API key Try the playground

The problem

A design review asks what the primary button looks like on hover, whether the focus ring is visible on the dark theme, and whether the new card survives both. Answering means a person in a browser with the developer tools open, one state at a time.

How domscout handles it

forceState holds an element in its hover or focus state while the screenshot is taken, and metadata.forceState reports whether it was applied, so an image identical to the resting one can be told apart from a selector that matched nothing. render.colorScheme switches the page's prefers-color-scheme to dark or light, and captureSelector crops the picture to the component under review.

Where it shows up

A gallery of every button's hover and focus state for a design-system site.
A check that focus rings stay visible in both themes.
Dark-mode screenshots for documentation and marketing pages.

The request

POST /screenshot. forceState works on every plan; render, for dark mode, starts at Pro. Either way the capture costs 1 credit. The image is in screenshotBase64 and the outcome of each forced state in metadata.forceState.

cURL

curl -X POST https://api.domscout.io/screenshot \
  -H "x-api-key: YOUR_API_KEY" \
  -H "Content-Type: application/json" \
  -d '{
    "url": "https://www.example.com/",
    "forceState": [{"selector": "header a.button-primary", "state": "focus"}],
    "captureSelector": "header",
    "render": {"colorScheme": "dark"},
    "responseType": "json"
  }'

Node.js

const response = await fetch("https://api.domscout.io/screenshot", {
  method: "POST",
  headers: { "Content-Type": "application/json", "x-api-key": "YOUR_API_KEY" },
  body: JSON.stringify({
    url: "https://www.example.com/",
    forceState: [{ selector: "header a.button-primary", state: "focus" }],
    captureSelector: "header",
    render: { colorScheme: "dark" },
    responseType: "json"
  }),
});
const result = await response.json();
console.log(result.metadata);

Python

import requests

response = requests.post(
    "https://api.domscout.io/screenshot",
    headers={"x-api-key": "YOUR_API_KEY"},
    json={
        "url": "https://www.example.com/",
        "forceState": [{"selector": "header a.button-primary", "state": "focus"}],
        "captureSelector": "header",
        "render": {"colorScheme": "dark"},
        "responseType": "json"
    },
)
print(response.json()["metadata"])

package main

import (
	"bytes"
	"encoding/json"
	"fmt"
	"net/http"
)

func main() {
	body, _ := json.Marshal(map[string]any{
		"url": "https://www.example.com/",
		"forceState": []any{
			map[string]any{
				"selector": "header a.button-primary",
				"state": "focus",
			},
		},
		"captureSelector": "header",
		"render": map[string]any{"colorScheme": "dark"},
		"responseType": "json",
	})
	req, _ := http.NewRequest("POST", "https://api.domscout.io/screenshot", bytes.NewReader(body))
	req.Header.Set("Content-Type", "application/json")
	req.Header.Set("x-api-key", "YOUR_API_KEY")

	res, err := http.DefaultClient.Do(req)
	if err != nil {
		panic(err)
	}
	defer res.Body.Close()

	var result map[string]any
	json.NewDecoder(res.Body).Decode(&result)
	fmt.Println(result["metadata"])
}

PHP

<?php
$ch = curl_init('https://api.domscout.io/screenshot');
curl_setopt_array($ch, [
    CURLOPT_POST => true,
    CURLOPT_RETURNTRANSFER => true,
    CURLOPT_HTTPHEADER => ['Content-Type: application/json', 'x-api-key: YOUR_API_KEY'],
    CURLOPT_POSTFIELDS => json_encode([
        'url' => 'https://www.example.com/',
        'forceState' => [['selector' => 'header a.button-primary', 'state' => 'focus']],
        'captureSelector' => 'header',
        'render' => ['colorScheme' => 'dark'],
        'responseType' => 'json'
    ]),
]);
$response = curl_exec($ch);
if ($response === false) {
    throw new RuntimeException(curl_error($ch));
}
$result = json_decode($response, true);
print_r($result['metadata']);

Ruby

require "json"
require "net/http"

response = Net::HTTP.post(
  URI("https://api.domscout.io/screenshot"),
  {
    url: "https://www.example.com/",
    forceState: [{ selector: "header a.button-primary", state: "focus" }],
    captureSelector: "header",
    render: { colorScheme: "dark" },
    responseType: "json"
  }.to_json,
  "Content-Type" => "application/json",
  "x-api-key" => "YOUR_API_KEY"
)
puts JSON.parse(response.body)["metadata"]

Java

import java.net.URI;
import java.net.http.HttpClient;
import java.net.http.HttpRequest;
import java.net.http.HttpResponse;

public class Capture {
    public static void main(String[] args) throws Exception {
        String body = """
            {
                "url": "https://www.example.com/",
                "forceState": [
                    {
                        "selector": "header a.button-primary",
                        "state": "focus"
                    }
                ],
                "captureSelector": "header",
                "render": {"colorScheme": "dark"},
                "responseType": "json"
            }
            """;
        HttpRequest request = HttpRequest.newBuilder(URI.create("https://api.domscout.io/screenshot"))
            .header("Content-Type", "application/json")
            .header("x-api-key", "YOUR_API_KEY")
            .POST(HttpRequest.BodyPublishers.ofString(body))
            .build();
        HttpResponse<String> response = HttpClient.newHttpClient().send(request, HttpResponse.BodyHandlers.ofString());
        System.out.println(response.body());
    }
}

using System.Net.Http.Json;
using System.Text.Json;

using var client = new HttpClient();
client.DefaultRequestHeaders.Add("x-api-key", "YOUR_API_KEY");

var response = await client.PostAsJsonAsync("https://api.domscout.io/screenshot", new {
    url = "https://www.example.com/",
    forceState = new[] {
        new { selector = "header a.button-primary", state = "focus" }
    },
    captureSelector = "header",
    render = new { colorScheme = "dark" },
    responseType = "json"
});
var result = await response.Content.ReadFromJsonAsync<JsonElement>();
Console.WriteLine(result.GetProperty("metadata"));

Go further

Visual regression testing

Unlabelled control checks

Rendering controls

More in Testing and QA: Responsive layout checks · Visual regression testing · JavaScript error checks · Signup and checkout flow checks · Localization screenshots · Unlabelled control checks · A screenshot of every step · Embedded widget checks · Screenshots for support tickets · Ad landing page checks · Before and after hydration · Selectors for test automation · Print layout checks · All use cases

Give your product a browser.

Get clean web content and visual proof into your workflow in minutes.

Get your free API key Read the docs