Skip to content

Commit 776281b

Browse files
surishubhamsurishubham
authored
Merge pull request #1534 from surishubham/main
Stage PRs 1505, 31
2 parents b33f317 + 73db84f commit 776281b

File tree

6 files changed

+201
-3
lines changed

6 files changed

+201
-3
lines changed

‎assets/images/smart-visual-testing/layout/layout-amazon.webp

207 KB
Binary file not shown.

‎assets/images/smart-visual-testing/layout/localisation-netflix.webp

139 KB
Binary file not shown.

‎assets/images/smart-visual-testing/layout/smartignore-amazon.webp

213 KB
Binary file not shown.

‎docs/smartui-layout-comparison.md

+198
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,198 @@
1+
---
2+
id: smartui-layout-testing
3+
title: Layout Comparison in SmartUI SDK
4+
sidebar_label: Layout Testing (Beta)
5+
description: Learn how to use SmartUI SDK's layout testing feature to verify only the layout structure of your pages while ignoring content and style changes
6+
keywords:
7+
- layout comparison
8+
- visual regression testing
9+
- ignore layout differences
10+
- smartui sdk
11+
- visual testing
12+
- layout structure
13+
- element positions
14+
- layout testing
15+
url: https://www.lambdatest.com/support/docs/smartui-layout-comparison/
16+
site_name: LambdaTest
17+
slug: smartui-layout-testing/
18+
---
19+
20+
21+
Layout testing is a specialized approach to visual testing that focuses on verifying the structural integrity and arrangement of UI elements rather than their specific content or styling. It ensures that your application's visual hierarchy and element positioning remain consistent across different environments and updates.
22+
23+
The example below demonstrates localisation testing, one of the major use cases of layout testing, where a webpage is tested across languages and locales.
24+
25+
<img loading="lazy" src={require('../assets/images/smart-visual-testing/layout/localisation-netflix.webp').default} alt="cmd" width="768" height="373" className="doc_img"/>
26+
27+
### Why Layout Testing Matters
28+
29+
1. **Structural Consistency**: Ensures that UI elements maintain their intended positions and relationships, regardless of content changes or style updates.
30+
31+
2. **Cross-Environment Reliability**: Validates that your application's layout remains intact across different:
32+
- Operating systems
33+
- Browsers
34+
- Devices
35+
- Screen sizes
36+
- Viewport dimensions
37+
38+
3. **Design System Compliance**: Helps maintain consistency with your design system by verifying that components follow established layout patterns.
39+
40+
# What Layout Comparison Ignores
41+
42+
When using layout comparison, the following aspects are ignored:
43+
44+
1. **Text Content**: Changes in text content are not considered in the comparison
45+
2. **Color Values**: Differences in color schemes or individual color values are ignored
46+
3. **Style Properties**: Changes in CSS properties like font size, padding, margins, etc. are not compared
47+
4. **Image Content**: Differences in image content are ignored, only their position and size are considered
48+
49+
## Visual Diffs vs. Layout Diffs
50+
51+
52+
Understanding the difference between content and layout is crucial for effective visual testing:
53+
54+
- **Visual Diffs** refer to the actual information that users interact with on a webpage, such as text, images, videos, and other elements that convey your message.
55+
In the example below, you can see the visual differences between the baseline and comparison screenshot using Smart Ignore Diff Option.
56+
57+
<img loading="lazy" src={require('../assets/images/smart-visual-testing/layout/smartignore-amazon.webp').default} alt="cmd" width="768" height="373" className="doc_img"/>
58+
59+
- **Layout** pertains to the arrangement and presentation of this content, including the positioning, styling, and structuring of elements. The goal of layout design is to ensure that content is visually appealing and well-organized.
60+
In the example below, you can see the layout differences between the baseline and comparison screenshot using Layout Diff Option.
61+
62+
<img loading="lazy" src={require('../assets/images/smart-visual-testing/layout/layout-amazon.webp').default} alt="cmd" width="768" height="373" className="doc_img"/>
63+
64+
SmartUI's layout comparison feature allows you to focus specifically on layout differences while ignoring content changes, giving you more precise control over your visual testing process.
65+
66+
# Layout Comparison in SmartUI SDK
67+
68+
> **Beta Feature Notice**: The Layout Comparison feature is currently in beta and is a work in progress based on user feedback. To use this feature, you need to get it enabled by contacting our support team at [email protected]. Using this feature without getting it enabled will not work.
69+
70+
71+
## Prerequisites
72+
73+
Before using the Layout Comparison feature, ensure you meet the following requirements:
74+
75+
- SmartUI CLI version `4.1.8` or above is installed
76+
- The feature is only supported when using the `smartui exec` (smartUISnapshot) command
77+
- The feature must be enabled by contacting [email protected]
78+
79+
## How to Use Layout Comparison with SmartUI
80+
81+
To use the layout comparison feature, you need to set the `ignoreType` option to `"layout"` when taking a screenshot:
82+
83+
import Tabs from '@theme/Tabs';
84+
import TabItem from '@theme/TabItem';
85+
86+
<Tabs>
87+
<TabItem value="javascript" label="JavaScript" default>
88+
```javascript
89+
// Set options to focus only on layout structure
90+
let options = {
91+
ignoreType: ["layout"]
92+
}
93+
94+
// Take a screenshot with layout comparison enabled
95+
await smartuiSnapshot(driver, "ScreenshotName", options);
96+
```
97+
</TabItem>
98+
<TabItem value="java" label="Java">
99+
```java
100+
// Set options to focus only on layout structure
101+
Map<String, Object> options = new HashMap<>();
102+
options.put("ignoreType", Arrays.asList("layout"));
103+
104+
// Take a screenshot with layout comparison enabled
105+
smartuiSnapshot(driver, "ScreenshotName", options);
106+
```
107+
</TabItem>
108+
<TabItem value="python" label="Python">
109+
```python
110+
# Set options to focus only on layout structure
111+
options = {
112+
"ignoreType": ["layout"]
113+
}
114+
115+
# Take a screenshot with layout comparison enabled
116+
smartui_snapshot(driver, "ScreenshotName", options)
117+
```
118+
</TabItem>
119+
<TabItem value="csharp" label="C#">
120+
```csharp
121+
// Set options to focus only on layout structure
122+
var options = new Dictionary<string, object>
123+
{
124+
{ "ignoreType", new List<string> { "layout" } }
125+
};
126+
127+
// Take a screenshot with layout comparison enabled
128+
await SmartUI.Snapshot(driver, "ScreenshotName", options);
129+
```
130+
</TabItem>
131+
<TabItem value="ruby" label="Ruby">
132+
```ruby
133+
# Set options to focus only on layout structure
134+
options = {
135+
ignoreType: ["layout"]
136+
}
137+
138+
# Take a screenshot with layout comparison enabled
139+
smartui_snapshot(driver, "ScreenshotName", options)
140+
```
141+
</TabItem>
142+
</Tabs>
143+
144+
## Known Limitations
145+
146+
The Layout Comparison feature has the following limitations:
147+
148+
- Not supported with Fetch APIs
149+
- Not supported with Slack, Email, and GitHub integrations
150+
- Performance may vary based on the complexity of the page structure
151+
152+
153+
## Use Cases for Layout Comparison
154+
155+
The layout comparison feature is particularly valuable in the following scenarios:
156+
157+
1. **Component Library Development**: When developing reusable components, you may want to verify that the layout structure remains consistent while allowing for content and style variations.
158+
159+
2. **Responsive Design Testing**: When testing responsive layouts across different screen sizes, you may want to focus on ensuring the layout structure adapts correctly while ignoring specific content or style changes.
160+
161+
3. **Design System Implementation**: When implementing a design system, you may need to verify that the layout structure follows the established patterns while allowing for content and style variations.
162+
163+
4. **A/B Testing**: During A/B testing of different layouts, you may want to compare the structural integrity while ignoring the intentional content and style differences between variants.
164+
165+
5. **Multi-language Testing**: When testing websites in different languages, you may want to verify that the layout structure remains consistent despite text length variations.
166+
167+
6. **Cross-Environment Testing**: Ensure that your page structure remains intact across different operating systems, browsers, devices, viewport sizes, and orientations.
168+
169+
170+
## Example Implementation
171+
172+
Here's a complete example showing how to implement layout comparison in a test:
173+
174+
```javascript
175+
describe('Layout Structure Test', () => {
176+
it('should verify layout structure while ignoring content and style changes', async () => {
177+
// Navigate to the page
178+
await driver.get('https://example.com');
179+
180+
// Wait for layout to stabilize (important for dynamic content)
181+
await driver.wait(until.elementLocated(By.cssSelector('.main-content')), 5000);
182+
183+
// Configure options to focus only on layout structure
184+
let options = {
185+
ignoreType: "layout"
186+
};
187+
188+
// Take screenshot with layout comparison
189+
await smartuiSnapshot(driver, "HomePageLayout", options);
190+
});
191+
});
192+
```
193+
194+
## Additional Resources
195+
196+
- [SmartUI SDK Documentation](/docs/smartui-sdk-config-options)
197+
- [Visual Regression Testing Guide](/docs/smart-visual-testing)
198+
- [Comparison Settings Documentation](/docs/test-settings-options)

‎docs/smartui-smartignore.md

+1-1
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@
22
id: smartui-smartignore
33
title: Smart Ignore (Beta)
44
hide_title: true
5-
sidebar_label: Smart Ignore (Beta)
5+
sidebar_label: Smart Ignore
66
description: Learn how to use our new comparison engine Smart Ignore to efficiently ignore noise, layout shifts and displacement differences in your visual tests
77
keywords:
88
- hide displacement diffs

‎sidebars.js

+2-2
Original file line numberDiff line numberDiff line change
@@ -2959,8 +2959,8 @@ module.exports = {
29592959
{
29602960
type: "category",
29612961
collapsed: true,
2962-
label: "Difference Option",
2963-
items: ["smartui-smartignore"]
2962+
label: "Difference Options",
2963+
items: ["smartui-smartignore","smartui-layout-testing"]
29642964
},
29652965
{
29662966
type: "category",

0 commit comments

Comments
 (0)