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

【问题标题】：Taiko Automated Tests - get DOM elementTaiko 自动化测试 - 获取 DOM 元素
【发布时间】：2019-02-22 23:17:01
【问题描述】：

在 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，然后查看一些要在我的测试中使用的属性。

我对 Taiko 比较陌生，因此非常感谢任何帮助。

谢谢

【问题讨论】：

标签： javascript getgauge

【解决方案1】：

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

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

【讨论】：

【解决方案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与评估方法一起使用，

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

【讨论】：