Suggestion: For web UI, prefer data-test-id attributes

[yairEO]

Example (overly simplified) login page HTML:

<input data-test-id='username' placeholder='username'/>
<input data-test-id='password' type='password' placeholder='password'/>

playwright.config.ts

use: {
  screenshot: "only-on-failure",

  /* Maximum time each action such as `click()` can take. Defaults to 0 (no limit). */
  actionTimeout: 0,

  /* Base URL to use in actions like `await page.goto('/')`. */
  baseURL: process.env.TESTS_URL,

  /* Collect trace when retrying the failed test. See https://playwright.dev/docs/trace-viewer */
  trace: "on-first-retry",

  browserName: "chromium",
  headless: true,

  testIdAttribute: "data-test-id",    // <---------
},

tests/login.ts

Prefer page.getByTestId over unstable Locator (because DOM-based selectors might change & break tests)

this.username = page.getByTestId("username");
this.password = page.getByTestId("passpord");

---

References:

https://playwright.dev/docs/locators#set-a-custom-test-id-attribute
https://playwrightsolutions.com/getbytestid/