Take a Screenshot of a Specific Element on a Webpage (SmartUI Hooks)

Use this guide when you run automated web tests on LambdaTest and want SmartUI to capture a visual baseline for a specific part of the page, such as a component, card, table, or section, instead of the full browser window.

Before You Start

Make sure you have:

• A LambdaTest account with Web Automation access, such as Selenium on the LambdaTest Grid.
• SmartUI enabled for the session. Your SmartUI project and build must be configured on the test session.
• A locator for the target element, such as a CSS selector, XPath, or HTML id.

note

Do not store usernames or access keys in your source repository. Use environment variables or your CI secret manager instead.

Step 1: Open the Page in Your Test

In your test script, navigate to the target URL and wait until the UI is fully loaded.

Use explicit waits where possible so the element is present and stable before capture.

Step 2: Scroll the Element Into View

Before taking the screenshot, scroll the target element into the visible area of the page.

This helps ensure the correct region is ready for capture. Use your framework's normal scrolling method, such as JavaScript scrollIntoView() or your Selenium helper.

Step 3: Call the SmartUI Element Screenshot Hook

Run a JavaScript string in the browser context, for example using Selenium executeScript().

Use the following format:

smartui.takeScreenshot,<JSON>

The JSON must include at least these fields:

Field	Purpose
screenshotName	Stable name for the screenshot in SmartUI. Used for baselines and comparisons.
elementType	Locator type. Supported values: css_selector, xpath, id, class
element	Locator value for the target element
fullPage	Set to false to capture only the target element

Example JSON:

{"screenshotName":"Checkout_Summary_Block","elementType":"css_selector","element":"section.checkout-summary","fullPage":false}

Full script string passed to executeScript():

smartui.takeScreenshot,{"screenshotName":"Checkout_Summary_Block","elementType":"css_selector","element":"section.checkout-summary","fullPage":false}

Update elementType and element to match the locator used in your test.

Step 4: Repeat for Other Components

If you want to capture more than one component, call the hook again with a different screenshotName for each one.

Keep screenshot names stable across runs so SmartUI compares against the correct baseline.

Optional: Capture Many Elements Automatically

If you want to capture many elements from the same page, SmartUI does not provide a single built-in hook that automatically splits the whole page into separate element screenshots.

Instead, you can use a test-side workflow:

1. Collect visible elements in the page with JavaScript.
2. Generate a locator for each element, such as XPath.
3. Loop through that list in your test.
4. Call smartui.takeScreenshot once per element.

This is useful when you want to build a component inventory for a page without manually adding every selector one by one.

Recommended Guardrails

• Limit the total number of elements you capture in one run.
• Skip hidden or very small elements.
• Prefer targeting a specific container like main, .product-grid, or [data-testid='app-root'] instead of the entire DOM.
• Keep screenshot names deterministic so repeated runs stay comparable.

Example Pattern

The following example collects visible elements, builds XPath locators, and returns metadata for the first N matches:

const elements = await driver.executeScript(`
  function getPath(el) {
    if (!el || el.nodeType !== 1) return '';
    if (el.id) return '//*[@id="' + el.id.replace(/"/g, '\\\\"') + '"]';
    if (el === document.body) return '/html/body';
    let ix = 0;
    const siblings = el.parentNode ? el.parentNode.children : [];
    for (let i = 0; i < siblings.length; i++) {
      if (siblings[i] === el) {
        return getPath(el.parentNode) + '/' + el.tagName.toLowerCase() + '[' + (ix + 1) + ']';
      }
      if (siblings[i].tagName === el.tagName) ix++;
    }
    return '';
  }

  const out = [];
  const nodes = Array.from(document.querySelectorAll('body *'));
  const max = arguments[0];

  for (let i = 0; i < nodes.length && out.length < max; i++) {
    const n = nodes[i];
    const r = n.getBoundingClientRect();
    const st = window.getComputedStyle(n);

    if (r.width < 8 || r.height < 8) continue;
    if (st.display === 'none' || st.visibility === 'hidden' || st.opacity === '0') continue;

    const xp = getPath(n);
    if (!xp) continue;

    out.push({
      xpath: xp,
      tag: n.tagName.toLowerCase(),
      id: n.id || '',
      cls: (n.className && String(n.className).split) ? String(n.className).split(/\\s+/)[0] : '',
      idx: i
    });
  }

  return out;
`, 25);

Then loop through the collected elements and upload one SmartUI element screenshot for each:

for (const item of elements) {
  const label = item.id
    ? `${item.tag}_id_${item.id}`
    : item.cls
      ? `${item.tag}_class_${item.cls}`
      : `${item.tag}_idx_${item.idx}`;

  const screenshotName = `element_${label}`.replace(/[^a-zA-Z0-9_-]+/g, '_').slice(0, 80);

  await driver.executeScript(
    `smartui.takeScreenshot,${JSON.stringify({
      screenshotName,
      elementType: 'xpath',
      element: item.xpath,
      fullPage: false
    })}`
  );
}

Best Use Cases

• Capture all visible cards in a product grid.
• Capture all buttons or interactive controls on a page.
• Build a one-time baseline set for important components in a dashboard or design system page.

When to Avoid This

• Very large pages with hundreds of nodes.
• Pages with highly dynamic content that changes on every load.
• Pages where stable component locators already exist and are easier to maintain manually.

Step 5: Find the Screenshot in SmartUI

1. Open SmartUI from your LambdaTest account.
2. Select the project and build that match your test run.
3. Locate the screenshot using the screenshotName.

Tips

• Use unique locators: Your selector should match only one main element. If it matches multiple nodes, the capture may be inconsistent.
• Handle dynamic content carefully: If the element contains content that changes every run, such as timers or ads, consider using ignore regions or layout comparison options if available in your SmartUI project.
• Watch for large elements: If the captured image appears cut off for a very tall or wide component, contact LambdaTest support with the session ID and screenshotName.

Quick Reference

Locator Type	elementType	Example element Value
CSS selector	css_selector	main article:first-of-type
XPath	xpath	//div[@data-testid='invoice-panel']
HTML id	id	sidebar

Related Docs

• Selenium Hooks
• Hooks Layout + Full Page
• Handle Dynamic Data
• SmartUI Troubleshooting Guide