Skip to content
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
27 changes: 17 additions & 10 deletions docs/selenium-visual-regression.md
Original file line number Diff line number Diff line change
Expand Up @@ -338,36 +338,39 @@ Add the following **Webhook** to your test cases where we need to capture the sc
<TabItem value="nodejs" label="NodeJS" default>

```javascript
driver.executeScript("smartui.takeFullPageScreenshot=<Your Screenshot Name>")
await driver.executeScript("smartui.takeScreenshot", { screenshotName: "<Your Screenshot Name>", fullPage: true });
```

</TabItem>

<TabItem value="python" label="Python" default>

```python
driver.execute_script("smartui.takeFullPageScreenshot=<Your Screenshot Name>")
driver.execute_script("smartui.takeScreenshot", {"screenshotName": "<Your Screenshot Name>", "fullPage": True})
```

</TabItem>
<TabItem value="ruby" label="Ruby" default>

```ruby
driver.execute_script("smartui.takeFullPageScreenshot=<Your Screenshot Name>")
driver.execute_script("smartui.takeScreenshot", {"screenshotName" => "<Your Screenshot Name>", "fullPage" => true})
```

</TabItem>
<TabItem value="csharp" label="C#" default>

```csharp
driver.ExecuteScript("smartui.takeFullPageScreenshot=<Your Screenshot Name>");
driver.ExecuteScript("smartui.takeScreenshot", new Dictionary<string, object> { { "screenshotName", "<Your Screenshot Name>" }, { "fullPage", true } });
```

</TabItem>
<TabItem value="java" label="Java" default>

```java
((JavascriptExecutor)driver).executeScript("smartui.takeFullPageScreenshot=<Your Screenshot Name>");
Map<String, Object> config = new HashMap<>();
config.put("screenshotName", "<Your Screenshot Name>");
config.put("fullPage", true);
((JavascriptExecutor)driver).executeScript("smartui.takeScreenshot", config);
```

