(fix) O3-5243: Restore browser autofill support for login credentials #1509
Conversation
- Render both username and password inputs in DOM on initial load - Hide password field visually using CSS (not display:none) until user continues - Add proper name and autocomplete attributes for browser autofill - Maintain accessibility with aria-hidden and tabIndex management - Preserve existing two-step login UX - Add tests verifying DOM presence and autofill attributes Fixes regression where browser credential autofill stopped working after PR openmrs#104
|
Hi @UjjawalPrabhat , please share a screen recording demonstrating the fixed behavior. |
Screen.Recording.2025-12-02.180446.mp4 |
|
Thanks @UjjawalPrabhat . Shame that we don't get the full credential chooser UI (see image) but based on my reading it seems like that's not possible with a two-step login. 
@UjjawalPrabhat please fix the E2E tests, I think the breakage (at least for the esm-core ones) are caused by this PR. |
- Update login-page.ts with proper waits for password field visibility
- Add waitFor({ state: 'visible' }) after clicking Continue
- Add waitForLoadState('networkidle') after login completes
- Handle session state clearing for fresh login tests
- Fixes timeout issues in login.spec.ts, logout.spec.ts, navbar.spec.ts
Note: navbar.spec.ts passes login flow but fails on unrelated button assertions
(buttons not present on OpenMRS instance configuration)
Hey @brandones, Update:
Regarding the UI, the full credential dropdown does appear after clicking "Continue", just not on the initial screen due to the two-step flow limitation. |
| expect(continueButton).toBeInTheDocument(); | ||
| expect(passwordInput).not.toBeInTheDocument(); | ||
| // Password field is now always in DOM for autofill support, but hidden | ||
| expect(passwordInput).toBeInTheDocument(); |
There was a problem hiding this comment.
Can you try expect(passwordInput).not.toBeVisible()? Don't worry if it doesn't work, but if it does work it would be a nice way to express this.
There was a problem hiding this comment.
I gave expect(passwordInput).not.toBeVisible() a try, but unfortunately, it didn't work as expected in this environment.
jest-dom considers the element "visible" because it's present in the DOM with visibility: hidden applied via a CSS class, rather than inline styles or the hidden attribute, which the matcher doesn't fully process in this test setup.
I've kept the explicit aria-hidden and tabIndex assertions to verify the behavior correctly.
|
Also just for posterity: it is not possible at this time to E2E test autofill. See issue microsoft/playwright#26831 |
- Make location selection logic deterministic in E2E tests - Delete unhelpful comments referencing ticket number in test files - Remove incorrect CSS comment about pointer-events - Delete implementation-detail test that doesn't test user behavior
2 participants
Requirements
feat,fix, orchore, among others). See existing PR titles for inspiration.If applicable
Summary
Fixes browser autofill for username and password on the login page. This was previously working but regressed after earlier changes.
Related Issue
Fixes O3-5243
Other
Changes
nameandautocompleteattributes for browser autofillaria-hiddenandtabIndexmanagementChecklist
yarn test)