[BUG] Button does not register text input from pw and doesn't go 'enabled'

[jaroszan]

Context:

• Playwright Version: 1.10.0
• Operating System: Windows
• Node.js version: v14.16.0
• Browser: at least Chromium and Firefox
• Extra: Angular

Code Snippet

After the code below (auto-generated) Login button has to become enabled, it doesn't (even though fields are visibly filled in)

await page.click('[placeholder="Enter your email"]');
await page.fill('[placeholder="Enter your email"]', 'testuser@testuser.com');
await page.press('[placeholder="Enter your email"]', 'Tab');
await page.fill('[placeholder="Type in your password"]', 'testuserpassword');

CLI

waiting for selector "text=Login To My App" selector resolved to visible <input disabled type="submit" class="t-button" id="login…/> attempting click action waiting for element to be visible, enabled and stable element is not enabled - waiting... element is not stable - waiting... element is not enabled - waiting...

Describe the bug After user fills in username and password the Login button has to become enabled, however it doesn't when using Playwright. I have Selenium tests (for comparison) that perform the same function and they work flawlessly every single time.

Element that has to be clicked has the following properties:

<input id="login_submit" type="submit" class="t-button" value="Login To My App" disabled="">

When human/selenium performs the same actions disabled="" is removed and it's possible to proceed by clicking this button. During manual intervention it's possible to get this button enabled (I have to make some changes to either of input fields).

UPDATE: I have tried recording feature of puppeteer and it works correctly (although with stability issues). It looks like either autogenerating feature in PW does not work correctly (although I tried to fix it manually by substituting pressing tab on Email field with clicking on Password field) or there is an issue in input setting function.

[JoelEinbinder]

try replacing page.fill with page.type. It sounds like the site is likely listening for key strokes instead of just text input. That sounds like a bug with the website, as the user could paste things with a mouse and avoid key events.

[jaroszan]

thanks, it worked as a solution to this particular problem. not sure about a bug with the website though since it's a password field.

it's an issue with autogenerating feature still since it doesn't represent that user actually typed in password and not pasted from the clipboard,

[dgozman]

thanks, it worked as a solution to this particular problem.

That's great!

not sure about a bug with the website though since it's a password field.

it's an issue with autogenerating feature still since it doesn't represent that user actually typed in password and not pasted from the clipboard,

Codegen provides helpful code that should be used as a reference. We make a reasonable assumption that most users would want page.fill to ensure their sites work with any kind of input. However, you can change from fill to type at any moment if you'd like.

Thank you for filing the issue. I will close it now, since there is no action item here.

[jaroszan]

I am fine with this issue being closed. Fact that is worth considering is that selenium and puppeteer have it working out of the box. Make of that what you will.

[ArtyMaximus]

Hello. I faced exactly the same problem. I have an element -> <input _ngcontent-omi-c199="" autocomplete="off" class="mat-select-search-input mat-input-element ng-untouched ng-pristine ng-valid" type="text" placeholder="Введите название группы" aria-label="dropdown search">

The page.type method really helped me. But what if you want to check the element for input accessibility before entering text? expect(locator).toBeEditable() and expect(locator).toBeEnabled() fail because they report as if my element has readonly or disabled attributes. I was debugging via method page.evaluate. And I didn’t find such attributes there. What can you come up with here?