Browser testing against multiple breakpoints (resolution) and devices

When automating a web-based application, it is essential to ensure that tests are executed across various device resolutions and breakpoints. This includes testing the business process on desktop browsers, as well as on specific tablet and phone configurations. To effectively manage the complexity of automation development, it is crucial to have the capability to write portable tests that can be easily adapted to different device configurations. This will enable teams to quickly and efficiently test the application on different devices and browsers, ensuring a high level of reliability and consistency.

Selecting a Device to run browser tests

When executing browser-based tests, it is possible to specify the device configuration on which the test should run. This can be done by selecting an emulated device or a real mobile device. The configuration is set in the "Browser Testing" section of the Run modal in ACCELQ.

To access this feature, click on the "Browser Testing" section, which will open the modal and present the option to select the desired device configuration for test execution. This feature allows for flexibility and precision in ensuring that tests are run on the intended device, providing reliable and accurate results.

Add/Edit Emulated Device

You can add an emulated device by providing the following information:

• Width
• Height
• Device pixel ratio
• User Agent string: The User Agent string allows servers to gather information about the client, such as browser type, version, and device, to tailor their response and optimize rendering. This information can be found from various online resources, including websites with large collections of user-agent strings, such as this example site.

While creating a custom device, you can copy the configuration from a standard device listed in Chrome Dev tools.

Writing logic for portability: Element level differences

In a web application, the page structure and elements may sometimes vary depending on the device on which the application is rendered. To account for these variations, ACCELQ allows you to define "Element Instances" that cater to specific breakpoints. For example, you can define multiple variations of a "Sign In Button" element, each tailored to a specific device resolution. Despite the element level variations, automation logic will still refer to the "Sign In Button" as a logical unit. During execution, the system will automatically select the appropriate element instance for the device type on which the test is running.

To create an instance of an element, load the application URL in the Logic Recorder and select the desired Device type. Once the application is rendered at the required resolution, right-click on the element and choose "Save-As". This will create a new instance of the element.

For example, you may save the new Element as a "Phone" instance of "Sign In Button" which was already defined for the Desktop resolution. ACCELQ supports saving element instances in three resolutions: Desktop, Tablet, and Phone.

By defining element instances, you can avoid having to write conditional logic to address element-level differences and instead refer to the same element in your logic. This feature simplifies automation development, making it more efficient and maintainable.

Writing logic conditional to specific breakpoints

If there are functional differences in the interactions or validations required for a test case, specific to certain breakpoints, you can define a conditional statement within the test case to handle these differences. This can be achieved by using appropriate commands to check for the current breakpoint and executing specific actions based on the results of that check. This approach allows for flexibility in handling breakpoint-specific variations and ensures that the test case can handle all necessary interactions and validations on all devices.

Simply type "Is resolution" in the logic editor for appropriate commands to put a conditional statement on device resolution.