From 48fd873f2911d2c07d532e53fe8bd3ef55a91083 Mon Sep 17 00:00:00 2001
From: germanm <german.mora@adyen.com>
Date: Thu, 12 Mar 2026 17:07:46 +0100
Subject: [PATCH 1/4] refactor(testing): add stable Playwright test hooks

Expose framework-agnostic test ids in shared UI primitives and update common Playwright helpers to use them.

Co-authored-by: factory-droid[bot] <138933559+factory-droid[bot]@users.noreply.github.com>
---
 .../Fields/ShopperPhoneField.tsx               |  3 ++-
 .../PaymentDetailsForm/Fields/AmountField.tsx  | 10 ++++++++--
 .../Fields/ValidityField.tsx                   | 11 +++++++++--
 .../PayoutDetails/components/PayoutData.tsx    | 18 +++++++++++++++---
 .../TransactionsExport/TransactionsExport.tsx  | 11 ++++++++---
 .../external/UIElement/UIElement.tsx           |  2 +-
 src/components/internal/Alert/Alert.tsx        | 14 +++++++++++---
 src/components/internal/Alert/types.ts         |  1 +
 .../components/CalendarGrid/CalendarGrid.tsx   |  2 +-
 .../CalendarGrid/CalendarGridDate.tsx          |  1 +
 .../internal/DataGrid/DataGridCell.tsx         |  1 +
 .../internal/DatePicker/DatePicker.tsx         |  6 ++++--
 .../internal/FilterBar/FilterBar.tsx           |  2 +-
 .../FormFields/FieldError/FieldError.tsx       |  5 +++--
 .../FileInput/components/Dropzone.tsx          |  2 +-
 .../internal/FormFields/InputBase.tsx          |  4 +++-
 .../BalanceAccountSelector.tsx                 |  7 ++++++-
 src/components/internal/FormFields/types.ts    |  1 +
 .../internal/FormWrappers/FormField.tsx        |  5 +++--
 .../internal/FormWrappers/FormSelect.tsx       |  7 +++++--
 .../internal/FormWrappers/FormTextInput.tsx    | 10 +++++++++-
 .../internal/StructuredList/StructuredList.tsx |  2 +-
 .../transactionDetails.page.ts                 |  6 +++---
 .../transactionsOverview.page.ts               |  2 +-
 tests/models/internal-components/dataGrid.ts   |  8 +++++---
 tests/models/internal-components/filterBar.ts  |  6 ++++--
 tests/utils/datePicker.ts                      |  8 ++++----
 tests/utils/utils.ts                           |  2 +-
 28 files changed, 113 insertions(+), 44 deletions(-)

