General webpage functionality : Verify font style and formatting

Font size, style, and color for headline, description text, labels, infield data, and grid info should be standard as specified in SRS.

Language: Java

Framework: Selenium 4

copy
1/​/​Assuming we have already launched the web page and are on the intended screen23import org.openqa.selenium.By;4import org.openqa.selenium.WebElement;5import org.openqa.selenium.WebDriver;6import org.openqa.selenium.chrome.ChromeDriver;7import org.openqa.selenium.chrome.ChromeOptions;89public class WebpageFunctionalityTest {1011 public static void main(String[] args) {12 13 /​/​to use local chrome driver14 System.setProperty("webdriver.chrome.driver", "<path_to_chrome_driver>/​chromedriver"); /​/​example: "/​Users/​username/​tools/​chromedriver"15 16 /​/​to connect to remote client with desired capabilities17 ChromeOptions options = new ChromeOptions();18 options.setCapability("platform", "Windows 10");19 options.setCapability("version", "89.0");2021 /​/​ Initialize the Chrome browser driver22 WebDriver driver = new ChromeDriver(options);23 24 /​/​Navigate to the webpage25 driver.get("<URL_of_web_page>"); /​/​example: "https:/​/​www.example.com"26 27 /​/​Locate the headline element and verify the font style, size and color28 WebElement headline = driver.findElement(By.cssSelector("<headline_css_selector>")); /​/​example: "h1.main-heading"29 String headlineFontStyle = headline.getCssValue("font-style");30 String headlineFontSize = headline.getCssValue("font-size");31 String headlineColor = headline.getCssValue("color");32 33 /​/​Verify font style, size and color of the headline34 if((headlineFontStyle.equals("<expected_headline_font_style>") && headlineFontSize.equals("<expected_headline_font_size>") && headlineColor.equals("<expected_headline_color>"))){35 System.out.println("Headline font style, size, and color are as expected.");36 }37 else{38 System.out.println("Headline font style, size, and color are not as expected.");39 }40 41 /​/​Locate the description text element and verify the font style, size and color42 WebElement descriptionText = driver.findElement(By.cssSelector("<description_text_css_selector>")); /​/​example: "p.description-text"43 String descriptionTextFontStyle = descriptionText.getCssValue("font-style");44 String descriptionTextFontSize = descriptionText.getCssValue("font-size");45 String descriptionTextColor = descriptionText.getCssValue("color");46 47 /​/​Verify font style, size and color of the description text48 if((descriptionTextFontStyle.equals("<expected_description_text_font_style>") && descriptionTextFontSize.equals("<expected_description_text_font_size>") && descriptionTextColor.equals("<expected_description_text_color>"))){49 System.out.println("Description text font style, size, and color are as expected.");50 }51 else{52 System.out.println("Description text font style, size, and color are not as expected.");53 }54 55 /​/​Locate the label element and verify the font style, size and color56 WebElement label = driver.findElement(By.cssSelector("<label_css_selector>")); /​/​example: "label"57 String labelFontStyle = label.getCssValue("font-style");58 String labelFontSize = label.getCssValue("font-size");59 String labelColor = label.getCssValue("color");60 61 /​/​Verify font style, size and color of the label62 if((labelFontStyle.equals("<expected_label_font_style>") && labelFontSize.equals("<expected_label_font_size>") && labelColor.equals("<expected_label_color>"))){63 System.out.println("Label font style, size, and color are as expected.");64 }65 else{66 System.out.println("Label font style, size, and color are not as expected.");67 }68 69 /​/​Locate the infield data element and verify the font style, size and color70 WebElement infieldData = driver.findElement(By.cssSelector("<infield_data_css_selector>")); /​/​example: "input"71 String infieldDataFontStyle = infieldData.getCssValue("font-style");72 String infieldDataFontSize = infieldData.getCssValue("font-size");73 String infieldDataColor = infieldData.getCssValue("color");74 75 /​/​Verify font style, size and color of the infield data76 if((infieldDataFontStyle.equals("<expected_infield_data_font_style>") && infieldDataFontSize.equals("<expected_infield_data_font_size>") && infieldDataColor.equals("<expected_infield_data_color>"))){77 System.out.println("Infield data font style, size, and color are as expected.");78 }79 else{80 System.out.println("Infield data font style, size, and color are not as expected.");81 }82 83 /​/​Locate the grid info element and verify the font style, size and color84 WebElement gridInfo = driver.findElement(By.cssSelector("<grid_info_css_selector>")); /​/​example: "table.grid-info"85 String gridInfoFontStyle = gridInfo.getCssValue("font-style");86 String gridInfoFontSize = gridInfo.getCssValue("font-size");87 String gridInfoColor = gridInfo.getCssValue("color");88 89 /​/​Verify font style, size and color of the grid info90 if((gridInfoFontStyle.equals("<expected_grid_info_font_style>") && gridInfoFontSize.equals("<expected_grid_info_font_size>") && gridInfoColor.equals("<expected_grid_info_color>"))){91 System.out.println("Grid info font style, size, and color are as expected.");92 }93 else{94 System.out.println("Grid info font style, size, and color are not as expected.");95 }96 97 /​/​Close the browser window98 driver.quit();99 }100}

