Playwright test of ComboBox

[pekeler]

Hi, anybody else using Playwright? I'm wondering why the ComboBox can't seem to be located by label. Anybody have any idea?

test('carbon combobox', async ({ page }) => {
    await page.goto('https://svelte.carbondesignsystem.com/components/ComboBox');
     await page.getByLabel('Contact').first().fill('just another test'); // not working
     await page.getByLabel('Contact').first().click(); // not even this is working
});

test('carbon textinput', async ({ page }) => {
     await page.goto('https://svelte.carbondesignsystem.com/components/TextInput');
     await page.getByLabel('User name').first().fill('just a test'); // works
});

test('carbon dropdown', async ({ page }) => {
     await page.goto('https://svelte.carbondesignsystem.com/components/Dropdown');
     await page.getByLabel('Contact').first().click(); // works
});

test('carbon datepicker', async ({ page }) => {
     await page.goto('https://svelte.carbondesignsystem.com/framed/DatePicker/DatePickerSingle?theme=white');
     await page.getByLabel('Meeting date').fill('10 Mar 2023'); // works
     await page.getByLabel('Meeting date').click(); // works
});

[pekeler]

We also still haven't figured out how to control the DatePicker from Playwright.

[metonym]

Recorded as bug in #2715, fixed by #2716

ComboBox now uses labelText as the fallback for aria-label when it is not explicitly provided. When labelText="Contact" is set, the accessible name matches the label, so Playwright's getByLabel works.

$: ariaLabel = $$props["aria-label"] ?? (labelText || "Choose an item");

---

Playwright usage (ComboBox)

Option 1: getByLabel with labelText

test("ComboBox by label", async ({ page }) => {
  await page.goto("/your-combobox-page");
  const combobox = page.getByLabel("Contact").locator("input");
  await combobox.click();
  await combobox.fill("Email");
  await expect(combobox).toHaveValue("Email");
});

Option 2: data-testid

For more reliable and stable selectors, add data-testid to the ComboBox (it is passed through to the input):

<ComboBox
  data-testid="combobox-contact"
  labelText="Contact"
  items={items}
  {shouldFilterItem}
/>

test("ComboBox by data-testid", async ({ page }) => {
  const combobox = page.getByTestId("combobox-contact");
  await combobox.click();
  await combobox.fill("Slack");
  await page.getByRole("option", { name: "Slack" }).click();
  await expect(combobox).toHaveValue("Slack");
});

Option 3: getByRole with accessible name

test("ComboBox by role", async ({ page }) => {
  const combobox = page.getByRole("combobox", { name: "Contact" });
  await combobox.fill("Email");
  await expect(combobox).toHaveValue("Email");
});

Playwright usage (DatePicker)

Option 1: getByLabel with labelText

test("DatePicker by label", async ({ page }) => {
  await page.goto("/your-date-picker-page");
  const input = page.getByLabel("Meeting date");
  await input.click();
  await input.fill("03/10/2023");
  await expect(input).toHaveValue("03/10/2023");
});

Option 2: data-testid

For more reliable and stable selectors, add data-testid to the DatePickerInput (it is passed through to the input):

<DatePicker datePickerType="single" on:change>
  <DatePickerInput
    data-testid="date-picker-meeting"
    labelText="Meeting date"
    placeholder="mm/dd/yyyy"
  />
</DatePicker>

test("DatePicker by data-testid", async ({ page }) => {
  const input = page.getByTestId("date-picker-meeting");
  await input.click();
  await input.fill("01/15/2024");
  await expect(input).toHaveValue("01/15/2024");
});

Option 3: Opening the calendar

test("DatePicker opens calendar", async ({ page }) => {
  const input = page.getByLabel("Meeting date");
  await input.click();
  const calendar = page.getByLabel("calendar-container");
  await expect(calendar).toBeVisible();
});

Or via the calendar icon:

test("DatePicker opens calendar via icon", async ({ page }) => {
  await page.locator(".bx--date-picker__icon").click();
  const calendar = page.getByLabel("calendar-container");
  await expect(calendar).toBeVisible();
});

Option 4: Selecting a date by clicking a day

To select a date by clicking a day in the calendar, use flatpickr's day classes. Exclude prev-month and next-month to target only days in the current month. For deterministic tests, set value and minDate/maxDate so the calendar shows a known month:

<DatePicker
  datePickerType="single"
  value="03/15/2024"
  flatpickrProps={{
    static: true,
    minDate: "03/01/2024",
    maxDate: "03/31/2024",
  }}
  on:change
>
  <DatePickerInput labelText="Meeting date" placeholder="mm/dd/yyyy" />
</DatePicker>

test("DatePicker selects date by clicking day", async ({ page }) => {
  const input = page.getByLabel("Meeting date");
  await input.click();

  const calendar = page.getByLabel("calendar-container");
  await expect(calendar).toBeVisible();

  const day20 = calendar
    .locator(".flatpickr-day:not(.prev-month):not(.next-month)")
    .filter({ hasText: /^20$/ });
  await day20.click();

  await expect(input).toHaveValue("03/20/2024");
});