General webpage functionality : Check spacing between elements

Enough space should be provided between field labels, columns, rows, error messages, etc.

Language: Java

Framework: Selenium 4

copy
1/​/​Assuming that we have already launched the website 23import org.openqa.selenium.WebDriver;4import org.openqa.selenium.chrome.ChromeDriver;5import org.openqa.selenium.By;67public class GeneralWebPageFunctionality {89 public static void main(String[] args) {10 System.setProperty("webdriver.chrome.driver", "/​path/​to/​chromedriver");11 WebDriver driver = new ChromeDriver();1213 /​/​Opening the website under test14 driver.get("https:/​/​www.example.com");1516 /​/​Assuming that the labels are in a <label> tag, columns and rows are in <div> tag and error messages are in <span> tag17 18 /​/​Field label spacing check19 String labelSpacing = driver.findElement(By.xpath("/​/​label")).getCssValue("margin-bottom");20 System.out.println("Label spacing: " + labelSpacing);21 22 /​/​Column spacing check23 String colSpacing = driver.findElement(By.xpath("/​/​div")).getCssValue("padding-right");24 System.out.println("Column spacing: " + colSpacing);25 26 /​/​Row spacing check27 String rowSpacing = driver.findElement(By.xpath("/​/​div")).getCssValue("margin-bottom");28 System.out.println("Row spacing: " + rowSpacing);2930 /​/​Error message spacing check31 String errorSpacing = driver.findElement(By.xpath("/​/​span")).getCssValue("margin-top");32 System.out.println("Error message spacing: " + errorSpacing);33 34 /​/​Closing the browser35 driver.close();36 } 37}3839/​/​Assuming that we have to connect to the remote client with desired capabilities4041import org.openqa.selenium.WebDriver;42import org.openqa.selenium.SafariDriver;43import org.openqa.selenium.remote.DesiredCapabilities;44import org.openqa.selenium.remote.RemoteWebDriver;45import java.net.URL;4647public class GeneralWebPageFunctionality {4849 public static void main(String[] args) {50 51 /​/​Setting the desired capabilities52 DesiredCapabilities capabilities = new DesiredCapabilities();53 capabilities.setCapability("browserName", "safari");54 capabilities.setCapability("browserVersion", "14.0");55 capabilities.setCapability("platform", "macOS 11.2");5657 try {58 WebDriver driver = new RemoteWebDriver(new URL("http:/​/​<remote-ip>:<port>/​wd/​hub"), capabilities);5960 /​/​Opening the website under test61 driver.get("https:/​/​www.example.com");6263 /​/​Assuming that the labels are in a <label> tag, columns and rows are in <div> tag and error messages are in <span> tag6465 /​/​Field label spacing check66 String labelSpacing = driver.findElement(By.xpath("/​/​label")).getCssValue("margin-bottom");67 System.out.println("Label spacing: " + labelSpacing);6869 /​/​Column spacing check70 String colSpacing = driver.findElement(By.xpath("/​/​div")).getCssValue("padding-right");71 System.out.println("Column spacing: " + colSpacing);7273 /​/​Row spacing check74 String rowSpacing = driver.findElement(By.xpath("/​/​div")).getCssValue("margin-bottom");75 System.out.println("Row spacing: " + rowSpacing);7677 /​/​Error message spacing check78 String errorSpacing = driver.findElement(By.xpath("/​/​span")).getCssValue("margin-top");79 System.out.println("Error message spacing: " + errorSpacing);8081 /​/​Closing the browser82 driver.quit();83 } catch (Exception e) {84 System.out.println("Error during remote WebDriver creation: " + e.getMessage());85 }86 } 87}

Language: Python

Framework: Selenium 4

copy
1# Assumptions:2# - The web page is live and accessible3# - The web page is loaded correctly and all elements are visible4# - There is a web driver available and installed for local use56# Selenium 4 Python code to implement test case for checking spacing between elements78from selenium import webdriver9from selenium.webdriver.common.desired_capabilities import DesiredCapabilities1011# Local driver implementation12driver = webdriver.Chrome()1314# Remote driver implementation15# desired_capabilities = DesiredCapabilities.CHROME.copy()16# driver = webdriver.Remote(17# command_executor='http:/​/​127.0.0.1:4444/​wd/​hub',18# desired_capabilities=desired_capabilities19# )2021# Navigate to the web page to test22driver.get("http:/​/​url-to-webpage.com")2324# Assert that there is enough vertical space between field labels25# Assuming correct spacing is at least 20 pixels26label_spacing = driver.execute_script(27 "return parseFloat(getComputedStyle(document.querySelector('.label-class')).marginBottom) || 0"28)29assert label_spacing >= 20, "Label spacing is too small"3031# Assert that there is enough horizontal space between columns32# Assuming correct spacing is at least 40 pixels33column_spacing = driver.execute_script(34 "return parseFloat(getComputedStyle(document.querySelector('.column-class')).marginRight) || 0"35)36assert column_spacing >= 40, "Column spacing is too small"3738# Assert that there is enough vertical space between rows39# Assuming correct spacing is at least 20 pixels40row_spacing = driver.execute_script(41 "return parseFloat(getComputedStyle(document.querySelector('.row-class')).marginBottom) || 0"42)43assert row_spacing >= 20, "Row spacing is too small"4445# Assert that there is enough vertical space between error messages46# Assuming correct spacing is at least 10 pixels47error_spacing = driver.execute_script(48 "return parseFloat(getComputedStyle(document.querySelector('.error-class')).marginBottom) || 0"49)50assert error_spacing >= 10, "Error message spacing is too small"5152# Close the driver53driver.quit()

Language: Javascript

Framework: Cypress

copy
1/​/​ Assumptions:2/​/​ 1. The webpage has various elements like field labels, columns, rows, error messages3/​/​ 2. Sufficient space is required between these elements4/​/​ 3. Cypress is installed in the system56describe('General webpage functionality', function() {7 it('should have enough space between elements', function() {8 cy.visit('https:/​/​www.example.com') /​/​ replace with the webpage URL9 cy.get('label').each(($label) => {10 expect($label).to.have.css('margin-bottom', '20px') /​/​ replace 20px with the required margin11 })12 /​/​ Add similar checks for other elements like columns, rows, error messages, etc.13 })14})1516/​/​ To connect to a remote client with desired capabilities, replace the `cy.visit` with the following code1718cy.visit('https:/​/​www.example.com', {19 browser: {20 name: "chrome",21 version: "latest"22 },23 viewportHeight: 1080,24 viewportWidth: 192025}) /​/​ replace the browser name, version and viewport dimensions as required.

Disclaimer: Following code snippets and related information have been sourced from GitHub and/or generated using AI code generation tools. LambdaTest takes no responsibility in the accuracy of the code and is not liable for any damages.

Accelerate Your Automation Test Cycles With LambdaTest

Leverage LambdaTest’s cloud-based platform to execute your automation tests in parallel and trim down your test execution time significantly. Your first 100 automation testing minutes are on us.

Try LambdaTest

Power Your Software Testing with AI and cloud

Test Intelligently and ship faster. Deliver unparalleled digital experiences for real world enterprises.

Start Free Testing