The problem in depth

We’re using MUI + MUI X with React + TypeScript, and our QA team uses Playwright + TS for automation.

We need a reliable, type-safe way to add locators like data-testid to MUI components (fields, buttons, dropdowns, autocomplete, Data Grid, charts, etc.).

Right now, we’ve been using custom types like these:

export interface CustomInputProps extends React.InputHTMLAttributes<HTMLInputElement> {
  'data-testid'?: string;
}

import { InputLabelProps, TypographyProps } from '@mui/material';

export interface CustomSlotProps {
  primary?: TypographyProps;
  inputLabel?: InputLabelProps;
}

This works in some cases, but it’s basically bypassing TypeScript, and we’ve hit edge cases where we had to inspect MUI’s actual internal prop types.

We want to refactor this and use the proper MUI/MUI X way to pass data-testid to the real rendered HTML elements without working around TS.

A few questions:

• What’s the recommended way to add data-testid to MUI / MUI X components in a type-safe way?

• Is there any built-in MUI support for automation locators across components?

• Are people extending MUI module types for this, or handling it per component?

• How are other teams solving this?

Would appreciate any advice from teams doing this at scale.

Your environment

  Don't forget to mention which browser you used.
  Output from `npx @mui/envinfo` goes here.

Search keywords: locators, data-testid, testid

Order ID: 127117