Skip to content

Commit 5ee06e9

Browse files
Ishavyas9Ishavyas9
authored
Merge pull request #1120 from Aman1905/main
smartui stabilize screenshots
2 parents c2f824c + af20f12 commit 5ee06e9

File tree

6 files changed

+413
-0
lines changed

6 files changed

+413
-0
lines changed

‎docs/smartui-freeze-animations.md‎

Lines changed: 62 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,62 @@
1+
---
2+
id: smartui-freeze-animations
3+
title: Capture Screenshots by Freezing Animations
4+
sidebar_label: Freezing Animations
5+
description: SmartUI can now capture the screenshots of your animations running in the browser by freezing it.
6+
keywords:
7+
- lambdatest
8+
- smart ui
9+
- freeze animations
10+
- storybook
11+
- animation svg screenshots
12+
url: https://www.lambdatest.com/support/docs/smartui-freeze-animations/
13+
site_name: LambdaTest
14+
slug: smartui-freeze-animations/
15+
---
16+
17+
<script type="application/ld+json"
18+
dangerouslySetInnerHTML={{ __html: JSON.stringify({
19+
"@context": "https://schema.org",
20+
"@type": "BreadcrumbList",
21+
"itemListElement": [{
22+
"@type": "ListItem",
23+
"position": 1,
24+
"name": "LambdaTest",
25+
"item": "https://www.lambdatest.com"
26+
},{
27+
"@type": "ListItem",
28+
"position": 2,
29+
"name": "Support",
30+
"item": "https://www.lambdatest.com/support/docs/"
31+
},{
32+
"@type": "ListItem",
33+
"position": 3,
34+
"name": "Freezing Animations",
35+
"item": "https://www.lambdatest.com/support/docs/smartui-freeze-animations/"
36+
}]
37+
})
38+
}}
39+
></script>
40+
Animations, while visually appealing, can pose challenges during visual testing by causing false positives in visual diffs. These false positives often arise because animations can create minor variations between screenshots, even when there are no actual changes to the content. To address this, LambdaTest Smart UI provides the capability to automatically freeze animations during visual testing, ensuring consistent and reliable test results.
41+
42+
## Freezing SVG Animations
43+
Consider an SVG element on your page with a loading animation that spins using the transform attribute. To freeze this animation, you can add the following custom JavaScript to your page before taking a screenshot:
44+
45+
```javascript
46+
const freezeAnimations = () => {
47+
// Freeze all SVGs animated using animate and animateTransform tag
48+
// SVGs animated through CSS or JS will require custom solutions
49+
const allSVGs = document.getElementsByTagName('svg');
50+
let allSVGAnimations = [];
51+
for (let svg of allSVGs) {
52+
const svgAnimation = [...svg.getElementsByTagName('animate'), ...svg.getElementsByTagName('animateTransform')];
53+
allSVGAnimations = allSVGAnimations.concat(svgAnimation);
54+
}
55+
56+
allSVGAnimations.forEach(animation => {
57+
const duration = animation.getAttribute('dur');
58+
animation.setAttribute('begin', '0s');
59+
animation.setAttribute('dur', '0s');
60+
});
61+
}
62+
```

‎docs/smartui-handle-dynamic-data.md‎

