Add 'Get CSS Property Value' keyword with tests

b-vamsipunnam · b-vamsipunnam · commit 4a8d2b8fc929 · 2026-03-29T15:54:50.000-04:00
diff --git a/atest/acceptance/keywords/elements.robot b/atest/acceptance/keywords/elements.robot
@@ -218,4 +218,32 @@ Cover Element can cover just one element
 
 Cover Elements should throw exception when locator is invalid
     Run Keyword And Expect Error  No element with locator '//img?@src="inexistent"?' found.
-    ...  Cover Element  //img[@src="inexistent"]
+    ...  Cover Element  //img[@src="inexistent"]
+
+Get CSS Property Value
+    [Setup]            Go To Page "cssproperties.html"
+    ${display}=        Get CSS Property Value    id:styled-div    display
+    Should Be Equal    ${display}       block
+    ${font_size}=      Get CSS Property Value    id:styled-div    font-size
+    Should Be Equal    ${font_size}     16px
+    ${margin_top}=     Get CSS Property Value    id:styled-div    margin-top
+    Should Be Equal    ${margin_top}    10px
+    ${text_align}=     Get CSS Property Value    id:styled-div    text-align
+    Should Be Equal    ${text_align}    center
+
+Get CSS Property Value With Missing Element
+    [Setup]            Go To Page "cssproperties.html"
+    Run Keyword And Expect Error
+    ...    Element with locator 'id:non-existent' not found.
+    ...    Get CSS Property Value    id:non-existent    color
+
+Get CSS Property Value Returns Background Color
+    [Setup]            Go To Page "cssproperties.html"
+    ${color}=          Get CSS Property Value    id:styled-div    background-color
+    Should Match Regexp    ${color}    ^rgba?\(.+\)$
+
+Get CSS Property Value Using WebElement
+    [Setup]            Go To Page "cssproperties.html"
+    ${element}=        Get WebElement    id:styled-div
+    ${display}=        Get CSS Property Value    ${element}    display
+    Should Be Equal    ${display}    block
diff --git a/atest/resources/html/cssproperties.html b/atest/resources/html/cssproperties.html
@@ -0,0 +1,22 @@
+<!DOCTYPE html>
+<html>
+<head>
+    <title>CSS Properties Test Page</title>
+    <style>
+        #styled-div {
+            display: block;
+            font-size: 16px;
+            background-color: rgb(255, 0, 0);
+            margin-top: 10px;
+            text-align: center;
+        }
+    </style>
+</head>
+<body>
+
+<div id="styled-div">
+    Demo Element
+</div>
+
+</body>
+</html>
diff --git a/src/SeleniumLibrary/keywords/element.py b/src/SeleniumLibrary/keywords/element.py
@@ -1275,3 +1275,21 @@ def _convert_special_keys(self, keys):
 
     def _selenium_keys_has_attr(self, key):
         return hasattr(Keys, key)
+
+    @keyword("Get CSS Property Value")
+    def get_css_property_value(
+            self, locator: Union[WebElement, str], css_property: str
+    ) -> str:
+        """Returns the computed value of ``css_property`` from the element ``locator``.
+
+        See the `Locating elements` section for details about the locator syntax.
+
+        The value returned is the browser-computed CSS value of the property.
+        For example, colors are often returned in ``rgba(...)`` format and sizes
+        are typically returned in pixels.
+
+        Example:
+        | ${color}= | `Get CSS Property Value` | css:button.submit | background-color |
+        | ${size}=  | `Get CSS Property Value` | id:username       | font-size        |
+        """
+        return self.find_element(locator).value_of_css_property(css_property)
diff --git a/utest/test/api/test_plugins.py b/utest/test/api/test_plugins.py
@@ -22,7 +22,7 @@ def setUpClass(cls):
     def test_no_libraries(self):
         for item in [None, "None", ""]:
             sl = SeleniumLibrary(plugins=item)
-            self.assertEqual(len(sl.get_keyword_names()), 182)
+            self.assertEqual(len(sl.get_keyword_names()), 183)
 
     def test_parse_library(self):
         plugin = "path.to.MyLibrary"
