diff --git a/examples/dotnet/SeleniumDocs/Elements/InformationTest.cs b/examples/dotnet/SeleniumDocs/Elements/InformationTest.cs index 07cc1149d2c8..6bf0dcdf8506 100644 --- a/examples/dotnet/SeleniumDocs/Elements/InformationTest.cs +++ b/examples/dotnet/SeleniumDocs/Elements/InformationTest.cs @@ -60,6 +60,14 @@ public void TestInformationCommands(){ IWebElement emailTxt = driver.FindElement(By.Name("email_input")); // fetch the value property associated with the textbox string valueInfo = emailTxt.GetAttribute("value"); + + // New in Selenium 4.27+ + // fetches the DOM attribute exactly as written in the HTML source + string domAttribute = emailTxt.GetDomAttribute("name"); + + // fetches the live property value from the DOM object (may differ at runtime) + string domProperty = emailTxt.GetDomProperty("name"); + Assert.AreEqual(valueInfo, "admin@localhost"); //Quit the driver diff --git a/examples/java/src/test/java/dev/selenium/elements/InformationTest.java b/examples/java/src/test/java/dev/selenium/elements/InformationTest.java index 02d480fa3dab..b8461fb61197 100644 --- a/examples/java/src/test/java/dev/selenium/elements/InformationTest.java +++ b/examples/java/src/test/java/dev/selenium/elements/InformationTest.java @@ -59,9 +59,17 @@ public void informationWithElements() { // FetchAttributes // identify the email text box - WebElement emailTxt = driver.findElement(By.name(("email_input"))); + WebElement emailTxt = driver.findElement(By.name("email_input")); // fetch the value property associated with the textbox String valueInfo = emailTxt.getAttribute("value"); + + // New in Selenium 4.27+ + // fetches the DOM attribute exactly as written in the HTML source + String domAttribute = emailTxt.getDomAttribute("name"); + + // fetches the live property value from the DOM object (may differ at runtime) + String domProperty = emailTxt.getDomProperty("name"); + assertEquals(valueInfo,"admin@localhost"); diff --git a/examples/javascript/test/elements/information.spec.js b/examples/javascript/test/elements/information.spec.js index 3c3031c24835..5f0eb7ed6440 100644 --- a/examples/javascript/test/elements/information.spec.js +++ b/examples/javascript/test/elements/information.spec.js @@ -57,6 +57,15 @@ describe('Element Information Test', function () { //fetch the attribute "name" associated with the textbox const nameAttribute = await emailElement.getAttribute("name"); + + // New in Selenium 4.27+ + // fetches the DOM attribute exactly as written in the HTML source + const domAttribute = await emailElement.getDomAttribute("name"); + console.log("DOM Attribute:", domAttribute); + + // fetches the live property value from the DOM object (may differ at runtime) + const domProperty = await emailElement.getDomProperty("name"); + console.log("DOM Property:", domProperty); assert.equal(nameAttribute, "email_input") }); diff --git a/examples/python/tests/elements/test_information.py b/examples/python/tests/elements/test_information.py index a2d5d030af81..089b36f5be5d 100644 --- a/examples/python/tests/elements/test_information.py +++ b/examples/python/tests/elements/test_information.py @@ -44,4 +44,12 @@ def test_informarion(): # FetchAttributes email_txt = driver.find_element(By.NAME, "email_input") value_info = email_txt.get_attribute("value") + + # New in Selenium 4.27+ + # fetches the DOM attribute exactly as written in the HTML source + dom_attribute = email_txt.get_dom_attribute("name") + + # fetches the live property value from the DOM object (may differ at runtime) + dom_property = email_txt.get_dom_property("name") + assert value_info == "admin@localhost" diff --git a/website_and_docs/content/documentation/webdriver/elements/information.en.md b/website_and_docs/content/documentation/webdriver/elements/information.en.md index d75aa29a490a..b4aad65e2eeb 100644 --- a/website_and_docs/content/documentation/webdriver/elements/information.en.md +++ b/website_and_docs/content/documentation/webdriver/elements/information.en.md @@ -253,31 +253,41 @@ val text = driver.findElement(By.id("justanotherlink")).getText() ## Fetching Attributes or Properties -Fetches the run time value associated with a -DOM attribute. It returns the data associated -with the DOM attribute or property of the element. +To interact with element attributes and properties, Selenium provides specific methods for predictable results. It is important to understand the difference: +* Attribute: The initial value defined in the HTML source code. +* Property: The current value in the browser's DOM, which can be modified by JavaScript or user interaction. For instance, if a user types in an input field, the value property changes. + +For this reason, Selenium has two precise methods to get these values: getDomAttribute() and getDomProperty(). The older getAttribute() method is still available for backward compatibility, but its use is discouraged as it can lead to unpredictable results and slower execution. {{< tabpane langEqualsHeader=true >}} {{< tab header="Java" text=true >}} -{{< gh-codeblock path="/examples/java/src/test/java/dev/selenium/elements/InformationTest.java#L60-L64" >}} +{{< gh-codeblock path="/examples/java/src/test/java/dev/selenium/elements/InformationTest.java#L60-L71" >}} {{< /tab >}} {{< tab header="Python" text=true >}} -{{< gh-codeblock path="/examples/python/tests/elements/test_information.py#L44-L46" >}} +{{< gh-codeblock path="/examples/python/tests/elements/test_information.py#L44-L53" >}} {{< /tab >}} {{< tab header="CSharp" text=true >}} -{{< gh-codeblock path="/examples/dotnet/SeleniumDocs/Elements/InformationTest.cs#L58-L62" >}} +{{< gh-codeblock path="/examples/dotnet/SeleniumDocs/Elements/InformationTest.cs#L58-L69" >}} {{< /tab >}} {{< tab header="Ruby" text=true >}} {{< gh-codeblock path="/examples/ruby/spec/elements/information_spec.rb#L48">}} {{< /tab >}} {{< tab header="JavaScript" text=true >}} -{{< gh-codeblock path="/examples/javascript/test/elements/information.spec.js#L55-L59">}} +{{< gh-codeblock path="/examples/javascript/test/elements/information.spec.js#L55-L68">}} {{< /tab >}} {{< tab header="Kotlin" >}} +// FetchAttributes // Navigate to URL driver.get("https://www.selenium.dev/selenium/web/inputs.html") -//fetch the value property associated with the textbox +// fetch the value property associated with the textbox val attr = driver.findElement(By.name("email_input")).getAttribute("value") + +// New in Selenium 4.27+ +// fetches the DOM attribute exactly as written in the HTML source +val domAttribute = driver.findElement(By.name("email_input")).getDomAttribute("name") + +// fetches the live property value from the DOM object (may differ at runtime) +val domProperty = driver.findElement(By.name("email_input")).getDomProperty("name") {{< /tab >}} {{< /tabpane >}}