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 with capture, and enter any Caption and Accessibility Text you would like to attach to your automated screenshot.

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 the URL in your application where the product element you would like to capture lives. You can navigate to the URL in the by:

1. Using the point-and-click screenshot setup wizard to easily navigate throughout the browser to locate the login URL of your application
2. 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).

• Remove Element. Specify an element you would like the screenshot automation platform to hide when processing the automation recipe generated the screenshot.

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. 

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 annotated with a rectangle as part of your screenshot. You have the option to:

• Enumerate annotations to add sequence numbering next to each of annotation elements you select; and
• Add arrows to have an arrow added to your annotation. 

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.  

• Crop to screen size to set the dimensions of the screenshot to be captured as a full screen desktop (1536 pixel width) starting from the top of the page.

Set File Name

The screenshot file name associated with each of your screenshot recipes is automatically generated based on the name you entered when setting up the element, and can be updated before saving your automated screenshot sequence. 

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.

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. 

Find the newly created Element from the Elements page of your LaunchBrightly console and open the Edit Element sidebar.

Scroll to the bottom of the Edit Element sidebar and click on the black 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.