javascript - Hur matchar man mot ett OR-fall i Playwright?

Playwright-dokumentationen säger "Kommaseparerad lista med CSS-väljare matchar alla element som kan väljas av en av väljaren i den listan." men det fungerar inte.

Om jag gör detta:

await expect(page.locator('text="Banana"')).toBeVisible();

det matchar, men om jag gör så här:

await expect(page.locator('text="Banana", text="foo"')).toBeVisible();

det hänger

Är detta inte en "CSS-väljare"? Hur gör jag motsvarande på rätt sätt?

Svar #1

Ja, detta är inte en CSS-väljare. Du kan dock göra det på detta sätt:

await expect(page.locator('span:has-text("Banana"), span:has-text("foo")')).toBeVisible();

Svar #2

Nu (från v1.33) kan du använda OR-villkor nativt i Playwright

await expect(locatorA.or(locatorB)).toBeVisible()

Enkelt exempel:

Tänk dig ett scenario där du vill klicka på en knapp för "Nytt e-postmeddelande", men ibland visas istället en dialogruta för säkerhetsinställningar. I det här fallet kan du vänta på antingen en knapp för "Nytt e-postmeddelande" eller en dialog och agera därefter.

const newEmail = page.getByRole('button', { name: 'New' });
const dialog = page.getByText('Confirm security settings');
await expect(newEmail.or(dialog)).toBeVisible();
if (await dialog.isVisible())
  await page.getByRole('button', { name: 'Dismiss' }).click();
await newEmail.click();

Relaterade artiklar