Lines changed: 155 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,155 @@
1+
---
2+
id: smartui-handle-dynamic-data
3+
title: Handle Dynamic Data
4+
sidebar_label: Dynamic Data
5+
description: SmartUI can now phandle dynamic data
6+
keywords:
7+
- lambdatest
8+
- smart ui
9+
- videos
10+
- storybook
11+
url: https://www.lambdatest.com/support/docs/smartui-handle-videos/
12+
site_name: LambdaTest
13+
slug: smartui-handle-dynamic-data/
14+
---
15+
16+
import Tabs from '@theme/Tabs';
17+
import TabItem from '@theme/TabItem';
18+
19+
<script type="application/ld+json"
20+
dangerouslySetInnerHTML={{ __html: JSON.stringify({
21+
"@context": "https://schema.org",
22+
"@type": "BreadcrumbList",
23+
"itemListElement": [{
24+
"@type": "ListItem",
25+
"position": 1,
26+
"name": "LambdaTest",
27+
"item": "https://www.lambdatest.com"
28+
},{
29+
"@type": "ListItem",
30+
"position": 2,
31+
"name": "Support",
32+
"item": "https://www.lambdatest.com/support/docs/"
33+
},{
34+
"@type": "ListItem",
35+
"position": 3,
36+
"name": "Handle Videos",
37+
"item": "https://www.lambdatest.com/support/docs/smartui-handle-dynamic-data/"
38+
}]
39+
})
40+
}}
41+
></script>
42+
43+
When conducting visual tests, you may encounter scenarios where certain elements within your application change between test runs. These changes might introduce inconsistencies in your test results.You can ignore / select specific element(s) to be removed from the comparison by parsing the options in the `smartuiSnapshot` function in the following way
44+
45+
46+
<Tabs className="docs__val" groupId="framework">
47+
<TabItem value="IgnoreID" label="Ignore ID" default>
48+
49+
```js title="This is a sample for your configuration for Javascript to ignore by ID"
50+
let options = {
51+
ignoreDOM: {
52+
id: ["ID-1", "ID-2"],
53+
}
54+
}
55+
await driver.get('Required URL');
56+
await smartuiSnapshot(driver, 'Screenshot Name', options);
57+
```
58+
59+
</TabItem>
60+
<TabItem value="IgoreClass" label="Ignore Class">
61+
62+
```js title="This is a sample for your configuration for Javascript to ignore by Class"
63+
let options = {
64+
ignoreDOM: {
65+
class: ["Class-1", "Class-2"],
66+
}
67+
}
68+
await driver.get('Required URL');
69+
await smartuiSnapshot(driver, 'Screenshot Name', options);
70+
```
71+
72+
</TabItem>
73+
<TabItem value="IgnoreXPath" label="Ignore XPath">
74+
75+
```js title="This is a sample for your configuration for Javascript to ignore by XPath"
76+
let options = {
77+
ignoreDOM: {
78+
xpath: ["Xpath-1", "Xpath-2"],
79+
}
80+
}
81+
await driver.get('Required URL');
82+
await smartuiSnapshot(driver, 'Screenshot Name', options);
83+
```
84+
85+
</TabItem>
86+
87+
<TabItem value="IgnoreSelector" label="Ignore CSS Selector">
88+
89+
```js title="This is a sample for your configuration for Javascript to ignore by CSS Selector"
90+
let options = {
91+
ignoreDOM: {
92+
cssSelector: ["CSS-Selector-1", "CSS-Selector-2"],
93+
}
94+
}
95+
await driver.get('Required URL');
96+
await smartuiSnapshot(driver, 'Screenshot Name', options);
97+
```
98+
</TabItem>
99+
100+
</Tabs>
101+
102+
<Tabs className="docs__val" groupId="framework">
103+
<TabItem value="SelectID" label="Select ID" default>
104+
105+
```js title="This is a sample for your configuration for Javascript to select by ID"
106+
let options = {
107+
selectDOM: {
108+
id: ["ID-1", "ID-2"],
109+
}
110+
}
111+
await driver.get('Required URL');
112+
await smartuiSnapshot(driver, 'Screenshot Name', options);
113+
```
114+
115+
</TabItem>
116+
<TabItem value="SelectClass" label="Select Class">
117+
118+
```js title="This is a sample for your configuration for Javascript to select by Class"
119+
let options = {
120+
selectDOM: {
121+
class: ["Class-1", "Class-2"],
122+
}
123+
}
124+
await driver.get('Required URL');
125+
await smartuiSnapshot(driver, 'Screenshot Name', options);
126+
```
127+
128+
</TabItem>
129+
<TabItem value="SelectXPath" label="Select XPath">
130+
131+
```js title="This is a sample for your configuration for Javascript to select by XPath"
132+
let options = {
133+
selectDOM: {
134+
xpath: ["Xpath-1", "Xpath-2"],
135+
}
136+
}
137+
await driver.get('Required URL');
138+
await smartuiSnapshot(driver, 'Screenshot Name', options);
139+
```
140+
141+
</TabItem>
142+
143+
<TabItem value="SelectSelector" label="Select CSS Selector">
144+
145+
```js title="This is a sample for your webhook configuration for Javascript to select by CSS Selector"
146+
let options = {
147+
selectDOM: {
148+
cssSelector: ["CSS-Selector-1", "CSS-Selector-2"],
149+
}
150+
}
151+
await driver.get('Required URL');
152+
await smartuiSnapshot(driver, 'Screenshot Name', options);
153+
```
154+
</TabItem>
155+
</Tabs>

‎docs/smartui-handle-lazy-loading.md‎