diff --git a/src/components/external/PaymentLinkCreation/components/Form/CustomerDetailsForm/Fields/ShopperPhoneField.tsx b/src/components/external/PaymentLinkCreation/components/Form/CustomerDetailsForm/Fields/ShopperPhoneField.tsx
index 0e47021a0..c6767ab35 100644
--- a/src/components/external/PaymentLinkCreation/components/Form/CustomerDetailsForm/Fields/ShopperPhoneField.tsx
+++ b/src/components/external/PaymentLinkCreation/components/Form/CustomerDetailsForm/Fields/ShopperPhoneField.tsx
@@ -95,7 +95,7 @@ export const ShopperPhoneField = () => {
 
     return (
         <VisibleField<PaymentLinkCreationFormValues> name="telephoneNumber">
-            <FormField label={i18n.get('payByLink.creation.fields.shopperPhone.label')} optional={!isRequired}>
+            <FormField label={i18n.get('payByLink.creation.fields.shopperPhone.label')} optional={!isRequired} testId="form-field-telephoneNumber">
                 <Controller<PaymentLinkCreationFormValues>
                     name="telephoneNumber"
                     control={control}
@@ -136,6 +136,7 @@ export const ShopperPhoneField = () => {
                                 isValid={!fieldState.error && !!field.value}
                                 isInvalid={isInvalid}
                                 errorMessage={fieldState.error?.message}
+                                errorTestId="field-error-telephoneNumber"
                                 maxLength={PAYMENT_LINK_CREATION_FIELD_LENGTHS.telephoneNumber.max}
                                 readonly={isReadOnly}
                             />
diff --git a/src/components/external/PaymentLinkCreation/components/Form/PaymentDetailsForm/Fields/AmountField.tsx b/src/components/external/PaymentLinkCreation/components/Form/PaymentDetailsForm/Fields/AmountField.tsx
index 7e0660ef1..eaa3f7eac 100644
--- a/src/components/external/PaymentLinkCreation/components/Form/PaymentDetailsForm/Fields/AmountField.tsx
+++ b/src/components/external/PaymentLinkCreation/components/Form/PaymentDetailsForm/Fields/AmountField.tsx
@@ -61,7 +61,13 @@ export const AmountField = () => {
 
     return (
         <VisibleField<PaymentLinkCreationFormValues> name={VALUE_FIELD_NAME}>
-            <FormField label={i18n.get('payByLink.creation.fields.amount.label')} optional={false} supportText={undefined} className={undefined}>
+            <FormField
+                label={i18n.get('payByLink.creation.fields.amount.label')}
+                optional={false}
+                supportText={undefined}
+                className={undefined}
+                testId="form-field-amount.value"
+            >
                 <Controller<PaymentLinkCreationFormValues>
                     name={VALUE_FIELD_NAME}
                     control={control}
@@ -88,7 +94,7 @@ export const AmountField = () => {
                                     maxValue={MAX_AMOUNT}
                                     readonly={{ amount: isAmountReadOnly, currency: isCurrencyReadOnly }}
                                 />
-                                {isInvalid && errorMessage && <FieldError errorMessage={errorMessage} />}
+                                {isInvalid && errorMessage && <FieldError errorMessage={errorMessage} testId="field-error-amount.value" />}
                             </>
                         );
                     }}
diff --git a/src/components/external/PaymentLinkCreation/components/Form/PaymentDetailsForm/Fields/ValidityField.tsx b/src/components/external/PaymentLinkCreation/components/Form/PaymentDetailsForm/Fields/ValidityField.tsx
index 4d221134d..ed54c30d5 100644
--- a/src/components/external/PaymentLinkCreation/components/Form/PaymentDetailsForm/Fields/ValidityField.tsx
+++ b/src/components/external/PaymentLinkCreation/components/Form/PaymentDetailsForm/Fields/ValidityField.tsx
@@ -175,6 +175,7 @@ export const ValidityField: FunctionalComponent<ValidityFieldProps> = ({ configu
                                             label={i18n.get('payByLink.creation.fields.validity.label')}
                                             supportText={i18n.get('payByLink.creation.fields.validity.supportText')}
                                             optional={!isDurationUnitRequired && !isDurationQuantityRequired}
+                                            testId="form-field-linkValidity.durationUnit"
                                         >
                                             <Select
                                                 selected={validityValue}
@@ -186,7 +187,11 @@ export const ValidityField: FunctionalComponent<ValidityFieldProps> = ({ configu
                                             />
                                         </FormField>
                                         {validityValue === FLEXIBLE_ID && (
-                                            <FormField label={i18n.get('payByLink.creation.fields.validity.customDuration.label')} optional={false}>
+                                            <FormField
+                                                label={i18n.get('payByLink.creation.fields.validity.customDuration.label')}
+                                                optional={false}
+                                                testId="form-field-linkValidity.quantity"
+                                            >
                                                 <InputBase
                                                     {...durationQuantityField}
                                                     dropdown={{
@@ -207,7 +212,9 @@ export const ValidityField: FunctionalComponent<ValidityFieldProps> = ({ configu
                                             </FormField>
                                         )}
                                     </div>
-                                    {isInvalid && errorMessage && <FieldError errorMessage={errorMessage} withTopMargin />}
+                                    {isInvalid && errorMessage && (
+                                        <FieldError errorMessage={errorMessage} testId="field-error-linkValidity.quantity" withTopMargin />
+                                    )}
                                 </div>
                             );
                         }}
diff --git a/src/components/external/PayoutDetails/components/PayoutData.tsx b/src/components/external/PayoutDetails/components/PayoutData.tsx
index 7fe7fc98e..68df47439 100644
--- a/src/components/external/PayoutDetails/components/PayoutData.tsx
+++ b/src/components/external/PayoutDetails/components/PayoutData.tsx
@@ -243,7 +243,12 @@ export const PayoutData = ({
                                             {
                                                 <div className={PD_CARD_CLASS}>
                                                     <Card noPadding>
-                                                        <StructuredList items={fundsCaptured} renderLabel={payoutFundsCapturedTypeLabelRenderer} />
+                                                        <div data-testid="payout-funds-captured-breakdown">
+                                                            <StructuredList
+                                                                items={fundsCaptured}
+                                                                renderLabel={payoutFundsCapturedTypeLabelRenderer}
+                                                            />
+                                                        </div>
                                                     </Card>
                                                 </div>
                                             }
@@ -285,7 +290,9 @@ export const PayoutData = ({
                                                     </Typography>
                                                 }
                                             >
-                                                <StructuredList items={adjustments?.additions} renderLabel={payoutAdjustmentTypeLabelRenderer} />
+                                                <div data-testid="payout-adjustments-additions-breakdown">
+                                                    <StructuredList items={adjustments?.additions} renderLabel={payoutAdjustmentTypeLabelRenderer} />
+                                                </div>
                                             </Card>
                                         </div>
                                     )}
@@ -299,7 +306,12 @@ export const PayoutData = ({
                                                     </Typography>
                                                 }
                                             >
-                                                <StructuredList items={adjustments?.subtractions} renderLabel={payoutAdjustmentTypeLabelRenderer} />
+                                                <div data-testid="payout-adjustments-subtractions-breakdown">
+                                                    <StructuredList
+                                                        items={adjustments?.subtractions}
+                                                        renderLabel={payoutAdjustmentTypeLabelRenderer}
+                                                    />
+                                                </div>
                                             </Card>
                                         </div>
                                     )}
diff --git a/src/components/external/TransactionsOverview/components/TransactionsExport/TransactionsExport.tsx b/src/components/external/TransactionsOverview/components/TransactionsExport/TransactionsExport.tsx
index a8e05f1ed..f52e0ef18 100644
--- a/src/components/external/TransactionsOverview/components/TransactionsExport/TransactionsExport.tsx
+++ b/src/components/external/TransactionsOverview/components/TransactionsExport/TransactionsExport.tsx
@@ -261,7 +261,12 @@ const TransactionsExport = ({ disabled, filters, now }: { disabled?: boolean; fi
 
     const renderAlertError = useCallback(
         () => (
-            <Alert onClose={dismissExportError} className={classes.errorAlert} type={AlertTypeOption.CRITICAL}>
+            <Alert
+                onClose={dismissExportError}
+                className={classes.errorAlert}
+                type={AlertTypeOption.CRITICAL}
+                data-testid="transactions-export-error-alert"
+            >
                 <Typography variant={TypographyVariant.BODY}>{i18n.get('transactions.overview.export.actions.error')}</Typography>
             </Alert>
         ),
@@ -305,9 +310,9 @@ const TransactionsExport = ({ disabled, filters, now }: { disabled?: boolean; fi
                     targetElement={exportButtonRef}
                     title={exportButtonLabel}
                 >
-                    <div className={classes.popover}>
+                    <div className={classes.popover} data-testid="transactions-export-popover">
                         <div className={classes.popoverSections}>
-                            <div className={cx(classes.popoverSection, classes.filtersSection)}>
+                            <div className={cx(classes.popoverSection, classes.filtersSection)} data-testid="transactions-export-filters">
                                 <SectionTitle>{`${activeFiltersTitle}:`}</SectionTitle>
                                 {activeFilters.map(filter => (
                                     <Tag label={i18n.get(filter)} key={filter} />
diff --git a/src/components/external/UIElement/UIElement.tsx b/src/components/external/UIElement/UIElement.tsx
index 499e4c48b..e9435cddf 100644
--- a/src/components/external/UIElement/UIElement.tsx
+++ b/src/components/external/UIElement/UIElement.tsx
@@ -99,7 +99,7 @@ export class UIElement<P> extends BaseElement<P & UIElementProps> implements IUI
                 >
                     <AnalyticsProvider componentName={this.displayName} analyticsEnabled={core?.analyticsEnabled ?? true}>
                         {this.componentToRender && (
-                            <section ref={this.compRef} className={cx('adyen-pe-component', this.customClassNames)}>
+                            <section ref={this.compRef} className={cx('adyen-pe-component', this.customClassNames)} data-testid="component-root">
                                 <div className="adyen-pe-component__container">{this.componentToRender()}</div>
                             </section>
                         )}
diff --git a/src/components/internal/Alert/Alert.tsx b/src/components/internal/Alert/Alert.tsx
index 5f2744f21..641fbfb81 100644
--- a/src/components/internal/Alert/Alert.tsx
+++ b/src/components/internal/Alert/Alert.tsx
@@ -20,10 +20,18 @@ export const Alert = ({
     onClose,
     actions,
     variant = AlertVariantOption.DEFAULT,
+    'data-testid': dataTestId,
 }: AlertProps) => {
     const { i18n } = useCoreContext();
+    const hasActions = !!actions?.length;
+    const shouldShowCloseButton = onClose && (variant !== AlertVariantOption.TIP || closeButton);
+
     return (
-        <div className={cx('adyen-pe-alert', `adyen-pe-alert--${type}`, `adyen-pe-alert--${variant}`, className)} role="alert">
+        <div
+            data-testid={dataTestId}
+            className={cx('adyen-pe-alert', `adyen-pe-alert--${type}`, `adyen-pe-alert--${variant}`, className)}
+            role="alert"
+        >
             <AlertIcon type={type} className="adyen-pe-alert__icon" />
             <div className="adyen-pe-alert__content-container">
                 <div className="adyen-pe-alert__content">
@@ -44,7 +52,7 @@ export const Alert = ({
                     )}
                     {children}
                 </div>
-                {!!actions?.length && (
+                {hasActions && (
                     <div className="adyen-pe-alert__actions">
                         {actions?.map((action, index) => (
                             <Button key={index} onClick={action.onClick} variant={ButtonVariant.TERTIARY}>
@@ -54,7 +62,7 @@ export const Alert = ({
                     </div>
                 )}
             </div>
-            {onClose && (variant !== AlertVariantOption.TIP || closeButton) && (
+            {shouldShowCloseButton && (
                 <div className="adyen-pe-alert__close-button">
                     <Button
                         iconButton
diff --git a/src/components/internal/Alert/types.ts b/src/components/internal/Alert/types.ts
index 72d2784e7..5eed21993 100644
--- a/src/components/internal/Alert/types.ts
+++ b/src/components/internal/Alert/types.ts
@@ -9,6 +9,7 @@ export interface AlertProps {
     actions?: AlertAction[];
     className?: string;
     closeButton?: boolean;
+    'data-testid'?: string;
     type: AlertTypeOption;
     title?: VNode<Element> | string;
     description?: VNode<Element> | string;
diff --git a/src/components/internal/Calendar/components/CalendarGrid/CalendarGrid.tsx b/src/components/internal/Calendar/components/CalendarGrid/CalendarGrid.tsx
index 4552310dc..2f8284f69 100644
--- a/src/components/internal/Calendar/components/CalendarGrid/CalendarGrid.tsx
+++ b/src/components/internal/Calendar/components/CalendarGrid/CalendarGrid.tsx
@@ -8,7 +8,7 @@ const CalendarGrid = forwardRef(({ cursorRootProps, onlyCellsWithin, prepare, ge
     <ol className={'adyen-pe-calendar'} role="none" {...cursorRootProps}>
         {grid.map(block => (
             <li key={block.datetime} className={'adyen-pe-calendar__month'} role="none">
-                <div className={'adyen-pe-calendar__month-name'} role="none">
+                <div className={'adyen-pe-calendar__month-name'} role="none" data-testid="calendar-month-name">
                     <time dateTime={block.datetime} aria-hidden="true">
                         {block.label}
                     </time>
diff --git a/src/components/internal/Calendar/components/CalendarGrid/CalendarGridDate.tsx b/src/components/internal/Calendar/components/CalendarGrid/CalendarGridDate.tsx
index fc2f5f766..d6dfc483f 100644
--- a/src/components/internal/Calendar/components/CalendarGrid/CalendarGridDate.tsx
+++ b/src/components/internal/Calendar/components/CalendarGrid/CalendarGridDate.tsx
@@ -44,6 +44,7 @@ const CalendarGridDate = fixedForwardRef(
             const withinRange = flags.WITHIN_RANGE;
 
             props['data-today'] = flags.CURRENT;
+            if (flags.CURRENT) props['data-testid'] = 'calendar-current-day';
             props['data-first-week-day'] = flags.LINE_START;
             props['data-last-week-day'] = flags.LINE_END;
             props['data-weekend'] = flags.WEEKEND;
diff --git a/src/components/internal/DataGrid/DataGridCell.tsx b/src/components/internal/DataGrid/DataGridCell.tsx
index 93175ab5a..23b79bb13 100644
--- a/src/components/internal/DataGrid/DataGridCell.tsx
+++ b/src/components/internal/DataGrid/DataGridCell.tsx
@@ -26,6 +26,7 @@ export default function DataGridCell({
     return (
         <div
             role="cell"
+            data-testid={column}
             className={cx('adyen-pe-data-grid__cell', {
                 'adyen-pe-data-grid__cell--right': position === 'right',
                 'adyen-pe-data-grid__cell--center': position === 'center',
diff --git a/src/components/internal/DatePicker/DatePicker.tsx b/src/components/internal/DatePicker/DatePicker.tsx
index 2e8adb8ed..8b3f12953 100644
--- a/src/components/internal/DatePicker/DatePicker.tsx
+++ b/src/components/internal/DatePicker/DatePicker.tsx
@@ -46,7 +46,7 @@ const DatePicker = forwardRef((props: DatePickerProps, ref) => {
     }, [setLastUpdatedTimestamp, props.onHighlight]);
 
     return (
-        <div className={datePickerClassName}>
+        <div className={datePickerClassName} data-testid="date-picker">
             <div className={'adyen-pe-datepicker__selector-container'}>
                 <TimeRangeSelector
                     now={props.now}
@@ -79,7 +79,9 @@ const DatePicker = forwardRef((props: DatePickerProps, ref) => {
                 trackCurrentDay={true}
             />
             {withTimezone && (
-                <div className={'adyen-pe-datepicker__timezone'}>{i18n.get('common.filters.types.date.timezoneInfo', timezoneI18nOptions)}</div>
+                <div className={'adyen-pe-datepicker__timezone'} data-testid="date-picker-timezone">
+                    {i18n.get('common.filters.types.date.timezoneInfo', timezoneI18nOptions)}
+                </div>
             )}
         </div>
     );
diff --git a/src/components/internal/FilterBar/FilterBar.tsx b/src/components/internal/FilterBar/FilterBar.tsx
index 5db11dd14..2706f9ede 100644
--- a/src/components/internal/FilterBar/FilterBar.tsx
+++ b/src/components/internal/FilterBar/FilterBar.tsx
@@ -61,7 +61,7 @@ export const FilterBar = (props: PropsWithChildren<FilterBarProps>) => {
     return props.showingFilters ? (
         <div
             role="group"
-            data-testId="filter-bar"
+            data-testid="filter-bar"
             aria-label={i18n.get(props.ariaLabelKey ?? 'common.filters.label')}
             className={cx('adyen-pe-filter-bar', { 'adyen-pe-filter-bar--mobile': props.isMobileContainer })}
             id={props.filterBarElementId}
diff --git a/src/components/internal/FormFields/FieldError/FieldError.tsx b/src/components/internal/FormFields/FieldError/FieldError.tsx
index 4ac61c0f4..35e6b7139 100644
--- a/src/components/internal/FormFields/FieldError/FieldError.tsx
+++ b/src/components/internal/FormFields/FieldError/FieldError.tsx
@@ -5,12 +5,13 @@ import cx from 'classnames';
 interface FieldErrorProps {
     id?: string;
     errorMessage: string;
+    testId?: string;
     withTopMargin?: boolean;
 }
 
-export const FieldError = ({ id, errorMessage, withTopMargin }: FieldErrorProps) => {
+export const FieldError = ({ id, errorMessage, testId, withTopMargin }: FieldErrorProps) => {
     return (
-        <div className={cx('adyen-pe-field-error', { 'adyen-pe-field-error--with-top-margin': withTopMargin })} id={id}>
+        <div className={cx('adyen-pe-field-error', { 'adyen-pe-field-error--with-top-margin': withTopMargin })} id={id} data-testid={testId}>
             <Icon name="cross-circle-fill" className="adyen-pe-field-error__icon" />
             <span className="adyen-pe-field-error__message">{errorMessage}</span>
         </div>
diff --git a/src/components/internal/FormFields/FileInput/components/Dropzone.tsx b/src/components/internal/FormFields/FileInput/components/Dropzone.tsx
index 121fc7e80..3307acc4f 100644
--- a/src/components/internal/FormFields/FileInput/components/Dropzone.tsx
+++ b/src/components/internal/FormFields/FileInput/components/Dropzone.tsx
@@ -193,7 +193,7 @@ export const Dropzone = fixedForwardRef<DropzoneProps, HTMLInputElement>((props,
                     onChange={handleFileChange}
                     onInvalid={handleInputInvalid}
                     aria-invalid={isInvalid}
-                    data-testId="dropzone-input"
+                    data-testid="dropzone-input"
                 />
 
                 {/* Using the label element here to expose a user interaction surface for the file input element. */}
diff --git a/src/components/internal/FormFields/InputBase.tsx b/src/components/internal/FormFields/InputBase.tsx
index afffe2872..056936c09 100644
--- a/src/components/internal/FormFields/InputBase.tsx
+++ b/src/components/internal/FormFields/InputBase.tsx
@@ -20,6 +20,7 @@ function InputBase(
         onBlur,
         onFocusHandler,
         errorMessage,
+        errorTestId,
         iconBeforeSlot,
         iconAfterSlot,
         dropdown,
@@ -111,6 +112,7 @@ function InputBase(
         isInvalid: iiv,
         isValid: iv,
         isCollatingErrors: ce,
+        errorTestId: eti,
         autoFocus,
         autofocus,
         ...newProps
@@ -196,7 +198,7 @@ function InputBase(
             ) : (
                 inputElement
             )}
-            {isInvalid && errorMessage && <FieldError id={uniqueId} errorMessage={errorMessage} />}
+            {isInvalid && errorMessage && <FieldError id={uniqueId} errorMessage={errorMessage} testId={errorTestId} />}
         </>
     );
 }
diff --git a/src/components/internal/FormFields/Select/BalanceAccountSelector/BalanceAccountSelector.tsx b/src/components/internal/FormFields/Select/BalanceAccountSelector/BalanceAccountSelector.tsx
index 4902a9295..fa2323523 100644
--- a/src/components/internal/FormFields/Select/BalanceAccountSelector/BalanceAccountSelector.tsx
+++ b/src/components/internal/FormFields/Select/BalanceAccountSelector/BalanceAccountSelector.tsx
@@ -30,7 +30,12 @@ const BalanceAccountSelector = memo(
                     <div className={data.contentClassName}>
                         {data.item.name && <span className={BA_SELECTOR_ACCOUNT_LABEL_CLASS}>{data.item.name}</span>}
                         {data.item.id !== ALL_BALANCE_ACCOUNTS_SELECTION_ID && (
-                            <span className={data.item.name ? BA_SELECTOR_ACCOUNT_ID_CLASS : BA_SELECTOR_ACCOUNT_LABEL_CLASS}>{data.item.id}</span>
+                            <span
+                                className={data.item.name ? BA_SELECTOR_ACCOUNT_ID_CLASS : BA_SELECTOR_ACCOUNT_LABEL_CLASS}
+                                data-testid="balance-account-id"
+                            >
+                                {data.item.id}
+                            </span>
                         )}
                     </div>
                     {renderDefaultSingleSelectionCheckedness(data)}
diff --git a/src/components/internal/FormFields/types.ts b/src/components/internal/FormFields/types.ts
index dae4a2697..8be2681b5 100644
--- a/src/components/internal/FormFields/types.ts
+++ b/src/components/internal/FormFields/types.ts
@@ -45,6 +45,7 @@ export interface InputBaseProps {
     role?: JSX.HTMLAttributes<HTMLInputElement>['role'];
     min?: number;
     errorMessage?: string;
+    errorTestId?: string;
     lang?: HTMLInputElement['lang'];
     iconBeforeSlot?: ComponentChildren;
     iconAfterSlot?: ComponentChildren;
diff --git a/src/components/internal/FormWrappers/FormField.tsx b/src/components/internal/FormWrappers/FormField.tsx
index 253d8f1af..8a39c7059 100644
--- a/src/components/internal/FormWrappers/FormField.tsx
+++ b/src/components/internal/FormWrappers/FormField.tsx
@@ -10,11 +10,12 @@ const FormField = ({
     supportText,
     children,
     className,
-}: PropsWithChildren<{ label: string; optional: boolean; supportText?: string; className?: string }>) => {
+    testId,
+}: PropsWithChildren<{ label: string; optional: boolean; supportText?: string; className?: string; testId?: string }>) => {
     const { i18n } = useCoreContext();
 
     return (
-        <div className={cx('adyen-pe-payment-link-creation-form__field-container', className)}>
+        <div className={cx('adyen-pe-payment-link-creation-form__field-container', className)} role="group" aria-label={label} data-testid={testId}>
             <div className="adyen-pe-payment-link-creation-form__field-label-container">
                 <Typography
                     el={TypographyElement.SPAN}
diff --git a/src/components/internal/FormWrappers/FormSelect.tsx b/src/components/internal/FormWrappers/FormSelect.tsx
index b1fcd527f..dfa666b24 100644
--- a/src/components/internal/FormWrappers/FormSelect.tsx
+++ b/src/components/internal/FormWrappers/FormSelect.tsx
@@ -40,6 +40,7 @@ export function FormSelect<TFieldValues>({
     validate,
 }: FormSelectProps<TFieldValues>) {
     const { control, fieldsConfig, getValues, setValue } = useWizardFormContext<TFieldValues>();
+    const fieldNameValue = String(fieldName);
     const isRequired = useMemo(() => isRequiredProp ?? fieldsConfig[fieldName]?.required, [fieldsConfig, fieldName, isRequiredProp]);
     const isReadOnly = useMemo(() => isReadOnlyProp ?? fieldsConfig[fieldName]?.readOnly, [fieldsConfig, fieldName, isReadOnlyProp]);
 
@@ -60,7 +61,7 @@ export function FormSelect<TFieldValues>({
 
     return (
         <VisibleField name={fieldName}>
-            <FormField label={label} optional={!isRequired && !hideOptionalLabel} className={className}>
+            <FormField label={label} optional={!isRequired && !hideOptionalLabel} className={className} testId={`form-field-${fieldNameValue}`}>
                 <Controller<TFieldValues>
                     name={fieldName}
                     control={control}
@@ -91,7 +92,9 @@ export function FormSelect<TFieldValues>({
                                     selected={field.value as string}
                                     fitPosition
                                 />
-                                {isInvalid && fieldState.error?.message && <FieldError errorMessage={fieldState.error?.message} withTopMargin />}
+                                {isInvalid && fieldState.error?.message && (
+                                    <FieldError errorMessage={fieldState.error?.message} testId={`field-error-${fieldNameValue}`} withTopMargin />
+                                )}
                             </div>
                         );
                     }}
diff --git a/src/components/internal/FormWrappers/FormTextInput.tsx b/src/components/internal/FormWrappers/FormTextInput.tsx
index 802089eee..bc9eb409f 100644
--- a/src/components/internal/FormWrappers/FormTextInput.tsx
+++ b/src/components/internal/FormWrappers/FormTextInput.tsx
@@ -49,6 +49,7 @@ export function FormTextInput<TFieldValues>({
 }: FormTextInputProps<TFieldValues>) {
     const { control, fieldsConfig } = useWizardFormContext<TFieldValues>();
     const { i18n } = useCoreContext();
+    const fieldNameValue = String(fieldName);
 
     const isRequired = useMemo(() => isRequiredProp ?? fieldsConfig[fieldName]?.required, [fieldsConfig, fieldName, isRequiredProp]);
     const isReadOnly = useMemo(() => isReadOnlyProp ?? fieldsConfig[fieldName]?.readOnly, [fieldsConfig, fieldName, isReadOnlyProp]);
@@ -78,7 +79,13 @@ export function FormTextInput<TFieldValues>({
 
     return (
         <VisibleField name={fieldName}>
-            <FormField label={label} optional={!isRequired && !hideOptionalLabel} supportText={supportText} className={className}>
+            <FormField
+                label={label}
+                optional={!isRequired && !hideOptionalLabel}
+                supportText={supportText}
+                className={className}
+                testId={`form-field-${fieldNameValue}`}
+            >
                 <Controller<TFieldValues>
                     name={fieldName}
                     control={control}
@@ -99,6 +106,7 @@ export function FormTextInput<TFieldValues>({
                                 isValid={!fieldState.error}
                                 isInvalid={isInvalid}
                                 errorMessage={fieldState.error?.message}
+                                errorTestId={`field-error-${fieldNameValue}`}
                                 onDropdownInput={(...params) => {
                                     onDropdownInput?.(...params);
                                     if (isInvalid) {
diff --git a/src/components/internal/StructuredList/StructuredList.tsx b/src/components/internal/StructuredList/StructuredList.tsx
index 49bfae7e1..9ad3d8bd5 100644
--- a/src/components/internal/StructuredList/StructuredList.tsx
+++ b/src/components/internal/StructuredList/StructuredList.tsx
@@ -58,7 +58,7 @@ export default function StructuredList({
                             <Typography variant={typographyVariant}>{item.label}</Typography>
                         )}
                     </dt>
-                    <dd className={cx(SL_CONTENT_CLASS, VALUE_COL_CLASS)}>
+                    <dd className={cx(SL_CONTENT_CLASS, VALUE_COL_CLASS)} data-testid={`${item.label}-value`}>
                         {item.render ? (
                             item.render(item)
                         ) : renderValue ? (
diff --git a/tests/models/external-components/transactionDetails.page.ts b/tests/models/external-components/transactionDetails.page.ts
index e6dde6ea1..a79a292ba 100644
--- a/tests/models/external-components/transactionDetails.page.ts
+++ b/tests/models/external-components/transactionDetails.page.ts
@@ -4,11 +4,11 @@ import { getTranslatedKey } from '../../utils/utils';
 export class TransactionDetailsPage {
     private readonly root: Locator;
 
-    constructor(page: Page, rootElementSelector = '.adyen-pe-overview-details') {
-        this.root = page.locator(rootElementSelector);
+    constructor(page: Page, rootElementSelector?: string) {
+        this.root = rootElementSelector ? page.locator(rootElementSelector) : page.getByTestId('component-root');
     }
 
     get referenceId(): Locator {
-        return this.root.getByTestId(`${getTranslatedKey('transactions.details.fields.referenceID')}`).locator('dd');
+        return this.root.getByTestId(`${getTranslatedKey('transactions.details.fields.referenceID')}-value`);
     }
 }
diff --git a/tests/models/external-components/transactionsOverview.page.ts b/tests/models/external-components/transactionsOverview.page.ts
index 628ceafd0..7ae6f7225 100644
--- a/tests/models/external-components/transactionsOverview.page.ts
+++ b/tests/models/external-components/transactionsOverview.page.ts
@@ -16,7 +16,7 @@ export class TransactionsOverviewPage {
     public dateFilter: Locator;
     public firstRow: Locator;
 
-    constructor(page: Page, rootElementSelector = '.adyen-pe-transactions-overview-container') {
+    constructor(page: Page, rootElementSelector?: string) {
         this.dataGrid = new DataGridPage(page, rootElementSelector);
         this.dataGridBody = this.dataGrid.gridBody;
         this.firstRow = this.dataGrid.getRow();
diff --git a/tests/models/internal-components/dataGrid.ts b/tests/models/internal-components/dataGrid.ts
index 4e9bbf30f..d1e83c5c6 100644
--- a/tests/models/internal-components/dataGrid.ts
+++ b/tests/models/internal-components/dataGrid.ts
@@ -4,13 +4,15 @@ class DataGridPage {
     public rootElement: Locator;
     public readonly gridBody: Locator;
 
-    constructor(page: Page, rootElementSelector: string) {
-        this.rootElement = page.locator(rootElementSelector).getByRole('table');
+    constructor(page: Page, rootElementSelector?: string) {
+        const rootElement = rootElementSelector ? page.locator(rootElementSelector) : page.getByTestId('component-root');
+
+        this.rootElement = rootElement.getByRole('table');
         this.gridBody = this.rootElement.getByRole('rowgroup').nth(1);
     }
 
     getCell(label: string, row = 0) {
-        return this.getRow(row).locator(`div[aria-labelledby=${label}]`);
+        return this.getRow(row).getByTestId(label);
     }
     getRow(row = 0) {
         return this.gridBody.getByRole('row').nth(row);
diff --git a/tests/models/internal-components/filterBar.ts b/tests/models/internal-components/filterBar.ts
index e3af5b566..324de4f67 100644
--- a/tests/models/internal-components/filterBar.ts
+++ b/tests/models/internal-components/filterBar.ts
@@ -4,8 +4,10 @@ import { getTranslatedKey } from '../../utils/utils';
 class FilterBarPage {
     public rootElement: Locator;
 
-    constructor(page: Page, rootElementSelector: string) {
-        this.rootElement = page.locator(rootElementSelector).getByTestId('filter-bar');
+    constructor(page: Page, rootElementSelector?: string) {
+        const rootElement = rootElementSelector ? page.locator(rootElementSelector) : page.getByTestId('component-root');
+
+        this.rootElement = rootElement.getByTestId('filter-bar');
     }
 
     getFilter(label: string) {
diff --git a/tests/utils/datePicker.ts b/tests/utils/datePicker.ts
index 5c1cdcf89..c4b5cf971 100644
--- a/tests/utils/datePicker.ts
+++ b/tests/utils/datePicker.ts
@@ -3,9 +3,9 @@ import { expect, type Locator } from '@playwright/test';
 export const extractTodayDateFromDatePicker = async (datePicker: Locator) => {
     await expect(datePicker).toBeVisible();
 
-    const monthAndYear = (await datePicker.locator('.adyen-pe-calendar__month-name').textContent()) ?? '';
-    const timezone = (await datePicker.locator('.adyen-pe-datepicker__timezone').textContent()) ?? '';
-    const date = (await datePicker.locator(`[data-today='1']`).textContent()) ?? '';
+    const monthAndYear = (await datePicker.getByTestId('calendar-month-name').textContent()) ?? '';
+    const timezone = (await datePicker.getByTestId('date-picker-timezone').textContent()) ?? '';
+    const date = (await datePicker.getByTestId('calendar-current-day').textContent()) ?? '';
     const month = monthAndYear.slice(0, 3);
     const year = monthAndYear.slice(-4);
 
@@ -24,7 +24,7 @@ export const selectTodayDateFromDatePicker = async (datePicker: Locator) => {
     const today = await extractTodayDateFromDatePicker(datePicker);
 
     // Select today's date from the calendar
-    await datePicker.locator(`[data-today='1']`).click();
+    await datePicker.getByTestId('calendar-current-day').click();
     await expect(dateRangePresetSelectButton).toHaveText('Custom');
 
     // Apply custom date range selection
diff --git a/tests/utils/utils.ts b/tests/utils/utils.ts
index 4fa406cd9..7a07aa782 100644
--- a/tests/utils/utils.ts
+++ b/tests/utils/utils.ts
@@ -128,7 +128,7 @@ export const sleep = async (ms: number = 100) => {
     return new Promise(resolve => setTimeout(resolve, ms));
 };
 
-export const getComponentRoot = (page: Page) => page.locator('.adyen-pe-component');
+export const getComponentRoot = (page: Page) => page.getByTestId('component-root');
 
 export const clickOutsideDialog = async (dialog: Locator) => {
     await expect(dialog).toBeVisible();

From 185aae81d6fb9219dfe2e954c8891e5c0091af8a Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Germ=C3=A1n=20Mora?=
 <46287932+german664@users.noreply.github.com>
Date: Tue, 17 Mar 2026 14:50:41 +0100
Subject: [PATCH 2/4] Update
 src/components/internal/StructuredList/StructuredList.tsx

Co-authored-by: gemini-code-assist[bot] <176961590+gemini-code-assist[bot]@users.noreply.github.com>
---
 src/components/internal/StructuredList/StructuredList.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/internal/StructuredList/StructuredList.tsx b/src/components/internal/StructuredList/StructuredList.tsx
index 9ad3d8bd5..c60cb3930 100644
--- a/src/components/internal/StructuredList/StructuredList.tsx
+++ b/src/components/internal/StructuredList/StructuredList.tsx
@@ -58,7 +58,7 @@ export default function StructuredList({
                             <Typography variant={typographyVariant}>{item.label}</Typography>
                         )}
                     </dt>
-                    <dd className={cx(SL_CONTENT_CLASS, VALUE_COL_CLASS)} data-testid={`${item.label}-value`}>
+                    <dd className={cx(SL_CONTENT_CLASS, VALUE_COL_CLASS)} data-testid={`${item.key}-value`}>
                         {item.render ? (
                             item.render(item)
                         ) : renderValue ? (

From 7bb013ccda813aca5d4fb23123c74e10e4682362 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Germ=C3=A1n=20Mora?=
 <46287932+german664@users.noreply.github.com>
Date: Wed, 25 Mar 2026 12:48:10 +0100
Subject: [PATCH 3/4] Update tests/models/internal-components/dataGrid.ts

Co-authored-by: Glad Chinda <117656861+glad-adyen@users.noreply.github.com>
---
 tests/models/internal-components/dataGrid.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/tests/models/internal-components/dataGrid.ts b/tests/models/internal-components/dataGrid.ts
index d1e83c5c6..2751c0c10 100644
--- a/tests/models/internal-components/dataGrid.ts
+++ b/tests/models/internal-components/dataGrid.ts
@@ -11,7 +11,7 @@ class DataGridPage {
         this.gridBody = this.rootElement.getByRole('rowgroup').nth(1);
     }
 
-    getCell(label: string, row = 0) {
+    getCell(testId: string, row = 0) {
         return this.getRow(row).getByTestId(label);
     }
     getRow(row = 0) {

From a5e7e9e12bb4fdf674da83e6398696ea85fb9170 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Germ=C3=A1n=20Mora?=
 <46287932+german664@users.noreply.github.com>
Date: Thu, 26 Mar 2026 17:17:32 +0100
Subject: [PATCH 4/4] Update tests/models/internal-components/dataGrid.ts

Co-authored-by: Glad Chinda <117656861+glad-adyen@users.noreply.github.com>
---
 tests/models/internal-components/dataGrid.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/tests/models/internal-components/dataGrid.ts b/tests/models/internal-components/dataGrid.ts
index 2751c0c10..5deea46dc 100644
--- a/tests/models/internal-components/dataGrid.ts
+++ b/tests/models/internal-components/dataGrid.ts
@@ -12,7 +12,7 @@ class DataGridPage {
     }
 
     getCell(testId: string, row = 0) {
-        return this.getRow(row).getByTestId(label);
+        return this.getRow(row).getByTestId(testId);
     }
     getRow(row = 0) {
         return this.gridBody.getByRole('row').nth(row);