Language: Python

Framework: Selenium 4

copy
1# Assumptions:2# 1. The SRS document contains the required font size, style, and color standard for each element.3# 2. The webpage is already loaded and the necessary elements are identified with unique locators.45# Import necessary libraries6from selenium import webdriver7from selenium.webdriver.common.desired_capabilities import DesiredCapabilities89# Create and initialize local driver for Chrome10driver = webdriver.Chrome()11# Commented code to connect to remote client with desired capabilities (uncomment if needed)12# options = webdriver.ChromeOptions()13# options.add_argument('--headless')14# capabilities = DesiredCapabilities.CHROME.copy()15# driver = webdriver.Remote(command_executor='http:/​/​127.0.0.1:4444/​wd/​hub',16# desired_capabilities=capabilities, options=options)1718# Navigate to the webpage19driver.get("https:/​/​www.example.com")2021# Define the expected font size, style, and color for each element22headline_font = "24px Arial"23headline_color = "#000000"24description_font = "16px Times New Roman"25description_color = "#333333"26label_font = "12px Verdana"27label_color = "#999999"28infield_font = "14px Helvetica"29infield_color = "#444444"30grid_font = "11px Calibri"31grid_color = "#555555"3233# Assert the font size, style, and color for each element34assert driver.find_element_by_xpath("/​/​h1").value_of_css_property("font-size") == headline_font35assert driver.find_element_by_xpath("/​/​h1").value_of_css_property("color") == headline_color3637assert driver.find_element_by_xpath("/​/​p").value_of_css_property("font-size") == description_font38assert driver.find_element_by_xpath("/​/​p").value_of_css_property("color") == description_color3940assert driver.find_element_by_xpath("/​/​label").value_of_css_property("font-size") == label_font41assert driver.find_element_by_xpath("/​/​label").value_of_css_property("color") == label_color4243assert driver.find_element_by_xpath("/​/​input").value_of_css_property("font-size") == infield_font44assert driver.find_element_by_xpath("/​/​input").value_of_css_property("color") == infield_color4546assert driver.find_element_by_xpath("/​/​table").value_of_css_property("font-size") == grid_font47assert driver.find_element_by_xpath("/​/​table").value_of_css_property("color") == grid_color4849# Close the browser window50driver.quit()

Language: Javascript

Framework: Cypress

copy
1/​/​ This test case assumes that the SRS document has a section specifying the standard font style and formatting for the webpage2/​/​ This test case is written using Cypress framework and will use local driver by default3/​/​ To connect to remote client with desired capabilities, modify the 'cy.visit' command and provide the remote URL and desired capabilities as options45describe('General webpage functionality - Font style and formatting check', () => {6 it('should display text in the specified font style and formatting as per SRS', () => {7 /​/​ Visit the webpage to be tested8 cy.visit('http:/​/​localhost:3000')910 /​/​ Verify font style and formatting for headline11 cy.get('#headline')12 .should('have.css', 'font-size', '36px')13 .and('have.css', 'font-family', 'Arial, sans-serif')14 .and('have.css', 'color', '#000000')1516 /​/​ Verify font style and formatting for description text17 cy.get('#description')18 .should('have.css', 'font-size', '16px')19 .and('have.css', 'font-family', 'Helvetica, sans-serif')20 .and('have.css', 'color', '#333333')2122 /​/​ Verify font style and formatting for labels23 cy.get('.label')24 .should('have.css', 'font-size', '14px')25 .and('have.css', 'font-family', 'Helvetica, sans-serif')26 .and('have.css', 'color', '#444444')2728 /​/​ Verify font style and formatting for infield data29 cy.get('.data-field')30 .should('have.css', 'font-size', '16px')31 .and('have.css', 'font-family', 'Arial, sans-serif')32 .and('have.css', 'color', '#666666')3334 /​/​ Verify font style and formatting for grid info35 cy.get('.grid-info')36 .should('have.css', 'font-size', '12px')37 .and('have.css', 'font-family', 'Verdana, sans-serif')38 .and('have.css', 'color', '#777777')39 })40})

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