WEB-492: Material Design 3 implementation: Login

playwright/pages/login.page.ts

@@ -33,10 +33,10 @@ export class LoginPage extends BasePage {
 
   /**
    * Get the username input field.
-   * Uses codegen selector for the actual input.
+   * Uses formcontrolname attribute for reliable selection.
    */
   get usernameInput(): Locator {
-    return this.page.getByRole('textbox', { name: 'Username' });
+    return this.page.locator('input[formcontrolname="username"]');
   }
 
   /**
@@ -49,10 +49,10 @@ export class LoginPage extends BasePage {
 
   /**
    * Get the password input field.
-   * Uses codegen selector for the actual input.
+   * Uses formcontrolname attribute for reliable selection.
    */
   get passwordInput(): Locator {
-    return this.page.getByRole('textbox', { name: 'Password' });
+    return this.page.locator('input[formcontrolname="password"]');
   }
 
   /**
@@ -63,6 +63,10 @@ export class LoginPage extends BasePage {
     return this.page.getByRole('button', { name: 'Login' });
   }
 
+  public divLocator(className: string): Locator {
+    return this.page.locator(className);
+  }
+
   // Additional helper locators for validation and assertions
   private readonly locators = {
     errorMessage: 'mat-error',
@@ -105,20 +109,17 @@ export class LoginPage extends BasePage {
 
   /**
    * Perform login with the given credentials.
-   * Uses the exact interaction sequence from codegen.
    *
    * @param username - The username to enter
    * @param password - The password to enter
    */
   async login(username: string, password: string): Promise<void> {
-    // Click the username wrapper div (as per codegen)
-    await this.usernameDivWrapper.click();
     // Fill the username input
+    await this.usernameInput.click();
     await this.usernameInput.fill(username);
 
-    // Click the password wrapper div (as per codegen)
-    await this.passwordDivWrapper.click();
     // Fill the password input
+    await this.passwordInput.click();
     await this.passwordInput.fill(password);
 
     // Click the login button