You can easily set up a screenshot for automation by using LaunchBrightly’s point-and-click screenshot setup wizard to create a screenshot recipe.

To create a new screenshot recipe click Add Element from the dropdown in the top right of the Elements page on LaunchBrightly console.

Enter the Name of the screenshot the automation recipe will capture, and set the file name to be associated with the automation recipe. The screenshot file name will automatically be populated based on the name you entered when setting up the element, and can be updated by clicking into the input field.

Pro Tip. Each of your automated product screenshots will have a fully customizable path and filename associated with it. This path and filename is used to uniquely identify each individual screenshot, and will most commonly be seen when using the Embed and Export features. However, we recommend against editing your path or filename after the initial setup, or doing so with caution. Changing any part of the Pathname for Screenshot URLs and Exports will result in a change to your Screenshot URLs which, if you use Embeds, could see links previously embedded throughout your system break due to the URL change.

Learn more about Pathnames for Screenshot URLs and Exports.

Enter any Caption and Accessibility Text you would like to attach to your automated screenshot. And click Add Screenshot Sequence to use the point-and-click screenshot setup wizard to easily record the steps to capture your ideal screenshot - from clicking buttons, adding input text, removing specific elements, to adding precise annotations. This will automatically create an automated screenshot sequence that can be reprocessed repeatedly to generate fresh screenshots.

Add Screenshot Sequence

By selecting Add Screenshot Sequence the screenshot automation platform will securely open a browser from within the LaunchBrightly console and automatically navigate to the URL for the homepage of the Demo Account you provided. This is a fully functioning browser-in-browser that allows you to navigate throughout the browser, and perform any actions in this browser, as you would in any other setting.

From within this browser-in-browser you can use the point-and-click screenshot setup wizard to record the steps to capture your ideal screenshot - from clicking buttons, adding input text, removing specific elements, to adding precise annotations.

Navigate to the Screenshot URL

Use the browser-in-browser to navigate to the URL in your application where the product element you would like to capture lives. You can navigate to the URL in the by:

Using the point-and-click screenshot setup wizard to easily navigate throughout the browser to locate the login URL of your application
Manually entering the URL and clicking Navigate

Once you have successfully navigated to the URL in your application click Set URL.

Record the Steps to Prime Your Screenshot

Use the point-and-click screenshot setup wizard to record the steps to prime your ideal screenshots. You can record the following steps for the screenshot automation platform to perform when automatically generating screenshots:

Hover element. Direct the screenshot automation platform to hover over specifics element (e.g. to highlight the element, or reveal a popup window)

Click element. Specify the elements you would like the screenshot automation platform to click when priming your screenshot for capture

Insert text. Specify the exact text you would like the screenshot automation platform to insert into a selected input field. This is good for a password box, or other input field where there is no interactivity as the text is being entered into the input field, and you simply want to insert text to set the value of that field.

Type characters. Specify the individual characters you would like the screenshot automation platform to sequentially enter into a selected input field with a 200ms pause between each to simulate a human typing. This is good for an auto-suggest input field where there is interactivity based on the characters as they are being typed.

Press special key. Direct the screenshot automation platform to press a special keyboard character (e.g. tab, enter, up arrow, down arrow, etc).

Delete Element. Specify an element you would like the screenshot automation platform to delete when processing the automation recipe to generate your screenshot. *The element will be removed and the space where the element previously appeared will also disappear (i.e. the page layout will change when the element is deleted).

Hide Element. Specify an element you would like the screenshot automation platform to hide when processing the automation recipe to generate your screenshot. *The element will be hidden but still take up the same space as before (i.e. the page layout will not be affected).

Set Element

Use the point-and-click screenshot setup wizard to hover your mouse or keyboard tracker over the page and highlight the product element you want to capture a screenshot of. Once you have identified the product element you want to capture click Set element.

If, rather than capturing a specific element from the page, you would like to capture a full page screenshot you have two pre-set options available.

Full page

If you would like to capture the full length of the page (URL) in question from your application, and select I want to capture entire page and the screenshot automation platform will capture a screenshot of the full length of the page from your application when capturing the screenshot.

Screen size

If you would like to capture a screenshot of the visible area (viewport) of the page, then select both I want to capture entire page and Crop to screen size (from top). When generating the screenshot, the platform will then capture only the visible area of the page and not the full length of the page (should it scroll multiple pages down).

Add Annotation

Click Add annotation to use the point-and-click screenshot setup wizard to hover your mouse or keyboard tracker over the page and identify the element you would like to be automatically annotated when your screenshot is generated. You have the option to:

Add a Rectangle annotation to the element selected
Enumerate annotations to add sequential numbering next to each of annotation elements you select to annotate
Blur content on the element selected
Add arrows to have an arrow annotation added to the element you select.

Each of these options can be selected individually or in combination.

Apply Style

Add styling enhancements to your screenshot:

Add padding around the outside of your product element (where none exists on the selected element) for optimal output on the generated screenshot.

Crop screenshot to set the specific area from within the product element selected you want to capture. The dimensions captured for cropping are based on Desktop - Light mode.

Process Your Screenshot Recipe

After creating and saving your screenshot sequence you will see the steps listed in the Element sidebar. To activate screenshot automation for this sequence click the toggle to Active, and click Save.

Scroll to the bottom of the Edit Element sidebar and click on the blank image with the New status to reveal a Camera icon. Click this icon to have the screenshot automation platform run your screenshot sequence and generate your screenshot.

The image will automatically be moved to a Scheduled status, indicating the screenshot sequence is being processed, and you will see the generated screenshot in the Edit Element sidebar once it has been fetched.