Lines changed: 83 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,83 @@
1+
---
2+
id: smartui-handle-lazy-loading
3+
title: Handle Pages with Lazy Loading
4+
sidebar_label: Handle Lazy Loading
5+
description: SmartUI can now perform automated visual testing on pages that implement lazy loading.
6+
keywords:
7+
- lambdatest
8+
- smart ui
9+
- lazy loading
10+
- storybook
11+
url: https://www.lambdatest.com/support/docs/smartui-handle-lazy-loading/
12+
site_name: LambdaTest
13+
slug: smartui-handle-lazy-loading/
14+
---
15+
16+
<script type="application/ld+json"
17+
dangerouslySetInnerHTML={{ __html: JSON.stringify({
18+
"@context": "https://schema.org",
19+
"@type": "BreadcrumbList",
20+
"itemListElement": [{
21+
"@type": "ListItem",
22+
"position": 1,
23+
"name": "LambdaTest",
24+
"item": "https://www.lambdatest.com"
25+
},{
26+
"@type": "ListItem",
27+
"position": 2,
28+
"name": "Support",
29+
"item": "https://www.lambdatest.com/support/docs/"
30+
},{
31+
"@type": "ListItem",
32+
"position": 3,
33+
"name": "Lazy Loading",
34+
"item": "https://www.lambdatest.com/support/docs/smartui-handle-lazy-loading/"
35+
}]
36+
})
37+
}}
38+
></script>
39+
40+
If you encounter difficulties loading interactive elements that appear on scroll in full-page screenshots, consider functionally incorporating a full-page scroll into your script before capturing the screenshot. This approach ensures the elements load first, facilitating the screenshot processing.
41+
42+
```js Example for scrolling to bottom for lazy elements
43+
const { Builder, By, Key, until } = require('selenium-webdriver');
44+
const { smartuiSnapshot } = require('@lambdatest/selenium-driver');
45+
46+
(async function example() {
47+
let driver = await new Builder().forBrowser("chrome").build();
48+
49+
try {
50+
await driver.get("Required URL");
51+
async function quickScrollToBottom(lastPageWait) {
52+
try {
53+
let height = await driver.executeScript("return document.body.scrollHeight");
54+
let heightOfPage = parseInt(height, 10);
55+
let size = 200;
56+
let noOfLoop = Math.floor(heightOfPage / size);
57+
58+
for (let i = 1; i <= noOfLoop; i++) {
59+
await driver.executeScript(`window.scrollTo(${(i - 1) * size}, ${i * size})`);
60+
await new Promise(resolve => setTimeout(resolve, 1000));
61+
if (i === noOfLoop) {
62+
63+
await driver.executeScript(`window.scrollTo(${i * size}, ${heightOfPage})`);
64+
await new Promise(resolve => setTimeout(resolve, lastPageWait));
65+
}
66+
}
67+
68+
// Now scroll to the top
69+
await driver.executeScript("window.scrollTo(0,0)");
70+
await new Promise(resolve => setTimeout(resolve, 10000));
71+
console.log("Scroll Completed");
72+
} catch (e) {
73+
console.log("Got some errors" + e.toString());
74+
}
75+
}
76+
await quickScrollToBottom(100); //use wait time accordingly
77+
await smartuiSnapshot(driver, "Screenshot Name");
78+
} finally {
79+
await driver.quit();
80+
}
81+
})();
82+
83+
```

‎docs/smartui-handle-sticky-elements.md‎

Lines changed: 50 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,50 @@
1+
---
2+
id: smartui-handle-sticky-elements
3+
title: Handle Pages with Sticky Elements
4+
sidebar_label: Handle Sticky Elements
5+
description: SmartUI can now perform automated visual testing on pages that implement lazy loading.
6+
keywords:
7+
- lambdatest
8+
- smart ui
9+
- sticky-elements
10+
- storybook
11+
url: https://www.lambdatest.com/support/docs/smartui-handle-sticky-elements/
12+
site_name: LambdaTest
13+
slug: smartui-handle-sticky-elements/
14+
---
15+
16+
<script type="application/ld+json"
17+
dangerouslySetInnerHTML={{ __html: JSON.stringify({
18+
"@context": "https://schema.org",
19+
"@type": "BreadcrumbList",
20+
"itemListElement": [{
21+
"@type": "ListItem",
22+
"position": 1,
23+
"name": "LambdaTest",
24+
"item": "https://www.lambdatest.com"
25+
},{
26+
"@type": "ListItem",
27+
"position": 2,
28+
"name": "Support",
29+
"item": "https://www.lambdatest.com/support/docs/"
30+
},{
31+
"@type": "ListItem",
32+
"position": 3,
33+
"name": "Sticky Elements",
34+
"item": "https://www.lambdatest.com/support/docs/smartui-handle-sticky-elements/"
35+
}]
36+
})
37+
}}
38+
></script>
39+
When conducting visual testing on web pages that contain sticky elements (such as headers, footers, or navigation bars), it's crucial to ensure that these elements do not cause false positives or inconsistencies in test results. Sticky elements, which remain fixed while scrolling through a page, can overlap or repeat in snapshots, leading to discrepancies in visual comparisons. LambdaTest Smart UI provides a solution to handle sticky elements effectively, ensuring consistent and accurate visual testing.
40+
41+
## How LambdaTest Smart UI Handles Sticky Elements
42+
- **Modifying Sticky Elements in the DOM:**
43+
LambdaTest Smart UI automatically adjusts the positions of sticky elements in the Document Object Model (DOM) before capturing a screenshot. This modification ensures that sticky elements are displayed only once in the visual snapshots, typically at their original position (like the top of the page) where they first appear.
44+
- **Rendering Full-Page Screenshots:**
45+
When taking full-page screenshots, LambdaTest Smart UI renders the page as it would appear when initially loaded in the browser. In this state, sticky elements (e.g., headers or footers) are positioned only at the top or bottom of the page, and they do not repeat throughout the rest of the page's length.
46+
47+
## Benefits of Handling Sticky Elements
48+
- **Consistency Across Snapshots:** Ensures that sticky elements do not create unnecessary discrepancies by appearing multiple times in a single snapshot.
49+
- **Reduces False Positives:** Helps prevent false positives caused by sticky elements moving or overlapping with other content during scrolling.
50+
- **Stable Visual Baseline:** Provides a stable visual baseline by keeping the sticky elements static, which aids in accurate visual comparisons.

0 commit comments

Comments
 (0)