Playwright: Test times out waiting for an element to be visible even though the elements before it were found

Question

When I try to find an input box, my test times out. The elements before the card number can be found, but the card number gives me timeout issues. My code is below:

await expect(page).toHaveURL("https://app.pws.int.cruk.org/support-us/payment");
  await page.waitForLoadState("domcontentloaded");
  page.waitForTimeout(10000)

  const card = page.getByText("Credit / Debit");
  const cardholder = page.locator("#cardholderName");
  const cardnumber = page.getByRole('textbox', { name: 'credit-card-number' });

  const giftaid = page.getByText("Yes I would like Cancer Research UK to claim Gift Aid on my donation")

  await card.waitFor({state: "visible"});
  await card.click({force: true});
  await cardholder.fill("Tester O'Doh-erty");
  await cardnumber.waitFor({state: "visible"});
  
  await giftaid.check();

How can I fix this?

I get the following timeout error:

Test timeout of 30000ms exceeded.
Error: locator.waitFor: Page closed
=========================== logs ===========================
waiting for getByRole('textbox', { name: 'credit-card-number' }) to be visible
============================================================

  70 |   await cardholder.fill("Tester O'Doh-erty");
  71 |
> 72 |   await cardnumber.waitFor({state: "visible"});
     |                    ^
  73 |   
  74 |   await giftaid.check();
  75 |