typescript - Elemen Playwright dijumpai tetapi terus dipaparkan sebagai tersembunyi

Saya sedang cuba untuk membuat skrip pendaftaran asas menggunakan playwright typescript. Jika saya menggunakan mod debug dan menjejak kod, ia berjalan dengan sempurna tetapi jika saya menggunakan headless, ia gagal. Ia gagal ketika cuba mengisi medan emel. Lokator yang saya gunakan dapat mencari elemen itu tetapi ia cuba menunggu sehingga elemen itu kelihatan walaupun ia sudah berada pada halaman. Tiada iframe pada 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();
  });
})

Ralat Dipaparkan

Jawapan #1

Saya melihat dua masalah:

1. Anda perlu await semua panggilan API Playwright yang mengembalikan janji. Gagal melakukannya akan menyebabkan keadaan perlumbaan dan ketidakpastian, bermakna skrip boleh gagal secara rawak dan memberikan ralat yang mengelirukan atau tingkah laku yang tidak dapat diramalkan.
2. Apabila memasukkan pemilih CSS ke dalam locator, gunakan .locator() dan bukannya .getByLabel().

Mengaplikasikan pembaikan ini lulus ujian bagi saya sama ada dengan kepala atau tanpa kepala (saya menggunakan JS, bukan TS tetapi ia tidak penting):

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();
  });
});

Selain daripada ketepatan, POM di sini mungkin sepatutnya melakukan lebih banyak kerja daripada yang dilakukannya sekarang. Tidak konsisten untuk mempunyai sesetengah penentu lokasi dalam POM dan sesetengahnya tidak, dan secara amnya adalah berguna untuk menambah kaedah yang mengabstrakkan beberapa tindakan Playwright yang 'mentah'.