• Automated Product …
• Documentation
• Workflow Steps

Workflow Steps

A Workflow is a sequence of browser actions defined in the steps array of a WorkflowJSON. Each step performs a specific action like visiting a page, clicking an element, or capturing a screenshot.

Each step is one of the following supported types:

⚙️ Shared Properties (All Steps)

All steps inherit from a common BaseStep interface and support these optional properties:

🚀 Step Types and Properties

Note:
The selector field in all step types refers to a custom HTML attribute:
data-freshshots-id="your_id_here"
It does not accept arbitrary CSS selectors.

1. visit_page

Navigate to a new URL.

{
	"action": "visit_page",
	"url": "https://example.com"
}

2. take_screenshot

Capture a screenshot of a page or element.

{
	"action": "take_screenshot",
	"save_screenshot_to": "screenshot.png",
	"selector": "main-content",
	"viewport_size": { "width": 1280, "height": 720 },
	"image_zoom": 1.25,
	"padding": 10
}

3. click_element

Click on an element.

{
	"action": "click_element",
	"selector": "submit-button"
}

4. type_input

Type text into an input field.

{
	"action": "type_input",
	"selector": "search-input",
	"input_value": "FreshShots"
}

5. select_dropdown

Select an option from a dropdown.

{
	"action": "select_dropdown",
	"selector": "country-select",
	"input_value": "Singapore"
}

6. check_box

Check a checkbox input.

{
	"action": "check_box",
	"selector": "accept-terms"
}

7. uncheck_box

Uncheck a checkbox input.

{
	"action": "uncheck_box",
	"selector": "subscribe-newsletter"
}

8. scroll_to

Scroll to a specific element or position.

{
	"action": "scroll_to",
	"selector": "footer-section",
	"scroll_position": { "y": 300 }
}

9. hover_over

Simulate a hover interaction over an element.

{
	"action": "hover_over",
	"selector": "main-menu"
}

🧠 Best Practices

• Begin with a visit_page step to navigate to your target site.
• Use skip_if_error for non-critical steps (like hovering or scrolling).
• Use descriptive filenames in take_screenshot steps to organize your output.
• All selector values must match the value of a data-freshshots-id attribute on the target element.
• Avoid using general CSS selectors — this system is designed to work with explicit IDs only.
• Use tools or developer inspection to verify data-freshshots-id presence before authoring workflows.