Skip to main content

SmartUI SDK Advanced Configuration Options

Welcome to the world of simplified visual testing with the SmartUI SDK.

This guide is designed to provide you with comprehensive information about the various configuration options available within the SmartUI SDK. Whether you're a new user seeking to customize your SmartUI integration or an experienced developer looking to optimize your testing workflows, this documentation will serve as your go-to resource for understanding and utilizing the configuration options effectively.

To generate the SmartUI SDK configuration file, please execute the following command:

npx smartui config:create .smartui.json
note

For the latest features including advanced configurations, ensure you are using the latest version of SmartUI CLI. Install or update using:

npm install -g @lambdatest/smartui-cli@latest

Configuration File Structure​

The SmartUI configuration file follows a JSON structure. Below is a sample configuration file with detailed explanations of each option:

{
  "web": {
    "browsers": [
      "chrome",
      "firefox",
      "safari",
      "edge"
    ],
    "viewports": [
      [1920],
      [1366],
      [1028]
    ]
  },
  "mobile": {
    "devices": [
      "iPhone 14",
      "Galaxy S24"
    ],
    "fullPage": true,
    "orientation": "portrait"
  },
  "waitForTimeout": 1000,
  "waitForPageRender": 50000,
  "enableJavaScript": false,
  "allowedHostnames": ["cdn.xyz.com"]
}

Configuration Options​

browsers

An array of browsers to capture screenshots from. Supported browsers include chrome, firefox, safari, and edge.

viewports

An array of arrays representing different screen resolutions for web browsers. Each inner array contains viewport sizes. Each web viewport is automatically rendered for each of the browser mentioned in the config.

For capturing fullpage screenshots

To capture a screenshot of the entire page, you only need to define the viewport width in your configuration settings. Specify the desired width parameters as demonstrated in the following example to ensure a fullpage capture.

Full Page Capture
    "viewports": [
      [
        1920
      ],
      [
        1366
      ],
      [
        360
      ]
    ],

For capturing viewport screenshots

To capture a screenshot of the content currently visible in your viewport, rather than the entire page, it's important to define the viewport's width and height in your configuration settings. Specify the desired width and height parameters as demonstrated in the following example to ensure that the screenshot encompasses only the viewport area.

Viewport Capture
    "viewports": [
      [
        1920,
        1080
      ],
      [
        1366,
        768
      ],
      [
        360,
        640
      ]
    ],

customViewports

The customViewports property provides a way to define precisely which browser + viewport combinations should be rendered. This bypasses the default cartesian product behavior (where every viewport is automatically rendered on every specified browser).

This is particularly useful if you need to enforce a specific screen size only on Safari, but another screen size across Chrome and Firefox.

How to configure customViewports:

Below is an example of providing targeted sizes depending on the browser context. When using this configuration, SmartUI will generate screenshots only for the explicitly declared matches, allowing for highly optimized test metrics.

Sample web object with customViewports
    "customViewports": [
      { "browser": "chrome", "viewport": { "width": 1200, "height": 800 } },
      { "browser": "chrome", "viewport": { "width": 375, "height": 667 } },
      { "browser": "firefox", "viewport": { "width": 1200, "height": 800 } },
      { "browser": "safari", "viewport": { "width": 1200 } }
    ]

Note: As demonstrated with safari above, the height property within a viewport object is optional. If omitted, SmartUI performs a full-page capture automatically.

Last updated on

Test across 3000+ combinations of browsers, real devices & OS.

Book Demo

Help and Support

Related Articles