This article describes SDK layout breakpoints that can be used to visually test such pages successfully by extracting the DOM sent to the Ultrafast Grid at multiple page widths.
Note that no special handling is required if only CSS is used to adapt the page content to the viewport width.
Controlling viewport width
Eyes allows you to control the use of layout breakpoints in the following ways:
Setting layout breakpoints - choosing the breakpoints at which the DOM is generated.
Global and checkpoint layout breakpoints - defining the breakpoints for all of the test checkpoints while also allowing checkpoint-specific breakpoints.
These are described in detail in the following sections and concrete examples are given in the SDK methods for defining layout breakpoints section.
There are two ways to control the breakpoints at which the SDK generates a DOM:
The default handling is that the SDK generates a DOM for each distinct viewport width used by the configured execution environment.
Alternatively, you can specify a list of viewport widths to use. Then, for each execution environment, Eyes uses the DOM created with the widest viewport width that is smaller than the execution environment viewport width.
|Widths at which DOM in generated
600, 700, 800, 900 and 1500
640, 768 and 1024
639 - used for widths < 640 (i.e. 600)
640 - used for widths 640-767 (i.e. 600, 700)
768 - used for widths 768-1023 (i.e. 800, 900)
1024 - used for widths > 1024 (i.e. 1500)
You can enable and define the viewport widths globally by setting a Configuration object that is assigned to the test. You can then override the setting for particular breakpoints, either to disable layout breakpoints, or to change the layout breakpoints used.
If you only need layout breakpoints for some of the checkpoints, then only set them for those checkpoints, and don't enable layout breakpoints globally using Configuration.
The section that follows gives examples that illustrate how to:
method allows you to enable layout breakpoints, and optionally to define the layout breakpoint widths for all of the checkpoints in a test. The sections that follow illustrate how to do this.
Enable layout breakpoints globally with default widths
To enable default layout breakpoints, call the method
class$configuration$setlayoutbreakpoints, passing a parameter value of
trueconst. When used in this way, the DOM is sampled at each distinct viewport width defined by the execution environments, as described in detail in the Setting layout breakpoints section.
Enable layout breakpoints globally with defined widths
If you pass the method
class$configuration$setlayoutbreakpoints with one or more integers, then this both enables layout breakpoints and defines the layout breakpoint widths explicitly. The SDK creates a DOM at each of these viewport widths, and if at least one execution environment has a width less than the smallest width given, then an additional DOM is sampled at the minimum defined viewport width, less one (639 in this example).
In addition to enabling layout breakpoints and defining the viewport widths to be used globally, you can override these settings for a particular checkpoint using the method
class$checksettings$layoutbreakpoints. If only a few checkpoints require layout breakpoints, then you can simply specify layout breakpoints for the checkpoints that need them rather than defining them globally. In the following snippets, we see the use of this method in three ways:
The following snippet illustrates how to execute a checkpoint using the default layout breakpoints, even if other layout breakpoints were set explicitly globally, as described in Enable layout breakpoints with explicitly defined viewport widths.
The following snippet illustrates how to execute a checkpoint using explicit layout breakpoints, even if globally the use of default layout breakpoints was specified, as described in Enable layout breakpoints globally.
The following snippet shows how to disable layout breakpoints for a particular checkpoint, after you have enabled at the global level, as described in Enable layout breakpoints globally.