Hi there,
I'm afraid this is a whole rookie question but I can't figure out how to solve it: I have a password field that I want to test is visible after clicking the "Show password" icon. I see the HTML changes from type="password" to type="text" when I click the icon, but I can't figure out how to read the password text. I can see it after clicking the icon, but I can't log the text to the console and I can't get any expect fulfilling the condition to validate the password text. I've tried using toHaveText, toHaveValue, toBe, allInnerTexts, textContent... with no luck. When I try to log the password to the console, even having it visible, I get only an empty value. Can some one help with this, please? This is the related html after clicking the show password icon (the password in this example is mypass):
<input id="password" data-testid="input-field" data-e2e="login-form-password-input" name="password" autocomplete="password" placeholder="*************" type="text" data-tw="pl-4 | pr-2.5" class="css-zihc96" value="mypass">and this is how I'm trying to extract its text:
const passValue = await page.locator('[data-e2e="login-form-password-input"]').textContent() console.log('Pass: ' + passValue)
Thanks in advance!
This thread is trying to answer question "How can I test the visibility of a password field and read the password text after clicking the 'Show password' icon?"
Can you share the site, so I can have a look and tell you if I found something?
I think, if your input is "mypass", it goes to value. So if should be toHaveValue(). So the line that you need is await expect(page.locator('[data-e2e="login-form-password-input"]')).toHaveValue("mypass")
Tested your solution, it will result to empty string ""
So if the problem is just to test whether the password will show/display when clicking the icon
This is how i will test it
// Fill or Type Password await page.locator('your-test-id/selector/locator').type('mypass') // Click Show Password Icon await page.locator(''your-test-id/selector/locator').click(); // In this part i suggest to use an xpath, im using LetXPath extension here, i typed mypass in the password field, and right click it to inspect and get the class based xpath expect(await page.waitForSelector("//input[@value='mypass']", { state: 'visible' })).toBeTruthy();
No, sorry; it isn't in production yet. The problem with 'toHaveValue' is that it passes even before clicking the show password icon. Thanks anyway 🙂
Sure, but in this case clicking or not the show password icon will not make any difference: the test passes even without clicking the icon.
Rayrun is a community for QA engineers. I am constantly looking for new ways to add value to people learning Playwright and other browser automation frameworks. If you have feedback, email luc@ray.run.