What is WebElement ?

WebElement is an object / HTML element, HTML elements can be written with a start tag, end tag, attributes and with the content in between: <tagname id="123" class="abc"> Web Page content </tagname>.

The elements themselves may have unique identifiers, such as names, or id’s, and others will be identifiable by their unique classes or tagnames (such as a "div" with the class of "footer").

A simple example webelement is the text box, which allows you to enter some textual data on a webpage.

Most commonly used web elements are :

  • Text box / Password / TextArea
  • Button
  • Dropdown list
  • Hyperlink
  • Check Box / Radio Button
  • etc

Get Text

getText() function in WebdriebrIO will fetch the text from the element, you can identify the in easy way. Text is present between > and <

Get the visible innerText of the elements, including sub-elements, without any leading or trailing whitespace.

Syntax:


									$(selector).getText()
									

<div name="elem">
    Lorem ipsum <strong>dolor</strong> sit amet<br>
	<span style="display: none">invisible</span>
</div>

In above given HTML Element, if we try use the $("#elem").getText() function it will return the self and chidren text content.


it('getText function', () => {
	browser.url('https://chercher.tech/practice/popups')
	const elem = $('#elem');
	console.log(elem.gletText());
	// outputs the following:
	// "Lorem ipsum dolor sit amet invisible"

	const span = $('span');
	console.log(span.getText());
	// outputs "" (empty string) since element is not interactable
});


Output of the program will be get-text-of-inner-element-webdriverio

setValue Command

setValue function is used to Send a sequence of key strokes/text to an element, clears value before. You cannot append value using setValue because everytime it clears the field.

You can also use unicode characters like Left arrow or Back space. WebdriverIO will take care of translating them into unicode characters

set-text-textbar-webdriverio


it('setValue function', () => {
	browser.url('https://chercher.tech/practice/popups')
	$("#textbar").setValue("sample text")
});


Output of the above program will look like below. set-text-textbar-webdriverio-result

Click

click() function is used to clicking of any element, Accepts nothing as a parameter and returns nothing. Clicking is the most common way of interacting with web elements like text elements, links, radio boxes and many more


$(selector).click()


Code for clicking an element in WebdriverIO


it('Verify Alerts', () => {
	browser.url('https://chercher.tech/practice/popups')
	$("//input[@name='prompt']").click()
})


click() function generally scrolls to element and then clicks the element. However, if you have fixed-position elements (such as a fixed header or footer) that cover up the selected element after it is scrolled within the viewport, the click will be issued at the given coordinates, but will be received by your fixed (overlaying) element.

In these cased the following error is thrown:


Element is not clickable at point (x, x). Other element would receive the click: ..."									

isDisplayed Command


									
									

isEnabled Command


									
									

isSelected Command


									
									

isExisting Command


									
									

idFocused Command


									
									

GetValue


									
									

Get TagName


									
									

Get Size


									
									

Get Property


									
									

Get Location


									
									

Get Html


									
									

Get Attribute


									
									

Get CSS Property


									
									

AddValue


									
									

About Author

Myself KarthiQ, I am the author of this blog, I know ways to write a good article but some how I donot have the skills to make it to reach people, would you like help me to reach more people By sharing this Article in the social media.

Share this Article Facebook
Comment / Suggestion Section
Point our Mistakes and Post Your Suggestions