</TabItem>
Expand All @@ -386,34 +389,38 @@ For browsers other than chrome (Mozilla, Safari etc.) and for websites `Full Pag
<TabItem value="nodejs" label="NodeJS" default>

```javascript
await driver.executeScript("smartui.takeFullPageScreenshot,{\"screenshotName\":\"<screenshot-name>\", \"smartScroll\":true }");
await driver.executeScript("smartui.takeScreenshot", { screenshotName: "<screenshot-name>", fullPage: true, smartScroll: true });
```
</TabItem>

<TabItem value="python" label="Python" default>

```python
driver.execute_script("smartui.takeFullPageScreenshot,{\"screenshotName\":\"<screenshot-name>\", \"smartScroll\":true }")
driver.execute_script("smartui.takeScreenshot", {"screenshotName": "<screenshot-name>", "fullPage": True, "smartScroll": True})
```
</TabItem>
<TabItem value="ruby" label="Ruby" default>

```ruby
driver.execute_script("smartui.takeFullPageScreenshot,{\"screenshotName\":\"<screenshot-name>\", \"smartScroll\":true }")
driver.execute_script("smartui.takeScreenshot", {"screenshotName" => "<screenshot-name>", "fullPage" => true, "smartScroll" => true})
```
</TabItem>

<TabItem value="csharp" label="C#" default>

```csharp
driver.ExecuteScript("smartui.takeFullPageScreenshot,{\"screenshotName\":\"<screenshot-name>\", \"smartScroll\":true }");
driver.ExecuteScript("smartui.takeScreenshot", new Dictionary<string, object> { { "screenshotName", "<screenshot-name>" }, { "fullPage", true }, { "smartScroll", true } });
```

</TabItem>
<TabItem value="java" label="Java" default>

```java
((JavascriptExecutor)driver).executeScript("smartui.takeFullPageScreenshot,{\"screenshotName\":\"<screenshot-name>\", \"smartScroll\":true }");
Map<String, Object> config = new HashMap<>();
config.put("screenshotName", "<screenshot-name>");
config.put("fullPage", true);
config.put("smartScroll", true);
((JavascriptExecutor)driver).executeScript("smartui.takeScreenshot", config);
```

</TabItem>
Expand Down
12 changes: 6 additions & 6 deletions docs/smartui-ab-testing-variations.md
Original file line number Diff line number Diff line change
Expand Up @@ -49,7 +49,7 @@ import BrandName, { BRAND_URL } from '@site/src/component/BrandName';

# A/B Testing and Baseline Variations

In <BrandName /> **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 correctA/B tests, feature flags, themes, locales, or PDF layout variantswithout splitting into separate names in automation or upload flows.
In <BrandName /> **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.

Expand All @@ -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 buildthe 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.

Expand All @@ -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 (dynamicnot 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. |

Expand Down Expand Up @@ -121,7 +121,7 @@ For **build-level** baselines (branches, approvals, Smart Git), see [Baseline Ma
- A <BrandName /> 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 UIfor 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.

---

Expand All @@ -144,7 +144,7 @@ When the pane opens, you see the **default variation**:
<img loading="lazy" src={require('../assets/images/smart-visual-testing/a-b-testing/a-b-test-defaultvariation.png').default} alt="A/B testing panel showing the default variation derived from the current build baseline" width="960" className="doc_img" />

- 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 referenceit 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.

Expand Down Expand Up @@ -172,7 +172,7 @@ When a new build processes this screenshot, the pane shows **Matched with** and

<img loading="lazy" src={require('../assets/images/smart-visual-testing/a-b-testing/a-b-test-matchedwithvariation.png').default} alt="Matched with label in the A/B panel showing which variation the latest capture matched" width="960" className="doc_img" />

Only **one** variation is shown as the match for triage at a timethe 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/).
Expand Down
2 changes: 1 addition & 1 deletion docs/smartui-appium-hooks.md
Original file line number Diff line number Diff line change
Expand Up @@ -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.
:::
Expand Down
2 changes: 1 addition & 1 deletion docs/smartui-appium-java-sdk.md
Original file line number Diff line number Diff line change
Expand Up @@ -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.
:::

Expand Down
22 changes: 11 additions & 11 deletions docs/smartui-audit-logs.md
Original file line number Diff line number Diff line change
Expand Up @@ -43,7 +43,7 @@ import BrandName, { BRAND_URL } from '@site/src/component/BrandName';
}}
></script>

**Audit Logs** give you a permanent, searchable record of every important action in your SmartUI projectswho 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.

---

Expand Down Expand Up @@ -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.

<img loading="lazy" className='doc_img' src={require('../assets/images/smart-visual-testing/audit-history/project_level_history.png').default} alt="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.

<img loading="lazy" className='doc_img' src={require('../assets/images/smart-visual-testing/audit-history/build_level_history.png').default} alt="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.

<img loading="lazy" className='doc_img' src={require('../assets/images/smart-visual-testing/audit-history/screenshot_level_history.png').default} alt="Screenshot-level audit history" />

Expand All @@ -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).

<img loading="lazy" className='doc_img' src={require('../assets/images/smart-visual-testing/audit-history/filters_users.png').default} alt="Filter by team members" />

<img loading="lazy" className='doc_img' src={require('../assets/images/smart-visual-testing/audit-history/filters_system_logs.png').default} alt="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.

<img loading="lazy" className='doc_img' src={require('../assets/images/smart-visual-testing/audit-history/filters_events.png').default} alt="Filter by event type" />

**By branch** Restrict to a Git branch.
**By branch**: Restrict to a Git branch.

<img loading="lazy" className='doc_img' src={require('../assets/images/smart-visual-testing/audit-history/filters_branches.png').default} alt="Filter by branch" />

**By screenshot name** Search for a specific snapshot.
**By screenshot name**: Search for a specific snapshot.

<img loading="lazy" className='doc_img' src={require('../assets/images/smart-visual-testing/audit-history/filters_screenshots.png').default} alt="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.

<img loading="lazy" className='doc_img' src={require('../assets/images/smart-visual-testing/audit-history/ss_preview_build_level.png').default} alt="Preview of screenshots in a bulk action" />

Expand Down Expand Up @@ -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.
6 changes: 3 additions & 3 deletions docs/smartui-automation-dashboard.md
Original file line number Diff line number Diff line change
Expand Up @@ -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

Expand All @@ -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.

---
Expand All @@ -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.

---

Expand Down
8 changes: 4 additions & 4 deletions docs/smartui-custom-css.md
Original file line number Diff line number Diff line change
Expand Up @@ -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 informationall 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

Expand Down Expand Up @@ -146,16 +146,16 @@ 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-specifictarget 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;}"`
- Or escape double quotes: `"body{font-family:\"Inter\",sans-serif;}"`

- **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 specificityit may need to be more specific or less specific
- Consider timing issuesensure 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.
Expand Down
Loading