Join us on :

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()
									

Sample Html Code


<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

Syntax:


$(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: ..."									

addValue function

addValue() function sets/adds a value to an element found by given selector, You can also use unicode characters like Left arrow or Back space.

When you use addValue() more than one time, then the value will be appended, this function mostly used for Textbars( also password), textareas

Syntax:


$(selector).addValue(value)


Code to set a value to the nput elements


it('addValue command', () => {
	browser.url('https://chercher.tech/practice/popups')
	let input = $('#textbar')
	input.addValue('test')
	input.addValue(123)
})


Output of the program addvalue-webdriverio-function-append

clearValue Command

Clear a <textarea> or text <input> element’s value. Make sure you can interact with the element before using this command. You can't clear an input element that is disabled or in readonly mode.

Syntax:


$(selector).clearValue()


Code for clearing the text from the inputbar


it('addValue command', () => {
	browser.url('https://chercher.tech/practice/popups')
	let input = $('#textbar')
	input.addValue('test')
	input.clearValue()
	input.addValue(123)
})


Output of the clearValue, here test text has been cleared before entering 123 clearvalue-webdriverio-function

isDisplayed Command

isDisplayed() function is used to check if an element is currently being displayed or not. This accepts nothing as a parameter but returns boolean value(true/false).

If element is displayed on UI then isDisplayed() function returns true otherwise false. isDisplayed() function results false even when element is present in DOM but not UI. Syntax:


$(selector).isDisplayed()


Code to test whether an element is displayed or not.


it('Verify isDisplayed', () => {
	browser.url('https://chercher.tech/practice/popups')
	// prompt button is present on UI
	var displayed = $("//input[@name='prompt']").isDisplayed()
	console.log("Is prompt button Displayed : "+displayed)

	// hide button is not Displayed in UI
	var displayedOnUI = $("//input[@name='prompt']").isDisplayed()
	console.log("Is hide button Displayed : "+displayedOnUI)
})

isEnabled Command

isEnabled() function determines if the element currently is Enabled or not?. isEnabled() function accepts nothing as a parameter but returns boolean value(true/false).

Retuns true if the element is enabled otherwise false.

Syntax:


$(selector).isEnabled()



it('Verify isEnabled', () => {
	browser.url('https://chercher.tech/practice/popups')
	// prompt button is present on UI
	var enabled = $("//input[@name='prompt']").isEnabled()
	console.log("Is prompt button Displayed : "+enabled)
})

isSelected Command

isSelected() function determines if an element is selected or not. It returns true if the element is selected and false if it is not. It is widely used on check boxes, radio buttons and options in a select (dropdowns).

Syntax:


$(selector).isSelected()


Code for the isSelected() function


it('addValue command', () => {
	browser.url('https://chercher.tech/practice/popups')
	let sel = $("//option[@value='Microsoft']").isSelected()
	console.log("Is dropdown options selected : "+sel)
})

isExisting Command

isExisting() function returns true if element exists in the DOM otherwise false, Understand that we are not talking about UI but HTML

Syntax:


$(selector).isExisting()


Code for isExisting() function


it('addValue command', () => {
	browser.url('https://chercher.tech/practice/popups')
	let exist = $("//select").isExisting()
	console.log("Is dropdown exist : "+exist)
})

isFocused Command

isFocused() function returns true or false if the selected DOM-element currently has focus. This statmenet is error in official docs If the selector matches multiple elements, it will return true if one of the elements has focus.


it('addValue command', () => {
	browser.url('https://chercher.tech/practice/popups')
	let focus = $("#textbar").isFocused()
	console.log("Is textbar focused : "+focus)
})

GetValue function

getValue() function retrieves the value of a <textarea>, <select> or <input> found by given selector. This statement is error in official docs If multiple elements are found via the given selector, an array of values is returned instead.


it('addValue command', () => {
	browser.url('https://chercher.tech/practice/popups')
	$("//*[@id='textbar']").setValue("qwerty")
	let text = $("#textbar").getValue()
	console.log("text in textbar : "+text)
})

Get TagName

getTagName() function will fetch the tagname from the given element, In below image input is the tagname getvalue-webdriverio


it('Tagname command', () => {
	browser.url('https://chercher.tech/practice/popups')
	let tag = $("#textbar").getTagName()
	console.log("text in textbar : "+tag)
})

getElementSize

getElementSize() function fetches the width and height for an element. We can also retrieve width or height or Both


it('getElementSize command', () => {
	browser.url('https://chercher.tech/practice/popups')
	const logo = $('#textbar')

	const size = logo.getElementSize()
	console.log(size)

	const width = logo.getElementSize('width')
	console.log(width)

	const height = logo.getElementSize('height')
	console.log(height)
})

Get Property

The Get Element Property command will return the attributes of the element, this function accepts property name to return value of it


it('getCSSProperty command', () => {
	browser.url('https://chercher.tech/practice/popups')
	var elem = $("#textbar").getTagName()
	var attr = elem.getProperty('id')
	console.log(attr) // outputs: "BODY"
})

Get Location

getLocation() function retrives an element’s location on the page. The point (0, 0) refers to the upper-left corner of the page.

We can also fetch a specic axis like "x", "y"


it('should demonstrate the getLocation function', () => {
	browser.url('https://chercher.tech/practice/popups')
	var elem = $("#textbar").getTagName()
	const location = logo.getLocation();
	console.log(location);

	const xLocation = logo.getLocation('x')
	console.log(xLocation); 
});

Get Html

getHTML() function feteches the source code of specified DOM element by selector. If you want OuterHML then you have to pass nothing or true, but if you want HTML of the child element.

Below code didnot printed any output for innerHTML beacuse ther no child elements


it('get html for certain elements', () => {
	browser.url('https://chercher.tech/practice/popups')
	var outerHTML = $('#textbar').getHTML();
	console.log(outerHTML);

	var innerHTML = $('#textbar').getHTML(false);
	console.log(innerHTML);
});
ethtml-webdriverio

Get Attribute

Get an attribute from a DOM-element based on the attribute name.


it('should demonstrate the getAttribute command', () => {
	browser.url('https://chercher.tech/practice/popups')
	const form = $('#textbar')
	const attr = form.getAttribute('method')
	console.log(attr) // outputs: "post"
})

Get CSS Property

Get a css property from a DOM-element selected by given selector. The return value is formatted to be testable. Colors gets parsed via rgb2hex and all other properties get parsed via css-value.

Note that shorthand CSS properties (e.g. background, font, border, margin, padding, list-style, outline, pause, cue) are not returned, in accordance with the DOM CSS2 specification - you should directly access the longhand properties (e.g. background-color) to access the desired values.


it('should demonstrate the getCSSProperty command', () => {
	browser.url('https://chercher.tech/practice/popups')
	const elem = $('#textbar')
	const color = elem.getCSSProperty('color')
	console.log(color)
})

About Author

Article is written by Pavan (a) KarthiQ. Well, I am serving notice period in an MNC, Bangalore. I thought to enrich every person knowledge a little, I always have a feeling, when we teach something, we will learn more than what you know. Knowledge is the only thing that doubles when you spend it.

I have also created the reporter for Protractor Jasmine. Use for your projects without any hesitation

Comment / Suggestion Section
Point our Mistakes and Post Your Suggestions