In Playwright testing, how to click on Material UI datepicker button?

Question

I am having trouble selecting the datepicker button to open the calendar, so I can select a date. The codegen runner suggests using the following code:
await page.getByRole('button', { name: 'Choose date, selected date is Feb 14, 2023' }).click();
That will only work if I know the previously selected date. I can use regex like
await page.getByRole("button", { name: /Choose date, selected date is/ }).click();
but that will break if there is more than one datepicker on the page.
I would like to either tab onto the button, and press enter, like
await page.getByLabel("Start date").press("Tab").press("Enter"); , Or if I could get the button inside that datepicker, maybe like
await page.getByLabel("Start date").getByRole("button").click();
but neither of those work, is there a way to do that?
Any other ideas?

Here is a sample test that will work when no date was previously selected (note I used first() because there are other datepickers on the page. This is what I need to avoid).

test("select from a date picker", async ({ page }) => {
  await page.goto("https://mui.com/x/react-date-pickers/date-picker/");
  await page.getByLabel("Basic Date Picker").click();
  const datepicker = await page
    .locator("div")
    .filter({ hasText: "Basic date picker" })
    .getByRole("button", { name: "Choose date" })
    .first();
  await datepicker.click();
  await page
    .getByRole("dialog", { name: "Basic date picker" })
    .getByRole("gridcell", { name: "14" })
    .click();
});

Can you share a sample HTML or the site and a clear explanation of the logic for picking a particular date? Thanks. — ggorlen, Mar 13 '23 at 17:52
@ggorlen You can reproduce this on the MUI site: test('test', async ({ page }) => { await page.goto('https://mui.com/x/react-date-pickers/date-picker/'); await page.locator('div').filter({ hasText: 'Basic date picker' }).getByRole('button', { name: 'Choose date' }).click(); }); As for the date, it can be any date. — arecaps, Mar 13 '23 at 19:47

score 1 · Answer 1 · answered Mar 14 '23 at 08:56

1

Assuming it has the icon on the right edge of the control to click on to open the calendar, can't you just use:

await page.getbyTestId(`CalendarIcon`).click();

That was based on this material-ui date-picker page though.

answered Mar 14 '23 at 08:56

AJG

476
2
5

This also will only work if there is only one datepicker on the page. On that page in my test above, there are 14 of these. – arecaps Mar 14 '23 at 18:22

score 0 · Accepted Answer · answered Mar 14 '23 at 22:31

The reason why await page.getByLabel("Start date").getByRole("button").click(); does not work, is because the button is not nested under the date field, it is a sibling element.
First you would need to get the parent, and then you can get the button inside it. .locator("..") will get the parent, as documented HERE

await page.getByLabel("Start date").locator("..").getByRole("button").click();

This will work, as long as there is only one start date on the page.

In Playwright testing, how to click on Material UI datepicker button?

2 Answers2