---
title: "How to include target elements in screenshots in a Playwright step"
slug: "how-to-include-target-elements-in-screenshots-in-a-playwright-step"
updated: 2026-01-08T06:00:12Z
published: 2026-01-08T06:00:12Z
canonical: "helpcenter.autify.com/how-to-include-target-elements-in-screenshots-in-a-playwright-step"
---

> ## Documentation Index
> Fetch the complete documentation index at: https://helpcenter.autify.com/llms.txt
> Use this file to discover all available pages before exploring further.

# How to include target elements in screenshots in a Playwright step

When running a Playwright code step, if the target element is off-screen (requires scrolling), it may not be included in the Test results screenshot.

You can resolve this issue by explicitly scrolling until the target element enters the viewport.

## Sample code

Below is sample code that scrolls until the target element enters the viewport before verifying the element's text. Please replace placeholders such as "foo", "target", and the provided code content with values suitable for your specific use case.

```javascript
// 1. Identify the element first
const target = page.getByRole("heading", {
  name: "foo"
});
                    
// 2. Scroll until the target element enters the viewport
await target.scrollIntoViewIfNeeded();

// 3. Verify the element's text
await expect(target).toContainText("foo", {
  useInnerText: true
});
```

## Code explanation

1. **Identify the element**: Define the element you want to operate on or verify using methods such as `getByRole`.
2. **Execute scrolling**: By calling `scrollIntoViewIfNeeded()`, Playwright automatically scrolls to that location only if the element is not currently visible.
3. **Verification**: Perform the verification while the element is within the screen.