This post sums up the difference between attribute and property fairly well:
The idea is that when a browser parses HTML code, it creates objects to represent each node that it finds in the HTML. These objects have a bunch of properties that define the state of the node that they represent. You can easily see this using your browser console. Here’s an example for the Google search field element:
And this list goes on for a while. These are all properties. In my solution from above, “textContent” and “innerText” are both properties in this list as well.
Now for attributes. Attributes are the key-value pairs that you see in element nodes. Here’s the element that represents the same search field as my example above:
All of the extra data you see after the “input” tag (class, name, type, etc.) are considered attributes.
When Russ says:
He’s pointing out that the WebUI.getAttribute() method is a misnomer, because it can be used to get BOTH attributes and properties. For instance, I can do something like:
WebUI.getAttribute(testObject, "class");
which gets the class attribute value, but I can also use it to get the textContent property value as well:
WebUI.getAttribute(testObject, "textContent");
However, the WebUI methods are actually based in part on another library called Selenium, which also does not make a distinction between getting property values and attribute values:
WebElement element;
element.getAttribute("class");
element.getAttribute("textContent");
As to your question about “getting the text from an element”, it works a bit differently. Lets take the HTML snippet you gave above:
<div class="k-vertical-align-bottom">janice<div>
When you see text in the HTML (‘janice’ from the above code), it’s not actually a property OR an attribute of the <div> that it lives in. Text is generally handled as a separate text node in it’s own right. So when you were trying to do:
WebUI.getAttribute(findTestObject(“Page_Works Order Master File/div_janice”), “text”)
… it failed of course, because, as @Andrej_Podhajsky pointed out, this code will look for an attribute (or a property) called ‘text’, and try and get it’s value. Since the <div> does not have such an attribute, it returned null.
