CODEWITHSUNDEEP
javascriptgetgauge
Ryan
Ryan

Reputation: 51

Taiko Automated Tests - get DOM element

What is the best way to get a DOM element in a Taiko test?

In the browser console I can do:

element = document.getElementsByClassName("XXXX")[0]

I've tried element = await $('.XXXX').get()[0]; using Taiko's $ selector (https://taiko-preview.gauge.org/#$). But that doesn't seem to give the actual DOM element (just a Taiko ElementWrapper (https://taiko-preview.gauge.org/#elementwrapper)).

For context, the reason I want the DOM element is because I'd like to do element.parentElement and then look at some of the properties to use in my test.

I'm relatively new to Taiko so any help is greatly appreciated.

Thanks

Upvotes: 5

Views: 3005

Answers (2)

Jai Prak
Jai Prak

Reputation: 3410

You can use evaluate method to get DOM element. You can return the attribute values from this method or set the value of them. Here is the example,

 // For getting an attribute value
 const color = await evaluate(textBox({ class: 'username' }), (element) => {
    return element.style.color;
 });

 // For setting/getting an attribute
 const updatedMaxLength = await evaluate(textBox({ class: 'username' }), (element) => {
    element.setAttribute('maxlength', 20);
    return element.getAttribute('maxlength');
 });

In your case it should be,

 const inputMaxLength = await evaluate(textBox({ class: 'username' }), (element) => {
    return element.parentElement.className
 });

You can also use XPath of the element to use with evaluate method,

const passwordXpath = `//input[@type="password"]`;
const passwordMaxLength = await evaluate($(passwordXpath), (element) => {
    return element.getAttribute('maxlength');
});

Upvotes: 2

neha
neha

Reputation: 61

You can use the evaluate method in Taiko here. For example, to get the classname from the parent element you could do

evaluate(()=>{var a = document.getElementsByClassName('XXXX')[0]; return a.parentElement.className})

Upvotes: 3

Related Questions