Taiko自动化测试-获取DOM元素

Question

在Taiko测试中获取DOM元素的最佳方法是什么？

在浏览器控制台中，我可以执行以下操作：

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

我已经使用Taiko的$选择器(https://taiko-preview.gauge.org/#$)尝试过element = await $('.XXXX').get()[0];。但这似乎并没有给出实际的DOM元素(只是一个Taiko ElementWrapper (https://taiko-preview.gauge.org/#elementwrapper))。

对于上下文，我需要DOM元素的原因是因为我想执行element.parentElement，然后查看要在测试中使用的一些属性。

我是个新手，所以我非常感谢大家的帮助。

谢谢

Answer 1

你可以在这里使用泰语中的evaluate method。例如，要从父元素中获取类名，您可以这样做

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

Answer 2

您可以使用evaluate方法获取DOM元素。您可以从此方法返回属性值或设置属性值。这是一个例子，

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

在你的情况下应该是，

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

也可以将元素的XPath与evaluate方法一起使用。

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