diff --git a/docs/selenium-visual-regression.md b/docs/selenium-visual-regression.md index 2b6d06ba9..d98dd1e94 100644 --- a/docs/selenium-visual-regression.md +++ b/docs/selenium-visual-regression.md @@ -338,7 +338,7 @@ Add the following **Webhook** to your test cases where we need to capture the sc ```javascript -driver.executeScript("smartui.takeFullPageScreenshot=") +await driver.executeScript("smartui.takeScreenshot", { screenshotName: "", fullPage: true }); ``` @@ -346,28 +346,31 @@ driver.executeScript("smartui.takeFullPageScreenshot=") ```python -driver.execute_script("smartui.takeFullPageScreenshot=") +driver.execute_script("smartui.takeScreenshot", {"screenshotName": "", "fullPage": True}) ``` ```ruby -driver.execute_script("smartui.takeFullPageScreenshot=") +driver.execute_script("smartui.takeScreenshot", {"screenshotName" => "", "fullPage" => true}) ``` ```csharp -driver.ExecuteScript("smartui.takeFullPageScreenshot="); +driver.ExecuteScript("smartui.takeScreenshot", new Dictionary { { "screenshotName", "" }, { "fullPage", true } }); ``` ```java -((JavascriptExecutor)driver).executeScript("smartui.takeFullPageScreenshot="); +Map config = new HashMap<>(); +config.put("screenshotName", ""); +config.put("fullPage", true); +((JavascriptExecutor)driver).executeScript("smartui.takeScreenshot", config); ``` @@ -386,34 +389,38 @@ For browsers other than chrome (Mozilla, Safari etc.) and for websites `Full Pag ```javascript -await driver.executeScript("smartui.takeFullPageScreenshot,{\"screenshotName\":\"\", \"smartScroll\":true }"); +await driver.executeScript("smartui.takeScreenshot", { screenshotName: "", fullPage: true, smartScroll: true }); ``` ```python -driver.execute_script("smartui.takeFullPageScreenshot,{\"screenshotName\":\"\", \"smartScroll\":true }") +driver.execute_script("smartui.takeScreenshot", {"screenshotName": "", "fullPage": True, "smartScroll": True}) ``` ```ruby -driver.execute_script("smartui.takeFullPageScreenshot,{\"screenshotName\":\"\", \"smartScroll\":true }") +driver.execute_script("smartui.takeScreenshot", {"screenshotName" => "", "fullPage" => true, "smartScroll" => true}) ``` ```csharp -driver.ExecuteScript("smartui.takeFullPageScreenshot,{\"screenshotName\":\"\", \"smartScroll\":true }"); +driver.ExecuteScript("smartui.takeScreenshot", new Dictionary { { "screenshotName", "" }, { "fullPage", true }, { "smartScroll", true } }); ``` ```java -((JavascriptExecutor)driver).executeScript("smartui.takeFullPageScreenshot,{\"screenshotName\":\"\", \"smartScroll\":true }"); +Map config = new HashMap<>(); +config.put("screenshotName", ""); +config.put("fullPage", true); +config.put("smartScroll", true); +((JavascriptExecutor)driver).executeScript("smartui.takeScreenshot", config); ``` diff --git a/docs/smartui-ab-testing-variations.md b/docs/smartui-ab-testing-variations.md index 6eb71e03e..ed24905c9 100644 --- a/docs/smartui-ab-testing-variations.md +++ b/docs/smartui-ab-testing-variations.md @@ -49,7 +49,7 @@ import BrandName, { BRAND_URL } from '@site/src/component/BrandName'; # A/B Testing and Baseline Variations -In **SmartUI**, **A/B testing** lets one **screenshot or PDF page** keep **multiple approved reference images** (called **variations**). Each new capture is compared against **every active variation**; the UI shows which one **matched** (closest visual agreement). That cuts false failures when the same page can look different but still be correct—A/B tests, feature flags, themes, locales, or PDF layout variants—without splitting into separate names in automation or upload flows. +In **SmartUI**, **A/B testing** lets one **screenshot or PDF page** keep **multiple approved reference images** (called **variations**). Each new capture is compared against **every active variation**; the UI shows which one **matched** (closest visual agreement). That cuts false failures when the same page can look different but still be correct (A/B tests, feature flags, themes, locales, or PDF layout variants) without splitting into separate names in automation or upload flows. This guide walks through the **review** flow in the SmartUI dashboard: the **A/B** panel, the **default** variation, **Add new**, **Matched with**, managing variations, and **ending** A/B by picking a single winner. @@ -60,7 +60,7 @@ A/B variations use the **same in-product panel** whether the asset is a **standa | Capture type | Typical source | Notes | |--------------|----------------|--------| | **Web / app screenshots** | Automation (Selenium, Playwright, Cypress, Hooks, SDK, CLI), manual capture, Storybook, and similar | Use a stable **screenshot name** per page or state; open that screenshot in a build to manage variations. | -| **PDF pages** | [PDF comparison](/support/docs/smartui-pdf-comparison/) projects (upload, Java SDK, CLI, or API) | A/B applies **per PDF page** in the build—the same **Add new**, **Matched with**, and **End A/B testing** controls as for web screenshots. | +| **PDF pages** | [PDF comparison](/support/docs/smartui-pdf-comparison/) projects (upload, Java SDK, CLI, or API) | A/B applies **per PDF page** in the build: the same **Add new**, **Matched with**, and **End A/B testing** controls as for web screenshots. | You do **not** need a separate project type for A/B. Create or open the screenshot or PDF page in your existing SmartUI build, then use the **A/B** icon on that asset’s review screen. @@ -73,7 +73,7 @@ Set up PDF ingestion first if you are new to PDF comparison: [PDF Comparison in | Term | Meaning | |------|--------| | **Variation** | An approved reference image for this screenshot. The **default** variation tracks the platform baseline; you can add up to **19** more. | -| **Default variation** | The reference tied to the **current SmartUI baseline** for this build (dynamic—not a user-created slot you rename as “default”). | +| **Default variation** | The reference tied to the **current SmartUI baseline** for this build (dynamic, not a user-created slot you rename as “default”). | | **Matched with** | The variation that best matches the latest capture (typically lowest diff % within threshold). | | **End A/B testing** | Pick one variation as the **only** baseline going forward; other variations are removed. | @@ -121,7 +121,7 @@ For **build-level** baselines (branches, approvals, Smart Git), see [Baseline Ma - A account with **SmartUI** access and an existing **project** with at least one build. - At least one **screenshot** or **PDF page** in that build to open in review. - Permission to **review** and update baselines in that project. -- No extra automation flags are required to **start** A/B from the UI—for web tests, keep the same **`screenshotName`**; for PDFs, keep the same page identity in your upload or SDK flow. +- No extra automation flags are required to **start** A/B from the UI: for web tests, keep the same **`screenshotName`**; for PDFs, keep the same page identity in your upload or SDK flow. --- @@ -144,7 +144,7 @@ When the pane opens, you see the **default variation**: A/B testing panel showing the default variation derived from the current build baseline - It reflects the **current baseline** for this screenshot in this **build context**, per your project’s **SmartUI baseline rules** (for example the latest **approved** reference for that build strategy). -- It is **dynamic**: if the governing baseline changes (approval, move to baseline, branch rules), the default variation **follows** that reference—it is not a separate image you pin manually. +- It is **dynamic**: if the governing baseline changes (approval, move to baseline, branch rules), the default variation **follows** that reference; it is not a separate image you pin manually. You **cannot** assign another variation to replace this **default** slot. **Default** means the **platform baseline** for this screenshot, not a renameable card in your list. @@ -172,7 +172,7 @@ When a new build processes this screenshot, the pane shows **Matched with** and Matched with label in the A/B panel showing which variation the latest capture matched -Only **one** variation is shown as the match for triage at a time—the best fit for that capture. +Only **one** variation is shown as the match for triage at a time, the best fit for that capture. :::note Unmatched captures If **no** variation is within threshold, the screenshot may still show as **changes found** or unmatched. Add a new variation from that capture, adjust thresholds, or **end A/B** once you know the intended winner. See [Mismatch Thresholds](/support/docs/smartui-mismatch-thresholds/). diff --git a/docs/smartui-appium-hooks.md b/docs/smartui-appium-hooks.md index 53140020d..ae569642c 100644 --- a/docs/smartui-appium-hooks.md +++ b/docs/smartui-appium-hooks.md @@ -388,7 +388,7 @@ driver.execute_script("smartui.takeScreenshot", config) :::note Best Practices - Use `ignoreBoxes` for elements that change frequently (e.g., ads, timestamps, user avatars). - Use `selectBoxes` when you want to focus comparison only on critical UI sections. -- Avoid using both `ignoreBoxes` and `selectBoxes` in the same config — they are mutually exclusive. +- Avoid using both `ignoreBoxes` and `selectBoxes` in the same config; they are mutually exclusive. - Ensure XPath expressions are unique and stable across test runs. - Test your XPath locators using Appium Inspector or similar tools before integrating. ::: diff --git a/docs/smartui-appium-java-sdk.md b/docs/smartui-appium-java-sdk.md index 6ab4ec851..1bbbed7f3 100644 --- a/docs/smartui-appium-java-sdk.md +++ b/docs/smartui-appium-java-sdk.md @@ -294,7 +294,7 @@ config.put("selectBoxes", gson.toJson(selectBoxesMap)); :::note Best Practices - Use `ignoreBoxes` for elements that change frequently (e.g., ads, timestamps, user avatars). - Use `selectBoxes` when you want to focus comparison only on critical UI sections. -- Avoid using both `ignoreBoxes` and `selectBoxes` in the same config — they are mutually exclusive. +- Avoid using both `ignoreBoxes` and `selectBoxes` in the same config; they are mutually exclusive. - Ensure XPath expressions are unique and stable across test runs. ::: diff --git a/docs/smartui-audit-logs.md b/docs/smartui-audit-logs.md index 266106237..c03e160c4 100644 --- a/docs/smartui-audit-logs.md +++ b/docs/smartui-audit-logs.md @@ -43,7 +43,7 @@ import BrandName, { BRAND_URL } from '@site/src/component/BrandName'; }} > -**Audit Logs** give you a permanent, searchable record of every important action in your SmartUI projects—who did it, when, and what changed. Use them for compliance, accountability, and tracing baseline history across projects, builds, and individual screenshots. +**Audit Logs** give you a permanent, searchable record of every important action in your SmartUI projects: who did it, when, and what changed. Use them for compliance, accountability, and tracing baseline history across projects, builds, and individual screenshots. --- @@ -93,15 +93,15 @@ For a **single screenshot**, the **screenshot-level** log is that asset’s base ## What each level shows -**Project history** — Project created/deleted; settings updated; builds merged to baseline. +**Project history**: Project created/deleted; settings updated; builds merged to baseline. Project-level audit history -**Build history** — Build created/completed/failed; re-runs (re-execute vs re-run comparison); bulk approve/reject; build deleted. +**Build history**: Build created/completed/failed; re-runs (re-execute vs re-run comparison); bulk approve/reject; build deleted. Build-level audit history -**Screenshot history** — Approvals and rejections (single and bulk); live comparisons; ignore zones/annotations; screenshot added/deleted. +**Screenshot history**: Approvals and rejections (single and bulk); live comparisons; ignore zones/annotations; screenshot added/deleted. Screenshot-level audit history @@ -125,25 +125,25 @@ Every event shows **who**, **when**, and **what**: Use filters to narrow by **who** (user or system), **what** (event type), **branch**, or **screenshot name**. -**By user or system** — Filter by specific users for accountability, or by **System** to see only automated events (e.g. auto-approvals). +**By user or system**: Filter by specific users for accountability, or by **System** to see only automated events (e.g. auto-approvals). Filter by team members Filter by System actions -**By event type** — e.g. Approve, Reject, Merged to Baseline, Build Re-executed. +**By event type**: e.g. Approve, Reject, Merged to Baseline, Build Re-executed. Filter by event type -**By branch** — Restrict to a Git branch. +**By branch**: Restrict to a Git branch. Filter by branch -**By screenshot name** — Search for a specific snapshot. +**By screenshot name**: Search for a specific snapshot. Filter by screenshot name -**Bulk actions** — One event per bulk approve/reject; hover or click to see a visual preview of the screenshots included. +**Bulk actions**: One event per bulk approve/reject; hover or click to see a visual preview of the screenshots included. Preview of screenshots in a bulk action @@ -191,5 +191,5 @@ Use the **Event type** filter in the UI to restrict to these categories. ## Related documentation -- [Approval & Baseline Management](/support/docs/smartui-approval-workflow-guide/) — How approve, reject, move, and merge affect baselines. -- [Multiselect & Bulk Operations](/support/docs/smartui-multiselect-bulkops/) — How bulk actions work and how they appear in audit logs. +- [Approval & Baseline Management](/support/docs/smartui-approval-workflow-guide/): How approve, reject, move, and merge affect baselines. +- [Multiselect & Bulk Operations](/support/docs/smartui-multiselect-bulkops/): How bulk actions work and how they appear in audit logs. diff --git a/docs/smartui-automation-dashboard.md b/docs/smartui-automation-dashboard.md index d4d287afe..63169a97f 100644 --- a/docs/smartui-automation-dashboard.md +++ b/docs/smartui-automation-dashboard.md @@ -99,7 +99,7 @@ Toggle between a **Grid view** (screenshot thumbnails, ideal for a quick visual ### 3. Group by test -Organize screenshots by automation suite or test name so related screenshots stay together — far easier to navigate than a flat list when a run produces dozens of screenshots. +Organize screenshots by automation suite or test name so related screenshots stay together, far easier to navigate than a flat list when a run produces dozens of screenshots. ### 4. Deep link into SmartUI @@ -120,7 +120,7 @@ The **View in SmartUI** link on a build takes users straight to the full SmartUI ## Availability and access - The feature appears as a tab in the test view for any test that has associated SmartUI screenshots; tests without SmartUI data won't show SmartUI content. -- It is rolled out progressively. If the user does not see the SmartUI tab and expects to, their account may not yet be enabled — contact the account team or support. +- It is rolled out progressively. If the user does not see the SmartUI tab and expects to, their account may not yet be enabled; contact the account team or support. - Requires an active SmartUI project linked to the automation run. --- @@ -129,7 +129,7 @@ The **View in SmartUI** link on a build takes users straight to the full SmartUI - **Real Device sessions:** Screenshots are matched to the user's test even when a session identifier isn't present, so results display reliably for Real Device runs. - **Mixed runs:** App Automation and Web-Automation-with-Real-Device tests each route to their correct dashboard when the user follows a deep link. -- For the cleanest grouping, use consistent, descriptive test names in the automation suite — these are what the **Group by test** view uses to cluster screenshots. +- For the cleanest grouping, use consistent, descriptive test names in the automation suite; these are what the **Group by test** view uses to cluster screenshots. --- diff --git a/docs/smartui-custom-css.md b/docs/smartui-custom-css.md index 6b23938bc..7b80113c2 100644 --- a/docs/smartui-custom-css.md +++ b/docs/smartui-custom-css.md @@ -51,7 +51,7 @@ import BrandName, { BRAND_URL } from '@site/src/component/BrandName'; --- -Custom CSS injection is a specialized feature in SmartUI that allows you to apply test-only styles during snapshot capture without modifying your application code. This feature enables you to stabilize visual tests by normalizing dynamic content, enforcing consistent styling across environments, and masking sensitive information—all while keeping your visual testing logic centralized and maintainable. +Custom CSS injection is a specialized feature in SmartUI that allows you to apply test-only styles during snapshot capture without modifying your application code. This feature enables you to stabilize visual tests by normalizing dynamic content, enforcing consistent styling across environments, and masking sensitive information, all while keeping your visual testing logic centralized and maintainable. ### Why Custom CSS Matters @@ -146,7 +146,7 @@ The embedded string method is useful for quick edits and single-use CSS rules. P - **Method Selection**: Choose the file path method for larger stylesheets and team collaboration. Use embedded strings only for quick, single-use CSS rules. -- **CSS Organization**: Keep your CSS snapshot-specific—target only elements that need stabilization or normalization. Avoid broad selectors that might affect unintended elements. +- **CSS Organization**: Keep your CSS snapshot-specific: target only elements that need stabilization or normalization. Avoid broad selectors that might affect unintended elements. - **JSON Escaping**: When using embedded strings, escape quotes properly: - Use single quotes within CSS strings: `"body{font-family:'Inter',sans-serif;}"` @@ -154,8 +154,8 @@ The embedded string method is useful for quick edits and single-use CSS rules. P - **Selector Verification**: If the CSS Injection Report shows "no elements found" or "invalid selector" errors: - Verify the element exists at snapshot time (use browser dev tools) - - Check selector specificity—it may need to be more specific or less specific - - Consider timing issues—ensure the element is rendered before snapshot capture + - Check selector specificity: it may need to be more specific or less specific + - Consider timing issues: ensure the element is rendered before snapshot capture - Check the CSS Injection Report in logs for detailed feedback - **CLI Version**: Ensure SmartUI CLI v4.1.40+ is installed. You can verify this by running `npx smartui --version`. Older versions may not support the `customCSS` feature. diff --git a/docs/smartui-diff-highlighter.md b/docs/smartui-diff-highlighter.md index 7aba32cbe..bc50aecf3 100644 --- a/docs/smartui-diff-highlighter.md +++ b/docs/smartui-diff-highlighter.md @@ -45,7 +45,7 @@ import BrandName, { BRAND_URL } from '@site/src/component/BrandName'; # Diff Highlighter & Navigation -When reviewing SmartUI visual comparisons, small differences can be easy to miss on dense or zoomed-out screens. The **Diff Highlighter** feature helps you **discover every change** quickly using in-view navigation and an optional highlight animation—so you spend less time scanning and more time deciding what to accept or reject. +When reviewing SmartUI visual comparisons, small differences can be easy to miss on dense or zoomed-out screens. The **Diff Highlighter** feature helps you **discover every change** quickly using in-view navigation and an optional highlight animation, so you spend less time scanning and more time deciding what to accept or reject. ## What You Get @@ -74,9 +74,9 @@ On the comparison view, open the **actions menu** (e.g. the 3-dot or actions dro In the actions menu you’ll see: -- **Previous** — moves focus to the **previous** diff (above the current one). -- **Highlight** — runs the **highlight animation**: popping circles traverse each diff from **top to bottom**, so you can see every change location in sequence. -- **Next** — moves focus to the **next** diff (below the current one). +- **Previous**: moves focus to the **previous** diff (above the current one). +- **Highlight**: runs the **highlight animation**: popping circles traverse each diff from **top to bottom**, so you can see every change location in sequence. +- **Next**: moves focus to the **next** diff (below the current one). Previous Diff Button Highlight Diff Button @@ -89,7 +89,7 @@ Use **Highlight** when you want to quickly see all diffs without clicking throug - On clicking the **Previous** or **Next** buttons, the view will zoom into that specific diff and highlight it with a bounded box. Zoom and highlight in box - You can continue to use overlay toggles, zoom, slider/side-by-side, and **Mark as bug** or approval actions as usual. -- Diff navigation and highlight do **not** replace existing comparison tools—they only make it easier to find where the changes are. +- Diff navigation and highlight do **not** replace existing comparison tools, they only make it easier to find where the changes are. ## Highlight animation @@ -132,9 +132,9 @@ To use diff navigation and highlight, ensure the screenshot is compared with **S ## Related docs -- [Smart Ignore](/support/docs/smartui-smartignore) — Reduce noise and use diff regions for navigation. -- [Layout Testing](/support/docs/smartui-layout-testing) — Compare layout structure (diff navigation for this mode coming later). -- [View comparison and issues](/support/docs/smart-visual-testing#view-comparison-and-issues) — Basics of the comparison view. +- [Smart Ignore](/support/docs/smartui-smartignore): Reduce noise and use diff regions for navigation. +- [Layout Testing](/support/docs/smartui-layout-testing): Compare layout structure (diff navigation for this mode coming later). +- [View comparison and issues](/support/docs/smart-visual-testing#view-comparison-and-issues): Basics of the comparison view.