Skip to content

Commit 1d6f017

Browse files
surishubhamsurishubham
authored
Merge pull request LambdaTest#1505 from JeeveshJ7/stage
Add Layout Testing Documentation
2 parents f2f0bb4 + f44e00e commit 1d6f017

File tree

3 files changed

+174
-3
lines changed

3 files changed

+174
-3
lines changed

‎docs/smartui-layout-comparison.md‎

Lines changed: 171 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,171 @@
1+
---
2+
id: smartui-layout-testing
3+
title: Layout Comparison in SmartUI SDK
4+
sidebar_label: Layout Testing
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+
# Layout Comparison in SmartUI SDK
21+
22+
The layout comparison feature in SmartUI SDK allows you to verify only the layout structure of your pages while ignoring content and style changes. This is particularly useful for frontend developers who need to ensure that the structural integrity of their UI remains consistent across different versions or environments.
23+
24+
## How to Use Layout Comparison
25+
26+
To use the layout comparison feature, you need to set the `ignoreType` option to `"layout"` when taking a screenshot:
27+
28+
import Tabs from '@theme/Tabs';
29+
import TabItem from '@theme/TabItem';
30+
31+
<Tabs>
32+
<TabItem value="javascript" label="JavaScript" default>
33+
```javascript
34+
// Set options to focus only on layout structure
35+
let options = {
36+
ignoreType: "layout"
37+
};
38+
39+
// Take a screenshot with layout comparison enabled
40+
await smartuiSnapshot(driver, "ScreenshotName", options);
41+
```
42+
</TabItem>
43+
<TabItem value="java" label="Java">
44+
```java
45+
// Set options to focus only on layout structure
46+
SmartUIOptions options = new SmartUIOptions();
47+
options.IgnoreType("layout");
48+
49+
// Take a screenshot with layout comparison enabled
50+
smartuiSnapshot(driver, "ScreenshotName", options);
51+
```
52+
</TabItem>
53+
<TabItem value="python" label="Python">
54+
```python
55+
# Set options to focus only on layout structure
56+
options = {
57+
"ignoreType": "layout"
58+
}
59+
60+
# Take a screenshot with layout comparison enabled
61+
smartui_snapshot(driver, "ScreenshotName", options)
62+
```
63+
</TabItem>
64+
<TabItem value="csharp" label="C#">
65+
```csharp
66+
// Set options to focus only on layout structure
67+
var options = new SmartUIOptions
68+
{
69+
IgnoreType = "layout"
70+
};
71+
72+
// Take a screenshot with layout comparison enabled
73+
await SmartUI.Snapshot(driver, "ScreenshotName", options);
74+
```
75+
</TabItem>
76+
<TabItem value="ruby" label="Ruby">
77+
```ruby
78+
# Set options to focus only on layout structure
79+
options = {
80+
ignoreType: "layout"
81+
}
82+
83+
# Take a screenshot with layout comparison enabled
84+
smartui_snapshot(driver, "ScreenshotName", options)
85+
```
86+
</TabItem>
87+
</Tabs>
88+
89+
This configuration tells SmartUI to focus only on the layout structure while comparing screenshots, ignoring content and style changes.
90+
91+
## What Layout Comparison Verifies
92+
93+
The layout comparison feature specifically focuses on:
94+
95+
1. **Element Positions**: The relative positioning of elements compared to their siblings
96+
2. **Parent-Child Relationships**: The hierarchical structure of elements in the DOM
97+
3. **Basic Structural Hierarchy**: The overall layout structure of the page
98+
99+
## What Layout Comparison Ignores
100+
101+
When using layout comparison, the following aspects are ignored:
102+
103+
1. **Text Content**: Changes in text content are not considered in the comparison
104+
2. **Color Values**: Differences in color schemes or individual color values are ignored
105+
3. **Style Properties**: Changes in CSS properties like font size, padding, margins, etc. are not compared
106+
4. **Image Content**: Differences in image content are ignored, only their position and size are considered
107+
108+
## Content vs. Layout Diffs
109+
110+
Understanding the difference between content and layout is crucial for effective visual testing:
111+
112+
- **Content** refers to the actual information that users interact with on a webpage, such as text, images, videos, and other elements that convey your message.
113+
114+
- **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.
115+
116+
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.
117+
118+
## Use Cases for Layout Comparison
119+
120+
The layout comparison feature is particularly valuable in the following scenarios:
121+
122+
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.
123+
124+
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.
125+
126+
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.
127+
128+
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.
129+
130+
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.
131+
132+
6. **Cross-Environment Testing**: Ensure that your page structure remains intact across different operating systems, browsers, devices, viewport sizes, and orientations.
133+
134+
## Validations
135+
136+
When using layout comparison, SmartUI performs the following validations:
137+
138+
1. **Layout Structure Extraction**: The system extracts the layout structure from the page
139+
2. **Position Calculations**: Accurate calculation of element positions relative to each other
140+
3. **Relative Positioning**: Preservation of relative positioning between elements
141+
4. **Viewport Considerations**: Proper handling of viewport dimensions and scrolling
142+
143+
## Example Implementation
144+
145+
Here's a complete example showing how to implement layout comparison in a test:
146+
147+
```javascript
148+
describe('Layout Structure Test', () => {
149+
it('should verify layout structure while ignoring content and style changes', async () => {
150+
// Navigate to the page
151+
await driver.get('https://example.com');
152+
153+
// Wait for layout to stabilize (important for dynamic content)
154+
await driver.wait(until.elementLocated(By.cssSelector('.main-content')), 5000);
155+
156+
// Configure options to focus only on layout structure
157+
let options = {
158+
ignoreType: "layout"
159+
};
160+
161+
// Take screenshot with layout comparison
162+
await smartuiSnapshot(driver, "HomePageLayout", options);
163+
});
164+
});
165+
```
166+
167+
## Additional Resources
168+
169+
- [SmartUI SDK Documentation](/docs/smartui-sdk-config-options)
170+
- [Visual Regression Testing Guide](/docs/smart-visual-testing)
171+
- [Comparison Settings Documentation](/docs/test-settings-options)

‎docs/smartui-smartignore.md‎

Lines changed: 1 addition & 1 deletion
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‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -2954,8 +2954,8 @@ module.exports = {
29542954
{
29552955
type: "category",
29562956
collapsed: true,
2957-
label: "Difference Option",
2958-
items: ["smartui-smartignore"]
2957+
label: "Difference Options",
2958+
items: ["smartui-smartignore","smartui-layout-testing"]
29592959
},
29602960
{
29612961
type: "category",

0 commit comments

Comments
 (0)