| id | title | sidebar_label | description | keywords | url | slug | ||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
html-dom-smartui-options |
Handling Dynamic Data with DOM Configuration and Options for SmartUI |
Handling Dynamic Data |
In this documentation, learn how to handle dynamic content of your web pages for visual regression. |
|
html-dom-smartui-options/ |
import Tabs from '@theme/Tabs'; import TabItem from '@theme/TabItem'; import NewTag from '../src/component/newTag';
<script type="application/ld+json" dangerouslySetInnerHTML={{ __html: JSON.stringify({ "@context": "https://schema.org", "@type": "BreadcrumbList", "itemListElement": [{ "@type": "ListItem", "position": 1, "name": "LambdaTest", "item": "https://www.lambdatest.com" },{ "@type": "ListItem", "position": 2, "name": "Support", "item": "https://www.lambdatest.com/support/docs/" },{ "@type": "ListItem", "position": 3, "name": "Smart Visual Testing", "item": "https://www.lambdatest.com/support/docs/smart-ui-cypress/" }] }) }} ></script>
<img loading="lazy" src={require('../assets/images/smart-visual-testing/Ignored-DOM-Sample.webp').default} alt="cmd" width="768" height="373" className="doc_img"/> Using the LambdaTest platform, perform regression testing in just one click and explore various possible solutions for grouping your screenshots into different builds and map as per your testing suite needs.
In case if you have any dynamic elements that are not in the same position across test runs, you can ignore / select a specific area to be removed from the comparison.
The following are the different options which are currently supported:
| Key | Description |
|---|---|
screenshotName (string) |
Specify a name for the screenshot in your tests to match the same screenshot with the name from your baseline |
fullPage (boolean) |
Specify true if you want to take a Full Page Screenshot and false for viewport screenshots; fullPage: true is currently only supported for Chrome |
ignoreDOM (object) |
Specify one or a combination of selectors based on the HTML DOM ID, CSS class, CSS selector or Xpath used by your webpage that should be excluded from the comparison |
selectDOM (object) |
Specify one or a combination of selectors based on the HTML DOM ID, CSS class, CSS selector or XPath used by your webpage that should be included in the comparison |
let config = {
screenshotName: "Ignore-ID",
fullPage: false, //You can make this property as true in case of Chrome browser
ignoreDOM: {
id: ["ID-1", "ID-2"], // Ignoring elements by ID, you can ignore multiple at once
},
};
await driver.executeScript("smartui.takeScreenshot", config);let config = {
screenshotName: "Ignore-Class",
fullPage: false, //You can make this property as true in case of Chrome browser
ignoreDOM: {
class: ["Class-1", "Class-2"], // Ignoring elements by class, you can ignore multiple at once
},
};
await driver.executeScript("smartui.takeScreenshot", config);let config = {
screenshotName: "Ignore-XPath",
fullPage: false, //You can make this property as true in case of Chrome browser
ignoreDOM: {
xpath: ["Xpath-1", "Xpath-2"], // Ignoring elements by XPath, you can ignore multiple at once
},
};
await driver.executeScript("smartui.takeScreenshot", config);let config = {
screenshotName: "Ignore-cssSelector",
fullPage: false, //You can make this property as true in case of Chrome browser
ignoreDOM: {
cssSelector: ["CSS-Selector-1", "CSS-Selector-2"], // Ignoring elements by CSS selector, you can ignore multiple at once
},
};
await driver.executeScript("smartui.takeScreenshot", config);let config = {
screenshotName: "Select-ID",
fullPage: false, //You can make this property as true in case of Chrome browser
selectDOM: {
id: ["ID-1", "ID-2"], // Selecting elements by ID, you can select multiple at once
},
};
await driver.executeScript("smartui.takeScreenshot", config);let config = {
screenshotName: "Select-Class",
fullPage: false, //You can make this property as true in case of Chrome browser
selectDOM: {
class: ["Class-1", "Class-2"], // Selecting elements by class, you can select multiple at once
},
};
await driver.executeScript("smartui.takeScreenshot", config);let config = {
screenshotName: "Select-XPath",
fullPage: false, //You can make this property as true in case of Chrome browser
selectDOM: {
xpath: ["Xpath-1", "Xpath-2"], // Selecting elements by XPath, you can select multiple at once
},
};
await driver.executeScript("smartui.takeScreenshot", config);let config = {
screenshotName: "Select-cssSelector",
fullPage: false, //You can make this property as true in case of Chrome browser
selectDOM: {
cssSelector: ["CSS-Selector-1", "CSS-Selector-2"], // Selecting elements by CSS selector, you can select multiple at once
},
};
await driver.executeScript("smartui.takeScreenshot", config);The following are the different options which are currently supported:
| Key | Description |
|---|---|
screenshotName (string) |
Specify a name for the screenshot in your tests to match the same screenshot with the name from your baseline |
ignoreDOM (object) |
Specify a selector based on the HTML DOM ID, CSS class or CSS selector used by your webpage that should be excluded from the comparison |
selectDOM (object) |
Specify a selector based on the HTML DOM ID, CSS class or CSS selector used by your webpage that should be included in the comparison |
ignoreXPath (object) |
Specify a selector based on theXPath of the element that should be excluded from the comparison |
selectXPath (object) |
Specify a selector based on theXPath of the element that should be included in the comparison |
await page.evaluate((_) => {},
`lambdatest_action: ${JSON.stringify({ action: 'smartui.takeScreenshot', arguments: { fullPage: false, screenshotName: 'dom-screenshot', ignoreDOM : {id:["HTML DOM Id"]} }})}`)await page.evaluate((_) => {},
`lambdatest_action: ${JSON.stringify({ action: 'smartui.takeScreenshot', arguments: { fullPage: false, screenshotName: 'dom-screenshot', ignoreDOM : {class:["<CSS Class>"]} }})}`)await page.evaluate((_) => {},
`lambdatest_action: ${JSON.stringify({ action: 'smartui.takeScreenshot', arguments: { fullPage: false, screenshotName: 'dom-screenshot', ignoreXPath: ['Xpath-1', 'Xpath-2']} })}`)await page.evaluate((_) => {},
`lambdatest_action: ${JSON.stringify({ action: 'smartui.takeScreenshot', arguments: { fullPage: false, screenshotName: 'dom-screenshot', ignoreDOM : {cssSelector:["<CSS Selector>"]} }})}`)await page.evaluate((_) => {},
`lambdatest_action: ${JSON.stringify({ action: 'smartui.takeScreenshot', arguments: { fullPage: false, screenshotName: 'dom-screenshot', selectDOM : {id:["HTML DOM Id"]} }})}`)await page.evaluate((_) => {},
`lambdatest_action: ${JSON.stringify({ action: 'smartui.takeScreenshot', arguments: { fullPage: false, screenshotName: 'dom-screenshot', selectDOM : {class:["<CSS Class>"]} }})}`)await page.evaluate((_) => {},
`lambdatest_action: ${JSON.stringify({ action: 'smartui.takeScreenshot', arguments: { fullPage: false, screenshotName: 'dom-screenshot', selectXPath: ['Xpath-1', 'Xpath-2']} })}`)await page.evaluate((_) => {},
`lambdatest_action: ${JSON.stringify({ action: 'smartui.takeScreenshot', arguments: { fullPage: false, screenshotName: 'dom-screenshot', selectDOM : {cssSelector:["<CSS Selector>"]} }})}`)The following are the different options which are currently supported:
| Key | Description |
|---|---|
screenshotName (string) |
Specify a name for the screenshot in your tests to match the same screenshot with the name from your baseline |
ignoreDOM (object) |
Specify a selector based on the HTML DOM ID, CSS class or CSS selector used by your webpage that should be excluded from the comparison |
selectDOM (object) |
Specify a selector based on the HTML DOM ID, CSS class or CSS selector used by your webpage that should be included in the comparison |
ignoreXPath (object) |
Specify a selector based on theXPath of the element that should be excluded from the comparison |
selectXPath (object) |
Specify a selector based on theXPath of the element that should be included in the comparison |
await page.evaluate((_) => {},
`lambdatest_action: ${JSON.stringify({ action: 'smartui.takeScreenshot', arguments: { fullPage: false, screenshotName: 'dom-screenshot', ignoreDOM : {id:["HTML DOM Id"]} }})}`)await page.evaluate((_) => {},
`lambdatest_action: ${JSON.stringify({ action: 'smartui.takeScreenshot', arguments: { fullPage: false, screenshotName: 'dom-screenshot', ignoreDOM : {class:["<CSS Class>"]} }})}`)await page.evaluate((_) => {},
`lambdatest_action: ${JSON.stringify({ action: 'smartui.takeScreenshot', arguments: { fullPage: false, screenshotName: 'dom-screenshot', ignoreXPath: ['Xpath-1', 'Xpath-2']} })}`)await page.evaluate((_) => {},
`lambdatest_action: ${JSON.stringify({ action: 'smartui.takeScreenshot', arguments: { fullPage: false, screenshotName: 'dom-screenshot', ignoreDOM : {cssSelector:["<CSS Selector>"]} }})}`)await page.evaluate((_) => {},
`lambdatest_action: ${JSON.stringify({ action: 'smartui.takeScreenshot', arguments: { fullPage: false, screenshotName: 'dom-screenshot', selectDOM : {id:["HTML DOM Id"]} }})}`)await page.evaluate((_) => {},
`lambdatest_action: ${JSON.stringify({ action: 'smartui.takeScreenshot', arguments: { fullPage: false, screenshotName: 'dom-screenshot', selectDOM : {class:["<CSS Class>"]} }})}`)await page.evaluate((_) => {},
`lambdatest_action: ${JSON.stringify({ action: 'smartui.takeScreenshot', arguments: { fullPage: false, screenshotName: 'dom-screenshot', selectXPath: ['Xpath-1', 'Xpath-2']} })}`)await page.evaluate((_) => {},
`lambdatest_action: ${JSON.stringify({ action: 'smartui.takeScreenshot', arguments: { fullPage: false, screenshotName: 'dom-screenshot', selectDOM : {cssSelector:["<CSS Selector>"]} }})}`)