Nightwatch 问题单击 Div

问题描述

我有一个夜间值班测试，看起来像这样，我试图确认单击登录页面的“密码到文本”功能是否有效：

 'Test Password Visible': function (client) {
        client
            .url('http://127.0.0.1:8000/test')
            .waitForElementVisible('body',1000)
            .assert.visible('#id_password')
            .assert.visible('#eye_button')
           .pause(1000)

        client.assert.attributeEquals("#id_password","type","password");

        client.execute(function () {
            document.querySelector('#eye_button').click()
            console.log('clicked')
        },[]);
        client.assert.attributeEquals("#id_password","text");
        
    },

#eye_button 是一个 div，它包含一个 JS 控制的 <i> 元素，显示密码字段是 type=text 还是 type=password

我是 Nightwatch 的新手，但在查看其他帖子时应该可以点击 div，请注意 .click() 方法由于元素不具有交互性而不起作用。

client.execute(function () {
            document.querySelector('#eye_button').click()
            console.log('clicked')
        },[]);

但是它没有，而且在测试运行时我什至没有得到 console.log，有人能帮我指出正确的方向吗？

失败的行在这里是因为（我假设）没有点击 div 并且没有调用转换密码字段的 JS：

client.assert.attributeEquals("#id_password","text");

解决方法

您可以使用 document.getElementById 方法更改属性值，然后验证它，如果这对您有用 -

client.execute("document.getElementById('id_password')[0].type = 'text';")
client.assert.attributeEquals("#id_password","type","text");

首先，如果您可以使用 .execute() 的内置方法，我不明白您使用 Nightwatch 的原因。

我认为元素不具有交互性的原因是同步问题。

在实现了必要的值（在我们的例子中是密码）后，您的按钮才可用，但由于测试运行速度太快，浏览器仍会看到处于 disabled 状态的按钮，因此失败。

我建议通过 .waitForElementVisible() 使用 Nightwatch 并等待元素为 enabled。
即使是同一个元素，它也有 2 种不同的状态，因此您需要同时捕获这两种状态。

示例：

const buttonDisabled = 'button[class = "my_button"][disabled]';
const buttonEnabled = 'button[class = "my_button"][enabled]';
browser.waitForElementVisible(buttonDisabled);
browser.click(buttonDisabled);
browser.waitForElementVisible(buttonEnabled);
// your assertion here

nightwatch nightwatch.js