typescript - Playwright Elemento encontrado pero sigue mostrando como oculto

Estoy tratando de crear un script básico de registro usando Playwright con TypeScript. Si uso el modo de depuración y paso por el código paso a paso, funciona perfectamente, pero si lo uso en modo headless, falla. Falla al intentar rellenar el campo de correo electrónico. El localizador que estoy usando puede encontrar el elemento, pero intenta esperar a que sea visible aunque esté presente en la página. No hay iframes en el HTML.

import { test, expect, Locator, Page } from '@playwright/test';



class RegisterStr{
  userName: Locator;
  pw: Locator;
  button: Locator;
  

  constructor(page: Page){
    this.userName = page.locator('#username')
    this.pw = page.getByLabel('#password')
    this.button = page.locator("#submit")
  }
}


test.describe("Resgietring", ()=>{
  let regis : RegisterStr;

  test('has title', async ({ page }) => {
    regis = new RegisterStr(page)
    await page.goto('https://practicetestautomation.com/practice-test-login/');

    regis.userName.fill("student")
    regis.pw.fill("Password123")
    regis.button.click();
  
    // await page.waitForURL("https://practicetestautomation.com/logged-in-successfully/")
  
    // Expect signed in 
    await expect(page.getByRole('heading', { name: 'Logged In Successfully' })).toBeVisible();
  });
})

Error mostrado

Respuesta #1

Veo dos problemas:

1. Necesitas await todas las llamadas a la API de Playwright que devuelvan promesas. No hacerlo provoca condiciones de carrera y no determinismo, lo que significa que el script puede fallar al azar y dar errores confusos o un comportamiento impredecible.
2. Al pasar un selector CSS a un localizador, utiliza .locator() en lugar de .getByLabel().

Aplicar estas correcciones pasa la prueba para mí tanto con interfaz gráfica como sin ella (usé JS, no TS, pero es irrelevante):

import {expect, test} from "@playwright/test"; // ^1.39.0

class Register {
  constructor(page) {
    this.userName = page.locator("#username");
    this.pw = page.locator("#password");
    this.button = page.locator("#submit");
  }
}

test.describe("Registering", () => {
  test("has title", async ({page}) => {
    const regis = new Register(page);
    await page.goto(
      "https://practicetestautomation.com/practice-test-login/"
    );
    await regis.userName.fill("student");
    await regis.pw.fill("Password123");
    await regis.button.click();
    await page.waitForURL(
      "https://practicetestautomation.com/logged-in-successfully/"
    );
    await expect(
      page.getByRole("heading", {name: "Logged In Successfully"})
    ).toBeVisible();
  });
});

Más allá de la corrección, el POM aquí probablemente debería estar haciendo más trabajo del que actualmente hace. Es inconsistente tener algunos localizadores en el POM y otros no, y en general es útil agregar métodos que abstraigan algunas de las acciones "crudas" de Playwright.