0

I have a nightwatch test that looks like so where I am attempting to confirm that a click of the "password-to-text" functionality of my login page works:

 '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", "type", "text");
        
    },

#eye_button is a div that contains a JS controlled <i> element showing if the password field is type=text or type=password

I am new to Nightwatch but looking at other posts this should have enabled the div to be clicked, note the .click() method did not work due to the element not being interactive.

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

However it does not, and I do not even get the console.log when the test runs, can someone help point me in the right direction?

The line that fails is here because (I assume) the div is not clicked and the JS that converts the password field is not called:

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

ViaTech
  • 2,143
  • 1
  • 16
  • 51

2 Answers2

0

You can change the attribute value using the document.getElementById method and then validate it, if that works for you -

client.execute("document.getElementById('id_password')[0].type = 'text';")
client.assert.attributeEquals("#id_password", "type", "text");
Alapan Das
  • 17,144
  • 3
  • 29
  • 52
0

First of all I don't see the reason why you're using .execute() if you can use built in methods by Nightwatch.

I think the reason the element not being interactive is because of sync issues.

Your button becomes available after the necessary values has being implemented(password in our case) but because the test runs so fast the browser still sees the button in the disabled state therefore fails.

I suggest using .waitForElementVisible() by Nightwatch and wait for the element to be enabled.
Even though it's the same element it has 2 different states so you need to capture both.

Example:

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
Vladislav Bulanov
  • 113
  • 8