Skip to content

Commit 7abf4dc

Browse files
ToriLindsaykathayl
andauthored
[Browser Rendering] Take a screenshot of a specific element using selector (#23208)
* [Browser Rendering] Add how to take a screenshot of a specific element using selector * Update screenshot-endpoint.mdx -changed examples from ## to ### -changed header --------- Co-authored-by: Kathy <[email protected]>
1 parent 2302a4b commit 7abf4dc

File tree

1 file changed

+18
-1
lines changed

1 file changed

+18
-1
lines changed

src/content/docs/browser-rendering/rest-api/screenshot-endpoint.mdx

Lines changed: 18 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -79,7 +79,7 @@ curl -X POST 'https://api.cloudflare.com/client/v4/accounts/<accountId>/browser-
7979
--output "advanced-screenshot.png"
8080
```
8181

82-
## Customize CSS and embed custom JavaScript
82+
### Customize CSS and embed custom JavaScript
8383

8484
Instruct the browser to go to `https://example.com`, embed custom JavaScript (`addScriptTag`) and add extra styles (`addStyleTag`), both inline (`addStyleTag.content`) and by loading an external stylesheet (`addStyleTag.url`).
8585

@@ -103,5 +103,22 @@ curl -X POST 'https://api.cloudflare.com/client/v4/accounts/<accountId>/browser-
103103
}' \
104104
--output "screenshot.png"
105105
```
106+
### Capture a specific element using the selector option
107+
To capture a screenshot of a specific element on a webpage, use the `selector` option with a valid CSS selector. You can also configure the `viewport` to control the page dimensions during rendering.
108+
109+
```bash
110+
curl -X POST 'https://api.cloudflare.com/client/v4/accounts/<accountId>/browser-rendering/screenshot' \
111+
-H 'Authorization: Bearer <apiToken>' \
112+
-H 'Content-Type: application/json' \
113+
-d '{
114+
"url": "https://example.com",
115+
"selector": "#example_element_name",
116+
"viewport": {
117+
"width": 1200,
118+
"height": 1600
119+
}
120+
}' \
121+
--output "screenshot.png"
122+
```
106123

107124
Many more options exist, like setting HTTP credentials using `authenticate`, setting `cookies`, and using `gotoOptions` to control page load behaviour - check the endpoint [reference](/api/resources/browser_rendering/subresources/screenshot/methods/create/) for all available parameters.

0 commit comments

Comments
 (0)