Taiko Automated Tests - get DOM element

Question

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

score 3 · Answer 1 · answered Mar 04 '19 at 07:00

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

answered Mar 04 '19 at 07:00

neha

61
3

score 2 · Answer 2 · answered Jan 29 '20 at 06:37

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

Taiko Automated Tests - get DOM element

2 Answers2