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 ($). But that doesn't seem to give the actual DOM element (just a Taiko 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

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/#$). But that doesn't seem to give the actual DOM element (just a Taiko ElementWrapper (https://taiko-preview.gauge/#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

• javascript
• getgauge

Share Improve this question Follow asked Feb 22, 2019 at 23:17 RyanRyan 5111 silver badge33 bronze badges

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 3

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

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');
});