Detecting Visual Breakpoints

Before detecting the visual breakpoints in a responsive web application, ensure that Mozilla Firefox 56 or later or Google Chrome 60 or later is installed on the machine on which Silk4NET is running.

Many web applications that are implemented with responsive web design techniques change their layout in response to the size of the browser or device in which they are displayed. The specific resolutions on which the layout changes are called visual breakpoints.

Silk4NET supports testing such applications by detecting the visual breakpoints, and by allowing you to resize the recording window to the specific size of such a visual breakpoint.

Silk4NET enables you to specify the exact size of the browser window in the following situations:

When you create a new project for a web application.
When you record a new test.
When you record actions into an existing test.
When you replay a test against a web application.

To find the visual breakpoints in a web application, and to display the corresponding resolutions in the Browser size list, perform the following actions:

Click Edit Browser Sizes. The Edit Browser Sizes dialog appears.
Click Detect Visual Breakpoints. If no URL for the web application is specified in an application configuration or base state, the Visual Breakpoint Detection URL dialog appears.
If no URL for the web application has been specified in an application configuration or base state, the Visual Breakpoint Detection URL dialog appears. Type the URL into the text field and click OK. Silk4NET detects all visual breakpoints for the web application and adds them to the Browser sizes list.
Click OK to close the Edit Browser Sizes dialog.

You can now select any of the visual breakpoints as the size of the browser window or mobile device for testing.