Smartui Skill
> Generates SmartUI visual regression test configurations for screenshot comparison on TestMu AI cloud. Framework-agnostic — works with Playwright, Selenium, Cypress, Puppeteer. Use when user mentions "SmartUI", "visual "SmartUI", "visual regression", "screenshot comparison", "pixel diff", "visual testing LambdaTest".
Install
one command, takes just this skill from the repositorynpx skills add https://github.com/LambdaTest/agent-skills --skill smartui-skillThe instruction itself
12 sections, as written by the authorSmartUI Visual Regression Skill
Core Patterns
Playwright + SmartUI SDK
const { chromium } = require('playwright');
const { smartuiSnapshot } = require('@lambdatest/smartui-cli');
(async () => {
const browser = await chromium.launch();
const page = await browser.newPage();
await page.goto('https://example.com');
await smartuiSnapshot(page, 'Homepage');
await page.goto('https://example.com/login');
await smartuiSnapshot(page, 'Login Page');
await browser.close();
})();
Selenium + SmartUI
// Take SmartUI screenshot
((JavascriptExecutor) driver).executeScript(
"smartui.takeScreenshot=Login Page"
);
CLI Execution
# Install
npm install @lambdatest/smartui-cli --save-dev
# Configure
npx smartui config:create smartui.config.json
# Execute
npx smartui exec -- node test.js
# or with Playwright
npx smartui exec -- npx playwright test
smartui.config.json
{
"web": {
"browsers": ["chrome", "firefox", "safari"],
"viewports": [[1920, 1080], [1366, 768], [375, 812]]
},
"waitForPageRender": 5000,
"waitForTimeout": 1000
}
SmartUI with Storybook
npx smartui storybook http://localhost:6006 --config smartui.config.json
Approval Workflow
- First run creates baseline screenshots
- Subsequent runs compare against baseline
- Differences highlighted in dashboard
- Approve/reject changes in LambdaTest SmartUI dashboard
- Approved screenshots become new baseline
Anti-Patterns
| Bad | Good | Why |
|-----|------|-----|
| No viewport config | Multiple viewports | Responsive issues |
| No wait for render | waitForPageRender | Incomplete screenshots |
| Screenshot everything | Key pages/components | Noise reduction |
| No approval process | Review diffs in dashboard | Catch regressions |
Cloud Authentication
Set environment variables:
export PROJECT_TOKEN="your-smartui-project-token" # From SmartUI dashboard
export LT_USERNAME="your-username" # For Selenium/Playwright cloud
export LT_ACCESS_KEY="your-access-key" # For Selenium/Playwright cloud
CLI approach (uses PROJECT_TOKEN):
npx smartui exec -- npx playwright test
Selenium Cloud approach (uses LT_USERNAME/LT_ACCESS_KEY):
// Capabilities include SmartUI options
HashMap<String, Object> ltOptions = new HashMap<>();
ltOptions.put("user", System.getenv("LT_USERNAME"));
ltOptions.put("accessKey", System.getenv("LT_ACCESS_KEY"));
ltOptions.put("build", "SmartUI Build");
ltOptions.put("smartUI.project", "My SmartUI Project");
ChromeOptions options = new ChromeOptions();
options.setCapability("LT:Options", ltOptions);
WebDriver driver = new RemoteWebDriver(
new URL("https://hub.lambdatest.com/wd/hub"), options);
Quick Reference
| Task | Command |
|------|---------|
| Install | npm install @lambdatest/smartui-cli |
| Init config | npx smartui config:create smartui.config.json |
| Run | npx smartui exec -- <test command> |
| Storybook | npx smartui storybook <url> |
| Dashboard | https://smartui.lambdatest.com |
Deep Patterns
For advanced patterns, debugging guides, CI/CD integration, and best practices,
see reference/playbook.md.
Other skills for the same job
different authors, same section of the catalogue
Toolkit for interacting with and testing local web applications using Playwright. Supports verifying frontend functionality, debugging UI behavior, capturing browser screenshots, and viewing browser logs.
Use this skill to query your Google NotebookLM notebooks directly from Claude Code for source-grounded, citation-backed answers from Gemini. Browser automation, library management, persistent auth. Drastically reduced hallucinations through document-only responses.
Complete browser automation with Playwright. Auto-detects dev servers, writes clean test scripts to /tmp. Test pages, fill forms, take screenshots, check responsive design, validate UX, test login flows, check links, automate any browser task. Use when user wants to test websites, automate browser interactions, validate web functionality, or perform any browser-based testing.
Automate Electron desktop apps (VS Code, Slack, Discord, Figma, Notion, Spotify, etc.) using agent-browser via Chrome DevTools Protocol. Use when the user needs to interact with an Electron app, automate a desktop app, connect to a running app, control a native app, or test an Electron application. Triggers include "automate Slack app", "control VS Code", "interact with Discord app", "test this Electron app", "connect to desktop app", or any task requiring automation of a native Electron application.
Automate Anchor Browser tasks via Rube MCP (Composio). Always search tools first for current schemas.
Automate Browser Tool tasks via Rube MCP (Composio). Always search tools first for current schemas.
Get Image [from] Internet Link - Zero-setup CLI for downloading full-resolution images from iCloud, Dropbox, Google Photos, and Google Drive share links. Four-tier capture strategy, browser automation, HEIC conversion, album support. Node.js/Playwright.
Expert in building browser extensions that solve real problems - Chrome, Firefox, and cross-browser extensions. Covers extension architecture, manifest v3, content scripts, popup UIs, monetization strategies, and Chrome Web Store publishing. Use when: browser extension, chrome extension, firefox addon, extension, manifest v3.
How to use it
Take lambdatest/smartui-skill from the repository into ~/.claude/skills for personal
use, or into .claude/skills inside a project.
The agent identifies a skill by the name field in its header. Two skills with the
same name cannot sit side by side — one of them will be ignored.
The instructions reference npm, npx.
Without those the skill loads but fails at the first command.