Capturing Responsive DOM with SmartUI SDK

---

If your application dynamically changes the DOM based on viewport size or specific breakpoints, SmartUI SDKs can be configured to adapt accordingly. When using the SmartUI CLI, the SDK captures the DOM state at the specified viewport size within the test browser, then renders it across the browsers and resolutions defined in your configuration file.

Therefore, if your application adjusts DOM elements between different screen sizes, ensure that you resize the viewport of your test browser and capture a snapshot at each required width.

Prerequisites

1. SmartUI CLI Version: Ensure you are using @lambdatest/smartui-cli version 4.0.7 or higher.
2. SDK Installation: Install the SDK with the specified compatible version.
3. Recommended Frameworks: For optimal performance, use either Playwright or Selenium frameworks.

Steps to Use

Step-1

Specify delayedUpload to true in your configuration file.

"delayedUpload" : true

Step-2

Resize your viewport according to your framework and take the screenshot. For example in Selenium NodeJs, you can do it as follows:

        let options =
        {
            "web": {
                "browsers": [
                    "chrome",
                    "firefox",
                    "safari"
                ],
                "viewports": [[768]], //required resized dom viewport
            },
            ignoreDOM: {
                class: ["required-class"],
              }
        };
  await driver.manage().window().setSize(768, 1024);
  await smartuiSnapshot(driver, 'Screenshot Name', options);


  let mobileOptions=
        {
            "mobile": {
                "devices": [
                    "iPhone 14",
                    "Galaxy S23"
                ],
                "fullPage": true,
                "orientation": "portrait"
            },
            ignoreDOM: {
                class: ["nextAvailDate"],
              }
        };
    await driver.manage().window().setSize(360, 1024);
    await smartuiSnapshot(driver, 'Screenshot Name', mobileOptions);

Note :: Any existing screenshots with same screenshot name,browser and resolution will get over-written.

Things to keep in mind:

1. Viewport and Browser Configuration: You can set the viewport size or specify browsers for individual snapshots either globally in the configuration file or at the snapshot level based on your needs.
2. Firefox Limitation: Firefox can only capture snapshots at DOM widths of 450px or larger due to resizing limitations.
3. Chrome Resizing in Selenium: In Selenium, Chrome’s viewport cannot be resized below 500px due to a limitation in Selenium.