Capture Specific Elements with Scrnify's New CSS Selector Support

Hey there! Laura and Heidi here from SCRNIFY!

We just shipped a feature that's been on our wishlist for a while: CSS selector support. You can now capture screenshots of specific elements on a page instead of the entire viewport. No more manual cropping or post-processing.

Get free access to the SCRNIFY API during our open beta!

Why Element Screenshots?

Full-page captures work great for many use cases. But sometimes you only need a button, a card component, a navigation bar, or a pricing table. Before this update, you'd capture the whole page and crop it yourself.

With the new selector parameter, you tell Scrnify exactly which element to capture. The API waits for that element to appear, then returns a screenshot of just that element's bounding box.

How It Works

Add the selector parameter to your API request with any valid CSS selector:

const params = new URLSearchParams({
    key: 'YOUR_API_KEY',
    url: 'https://example.com',
    type: 'image',
    format: 'png',
    width: '1920',
    height: '1080',
    selector: '.pricing-card', // Captures only this element
})

const response = await fetch(`https://api.scrnify.com/capture?${params.toString()}`)

The selector works with:

• Class selectors: .header, .btn-primary
• ID selectors: #main-content, #signup-form
• Element selectors: nav, footer
• Attribute selectors: [data-testid="hero-section"]
• Complex selectors: .container > .card:first-child

Complete Example

Here's a full Node.js example that captures a specific element and saves it:

const fs = require('fs')

const API_KEY = 'YOUR_API_KEY'
const baseUrl = 'https://api.scrnify.com/capture'

async function captureElement(url, selector, outputFile) {
    const params = new URLSearchParams({
        key: API_KEY,
        url: url,
        type: 'image',
        format: 'png',
        width: '1920',
        height: '1080',
        selector: selector,
        waitUntil: 'networkIdle', // Wait for dynamic content
    })

    const response = await fetch(`${baseUrl}?${params.toString()}`)

    if (!response.ok) {
        throw new Error(`API error: ${response.status}`)
    }

    const buffer = Buffer.from(await response.arrayBuffer())
    fs.writeFileSync(outputFile, buffer)
    console.log(`Saved element screenshot to ${outputFile}`)
}

// Capture a pricing card
captureElement('https://yoursite.com/pricing', '.pricing-card.featured', 'featured-pricing.png')

Combining with waitUntil

For pages with dynamic content, pair the selector with waitUntil: 'networkIdle'. The API will:

1. Navigate to the page
2. Wait for the specified load event
3. Wait for your selector to be visible
4. Capture that element

This sequence handles SPAs and AJAX-loaded content reliably.

const params = new URLSearchParams({
    key: API_KEY,
    url: 'https://dashboard.example.com',
    type: 'image',
    format: 'png',
    width: '1920',
    height: '1080',
    selector: '[data-widget="revenue-chart"]',
    waitUntil: 'networkIdle',
})

Use Cases

Component documentation: Capture individual UI components for design systems or style guides.

Visual regression testing: Screenshot specific elements to detect changes in isolated components.

Marketing assets: Grab product cards, testimonials, or feature sections for promotional materials.

Bug reports: Capture the exact element where an issue appears.

Error Handling

If the selector doesn't match any element on the page, the API returns an error. Handle this in your code:

async function captureElementSafely(url, selector, outputFile) {
    try {
        const params = new URLSearchParams({
            key: API_KEY,
            url: url,
            type: 'image',
            format: 'png',
            width: '1920',
            height: '1080',
            selector: selector,
        })

        const response = await fetch(`${baseUrl}?${params.toString()}`)

        if (!response.ok) {
            const text = await response.text()
            console.error(`Failed to capture element: ${text}`)
            return false
        }

        const buffer = Buffer.from(await response.arrayBuffer())
        fs.writeFileSync(outputFile, buffer)
        return true
    } catch (error) {
        console.error(`Error: ${error.message}`)
        return false
    }
}

API Reference

Parameter	Value	Description
selector	CSS selector string	The element to capture (e.g., .header, #main, [data-id="123"])

When selector is provided, the output image dimensions match the element's rendered size on the page. The width and height parameters still control the viewport size, which affects how the page renders.

---

Get free access to the SCRNIFY API during our open beta and start capturing element screenshots today! scrnify.com

We'd love to see what you build with selector support. Drop us a line at support@scrnify.com or find us on Twitter @scrnify.

Cheers, Laura & Heidi

P.S. This was one of the most requested features from our comparison with ScreenshotOne. Feels good to check that box.