screenshotWithAccessibilityLabels()

​

Function Signature

async function screenshotWithAccessibilityLabels(options: {
  page: Page
  interactiveOnly?: boolean
}): Promise<void>

​

Parameters

​

page

​

interactiveOnly

​

Return Value

​

Output

1. Screenshot file saved to ./tmp/playwriter-screenshot-{timestamp}-{random}.jpg
2. Base64 image data automatically included in the response
3. Accessibility snapshot showing all labeled elements with their locators
4. Label count showing how many elements were labeled

Screenshot saved to: ./tmp/playwriter-screenshot-1234567890-abcd.jpg
Labels shown: 42

Accessibility snapshot:
- banner:
  - link "Home" [id="nav-home"]
  - navigation:
    - link "Docs" [data-testid="docs-link"]
    - button "Search" role=button[name="Search"]
- main:
  - heading "Welcome"
  - button "Get Started" [id="cta-btn"]

​

Label Appearance

• Yellow — Links
• Orange — Buttons
• Coral — Text inputs
• Pink — Checkboxes
• Peach — Sliders
• Salmon — Menus
• Amber — Tabs

​

Examples

​

Basic usage

// Take labeled screenshot
await screenshotWithAccessibilityLabels({ page: state.page })

// Use refs from snapshot to interact
await state.page.locator('[id="submit-btn"]').click()

​

Multiple screenshots

// You can take multiple screenshots in one execution
await screenshotWithAccessibilityLabels({ page: state.page })
await state.page.click('button')
await screenshotWithAccessibilityLabels({ page: state.page })
// Both images are included in the response

​

With all elements

// Show labels for all elements (not just interactive)
await screenshotWithAccessibilityLabels({ 
  page: state.page, 
  interactiveOnly: false 
})

​

When to Use

• Page has complex visual layout (grids, galleries, dashboards, maps)
• Spatial position matters (e.g., “first image”, “top-left button”)
• DOM order doesn’t match visual order
• You need to understand the visual hierarchy

• You just need text content → use snapshot({ search: /pattern/ }) instead
• Checking if an element exists → use snapshot() instead
• Reading console logs → use getLatestLogs() instead
• Verifying text appeared → use snapshot() instead

​

Timeout

playwriter -s 1 -e 'await screenshotWithAccessibilityLabels({ page: state.page })' --timeout 20000

​

Combining with snapshot()

1. Use screenshotWithAccessibilityLabels first to understand layout and identify target elements visually
2. Then use snapshot({ search: /pattern/ }) for efficient searching in subsequent calls

// First: visual overview
await screenshotWithAccessibilityLabels({ page: state.page })

// Then: efficient text search
const buttons = await snapshot({ page: state.page, search: /submit|save/i })
console.log(buttons)

​

Using refs from screenshot

// Take screenshot
await screenshotWithAccessibilityLabels({ page: state.page })

// Get selector for ref from screenshot
const locator = refToLocator({ ref: 'e3' })
await state.page.locator(locator).click()

​

Notes

• Labels auto-hide after screenshot is taken
• Labels are repositioned if page layout changes
• Use scale: 'css' for regular screenshots to avoid 2-4x larger images on high-DPI displays
• Screenshot is automatically resized to optimal dimensions for Claude vision (1568px max)
• If sharp is not installed, screenshots are clipped to 1568px instead of resized