10.2.5

Edit

Run WebElement commands

The article describes what WebElement is and which actions you can perform on various WebElements.

tip

For more details on the topic, refer to:

What is WebElement

WebElement represents an HTML element. HTML documents are made up by HTML elements. HTML elements are written with a start and end tags and the content in between: <tagname> content </tagname> The HTML element is everything from the start tag to the end one, for example: <p> My first HTML paragraph. </p>

HTML elements can be nested when elements can contain elements. All HTML documents consist of nested HTML elements.

<html>
  <body>
    <h1> My First Heading </h1>
    <p> My first paragraph. </p>
  </body>
</html>

To get a WebElement object, write the below statement:

def element = $(byId('some_id'))

Mind that WebElement can be of any type, for example, text elements, links, radio buttons, dropdowns, tables, or any HTML elements. All the actions always populate against any element irrespectively of whether the action is valid for WebElement or not. For example, for the clear() command, even if you have a link element, you get the option to choose the clear() command on it, which may result in an error or may not do anything.

WebElement сommands

clear

CommandValueDescription
clear()voidIf the element is a text entry element, it clears the value. The method accepts nothing as a parameter and returns nothing.

The method has no effect on other elements. Text entry elements are INPUT and TEXTAREA.

def element = $(byId('some_id'))
element.clear()

//Or can be written as
$('#some_id').clear()

sendKeys

CommandValueDescription
sendKeys(CharSequence… keysToSend)voidThe method simulates typing into an element, accepts CharSequence as a parameter, and returns nothing.

The method works fine with such text entry elements as INPUT and TEXTAREA. See also Simulate keystrokes.

def element = $(byId('some_id'))
element.sendKeys('Admin')

$('.some_class').sendKeys(Keys.chord(Keys.LEFT_ALT, 'n'))

click

CommandValueDescription
click()voidThe method simulates the clicking of any element, accepts nothing as a parameter, and returns nothing.

Clicking is perhaps the most common way of interacting with web elements like text elements, links, radio buttons, and so on.

def element = $(byLinkText('About'))
element.click()

$('.some_class').click(2)      // double-clicking
$('.some_class').wheelClick()  // clicking using mouse wheel
  • Most of the time, you click the links causing a new page to load. The method waits until the page is loaded properly before handing over the execution to the following statement. If click() causes a new page to be loaded via an event or is done by sending a native event, for example, through JavaScript, then the method does not wait for it to be loaded.
  • There are some preconditions for an element to be clicked. The element must be visible and have the height and width greater than 0.

isDisplayed

CommandValueDescription
isDisplayed()BooleanThe method determines if an element is currently displayed or not, accepts nothing as a parameter but returns a Boolean value (true or false).
 
def element = $(byLinkText('About'))
boolean status = element.isDisplayed()
note

Do not confuse the method with an element present on the page. This returns true if the element is present on the page and throws a NoSuchElementFound exception if the element is not present on the page. This refers to the element property. Sometimes, the element is present on the page, but the element property is set to hidden. In that case, this returns false, as the element is present in the DOM but not visible to a user.

isEnabled

CommandValueDescription
isEnabled()BooleanThe method determines if the element currently is enabled or not, accepts nothing as a parameter, and returns a Boolean value (true or false).
 
def element = $(byLinkText('About'))
boolean status = element.isEnabled()

if (status == true) {
    element.click()
} else {
    log.warn('Element is not enabled')
}

isSelected

CommandValueDescription
isSelected()BooleanThe method determines whether this element is selected or not, accepts nothing as a parameter, and returns a Boolean value (true or false).

The operation only applies to input elements, such as checkboxes, select options, and radio buttons. This returns true if the element is currently selected or checked, false—otherwise.

def element = $('.class1 .class2')
boolean status = element.isSelected()

submit

CommandValueDescription
submit()voidThe method works better than click() if the current element is a form or within a form, accepts nothing as a parameter, and returns nothing.

If this causes the current page to change, the method waits until a new page is loaded.

def element = $('.btn.btn__submit')
element.submit()

getText

CommandValueDescription
getText()StringThe method fetches the visible or not hidden by CSS innerText of the element, accepts nothing as a parameter, and returns a String value.

The method returns an innerText of the element, including sub-elements, without any leading or trailing whitespace.

def element = $('.btn.btn__submit')
element.getText()

getTagName

CommandValueDescription
getTagName()StringThe method gets the tag name of this element, accepts nothing as a parameter, and returns a String value.

The method does not return the value of the name attribute but returns the tag, for example, input for the element: <input name="foo"/>.

$('.btn.btn__submit').getTagName()

getCssValue

CommandValueDescription
getCssvalue()StringThe method fetches a CSS property value of the given element, accepts nothing as a parameter, and returns a String value.

Color values should be returned as RGBA strings. For example, if the background-color property is set as green in the HTML source, the returned value is rgba(0, 255, 0, 1).

$('.btn.btn__submit').getCssvalue()

getAttribute

CommandValueDescription
getAttribute(String Name)StringThe method gets the value of the given attribute of the element, accepts the String as a parameter, and returns a String value.

Attributes are IDs, Name, Class, and so on.

$(byPartialLinkText('New Customer')).getAttribute('href')

getSize

CommandValueDescription
getSize()DimensionThe method fetches the width and height of the rendered element, accepts nothing as a parameter, and returns the Dimension object.

The method returns the size of the element on the page.

def element = $('.btn.btn__submit')
def dimensions = element.getSize()   // you can also use element.size()
println "Height : ${dimensions.height} Width : ${dimensions.width}"

getLocation

CommandValueDescription
getLocation()PointThe method locates an element on a page, accepts nothing as a parameter, and returns a Point object, from which you can get X and Y coordinates of a specific element.
 
def element = $('.btn.btn__submit')
def point = element.getLocation()
println "X cordinate: ${point.x}; Y cordinate: ${point.y}"
← Use XPath in JavaScriptAutomate browser navigation commands →