diff --git a/packages/react-ui/.styleguide/helpers.js b/packages/react-ui/.styleguide/helpers.js
index 7095ab9a751..3e588c60e8c 100644
--- a/packages/react-ui/.styleguide/helpers.js
+++ b/packages/react-ui/.styleguide/helpers.js
@@ -82,6 +82,7 @@ const getCommonSections = () => {
     { name: 'Roadmap', content: path.join(__dirname, '../ROADMAP.md') },
     { name: 'Migration', content: path.join(__dirname, '../MIGRATION.md'), exampleMode: 'expand' },
     { name: 'LocaleContext', content: path.join(__dirname, '../lib/locale/LOCALECONTEXT.md') },
+    { name: 'DataTids', content: path.join(__dirname, '../internal/DataTids/DATATIDS.md') },
     { name: 'SSR', content: path.join(__dirname, '../SSR.md') },
     { name: 'Mobiles', content: path.join(__dirname, '../MOBILES.md') },
     { name: 'Accessibility', content: path.join(__dirname, '../../../accessibility.md') },
diff --git a/packages/react-ui/components/Autocomplete/Autocomplete.tsx b/packages/react-ui/components/Autocomplete/Autocomplete.tsx
index d40d4bec104..3fdc8f2101f 100644
--- a/packages/react-ui/components/Autocomplete/Autocomplete.tsx
+++ b/packages/react-ui/components/Autocomplete/Autocomplete.tsx
@@ -80,6 +80,10 @@ export interface AutocompleteState {
   isMobileOpened: boolean;
 }
 
+export const AutocompleteDataTids = {
+  root: 'Autocomplete__root',
+} as const;
+
 /**
  * Стандартный инпут с подсказками.
  *
@@ -212,7 +216,12 @@ export class Autocomplete extends React.Component<AutocompleteProps, Autocomplet
 
     return (
       <RenderLayer onFocusOutside={this.handleBlur} onClickOutside={this.handleClickOutside} active={focused}>
-        <span className={styles.root(this.theme)} style={{ width }} ref={this.refRootSpan}>
+        <span
+          data-tid={AutocompleteDataTids.root}
+          className={styles.root(this.theme)}
+          style={{ width }}
+          ref={this.refRootSpan}
+        >
           <Input {...inputProps} />
           {isMobile ? this.renderMobileMenu() : this.renderMenu()}
         </span>
diff --git a/packages/react-ui/components/Button/Button.tsx b/packages/react-ui/components/Button/Button.tsx
index ad87edbe088..e954792e8a1 100644
--- a/packages/react-ui/components/Button/Button.tsx
+++ b/packages/react-ui/components/Button/Button.tsx
@@ -163,6 +163,10 @@ export interface ButtonState {
   focusedByTab: boolean;
 }
 
+export const ButtonDataTids = {
+  root: 'Button__root',
+} as const;
+
 @rootNode
 export class Button extends React.Component<ButtonProps, ButtonState> {
   public static __KONTUR_REACT_UI__ = 'Button';
@@ -374,7 +378,7 @@ export class Button extends React.Component<ButtonProps, ButtonState> {
     return (
       <CommonWrapper rootNodeRef={this.setRootNode} {...this.props}>
         <span {...wrapProps}>
-          <button ref={this._ref} {...rootProps}>
+          <button data-tid={ButtonDataTids.root} ref={this._ref} {...rootProps}>
             {innerShadowNode}
             {outlineNode}
             {loadingNode}
diff --git a/packages/react-ui/components/Center/Center.tsx b/packages/react-ui/components/Center/Center.tsx
index 71a1b944106..082dcb20cc4 100644
--- a/packages/react-ui/components/Center/Center.tsx
+++ b/packages/react-ui/components/Center/Center.tsx
@@ -23,6 +23,10 @@ export interface CenterProps
       }
     > {}
 
+export const CenterDataTids = {
+  root: 'Center__root',
+} as const;
+
 /**
  * Контейнер, который центрирует элементы внутри себя.
  */
@@ -47,6 +51,7 @@ export class Center extends React.Component<CenterProps> {
 
     return (
       <div
+        data-tid={CenterDataTids.root}
         {...rest}
         className={cx({
           [styles.root()]: true,
diff --git a/packages/react-ui/components/Checkbox/Checkbox.tsx b/packages/react-ui/components/Checkbox/Checkbox.tsx
index 1244905809c..58bf48cf240 100644
--- a/packages/react-ui/components/Checkbox/Checkbox.tsx
+++ b/packages/react-ui/components/Checkbox/Checkbox.tsx
@@ -63,6 +63,11 @@ export interface CheckboxState {
   indeterminate: boolean;
   isShiftPressed: boolean;
 }
+
+export const CheckboxDataTids = {
+  root: 'Checkbox__root',
+} as const;
+
 @rootNode
 export class Checkbox extends React.PureComponent<CheckboxProps, CheckboxState> {
   public static __KONTUR_REACT_UI__ = 'Checkbox';
@@ -250,6 +255,7 @@ export class Checkbox extends React.PureComponent<CheckboxProps, CheckboxState>
 
     return (
       <label
+        data-tid={CheckboxDataTids.root}
         className={rootClass}
         onMouseEnter={onMouseEnter}
         onMouseLeave={onMouseLeave}
diff --git a/packages/react-ui/components/CurrencyInput/CurrencyInput.tsx b/packages/react-ui/components/CurrencyInput/CurrencyInput.tsx
index f15e9a4573b..52dc4f13db1 100644
--- a/packages/react-ui/components/CurrencyInput/CurrencyInput.tsx
+++ b/packages/react-ui/components/CurrencyInput/CurrencyInput.tsx
@@ -47,6 +47,10 @@ export interface CurrencyInputState {
   focused: boolean;
 }
 
+export const CurrencyInputDataTids = {
+  root: 'CurrencyInput__root',
+} as const;
+
 /**
  * Поле для денежных сумм (и других числовых значений).
  * Принимает любые свойства `Input`.
@@ -141,6 +145,7 @@ export class CurrencyInput extends React.PureComponent<CurrencyInputProps, Curre
 
     return (
       <Input
+        data-tid={CurrencyInputDataTids.root}
         {...rest}
         value={this.state.formatted}
         onBlur={this.handleBlur}
diff --git a/packages/react-ui/components/CurrencyLabel/CurrencyLabel.tsx b/packages/react-ui/components/CurrencyLabel/CurrencyLabel.tsx
index 891585a3d2e..9f9e3e2bbab 100644
--- a/packages/react-ui/components/CurrencyLabel/CurrencyLabel.tsx
+++ b/packages/react-ui/components/CurrencyLabel/CurrencyLabel.tsx
@@ -18,11 +18,15 @@ export const defaultProps = {
   fractionDigits: 2,
 };
 
+export const CurrencyLabelDataTids = {
+  root: 'CurrencyLabel__root',
+} as const;
+
 export const CurrencyLabel = (props: CurrencyLabelProps): JSX.Element => {
   const { value, fractionDigits, currencySymbol } = props;
   return (
     <CommonWrapper {...props}>
-      <span>
+      <span data-tid={CurrencyLabelDataTids.root}>
         {CurrencyHelper.format(value, { fractionDigits })}
         {currencySymbol && String.fromCharCode(0xa0) /* &nbsp; */}
         {currencySymbol}
diff --git a/packages/react-ui/components/DatePicker/DatePicker.tsx b/packages/react-ui/components/DatePicker/DatePicker.tsx
index 293931ec30c..93697d2a08f 100644
--- a/packages/react-ui/components/DatePicker/DatePicker.tsx
+++ b/packages/react-ui/components/DatePicker/DatePicker.tsx
@@ -85,6 +85,12 @@ export interface DatePickerState {
 
 type DatePickerValue = string;
 
+export const DatePickerDataTids = {
+  root: 'DatePicker__root',
+  pickerRoot: 'Picker__root',
+  pickerTodayWrapper: 'Picker__todayWrapper',
+} as const;
+
 @rootNode
 export class DatePicker extends React.PureComponent<DatePickerProps<DatePickerValue>, DatePickerState> {
   public static __KONTUR_REACT_UI__ = 'DatePicker';
@@ -250,7 +256,12 @@ export class DatePicker extends React.PureComponent<DatePickerProps<DatePickerVa
 
     if (this.state.opened) {
       picker = (
-        <DropdownContainer getParent={this.getParent} offsetY={2} align={this.props.menuAlign}>
+        <DropdownContainer
+          data-tid={DatePickerDataTids.root}
+          getParent={this.getParent}
+          offsetY={2}
+          align={this.props.menuAlign}
+        >
           <Picker
             value={date}
             minDate={formattedMinDate}
diff --git a/packages/react-ui/components/DatePicker/Picker.tsx b/packages/react-ui/components/DatePicker/Picker.tsx
index 6044abb7830..1f214ac1437 100644
--- a/packages/react-ui/components/DatePicker/Picker.tsx
+++ b/packages/react-ui/components/DatePicker/Picker.tsx
@@ -11,6 +11,7 @@ import { ThemeContext } from '../../lib/theming/ThemeContext';
 
 import { styles } from './Picker.styles';
 import { DatePickerLocale, DatePickerLocaleHelper } from './locale';
+import { DatePickerDataTids } from './DatePicker';
 
 interface Props {
   maxDate?: CalendarDateShape;
@@ -75,7 +76,11 @@ export class Picker extends React.Component<Props, State> {
     const { date } = this.state;
 
     return (
-      <div className={styles.root(this.theme)} onMouseDown={(e) => e.preventDefault()}>
+      <div
+        data-tid={DatePickerDataTids.pickerRoot}
+        className={styles.root(this.theme)}
+        onMouseDown={(e) => e.preventDefault()}
+      >
         <Calendar
           ref={(c) => (this.calendar = c)}
           value={this.props.value}
@@ -102,7 +107,7 @@ export class Picker extends React.Component<Props, State> {
     const today = new InternalDate({ order, separator }).setComponents(InternalDateGetter.getTodayComponents());
     return (
       <button
-        data-tid="Picker__todayWrapper"
+        data-tid={DatePickerDataTids.pickerTodayWrapper}
         className={styles.todayWrapper(this.theme)}
         onClick={this.handleSelectToday(today)}
         tabIndex={-1}
diff --git a/packages/react-ui/components/Dropdown/Dropdown.tsx b/packages/react-ui/components/Dropdown/Dropdown.tsx
index bc2a63a8bb9..47a22af79c8 100644
--- a/packages/react-ui/components/Dropdown/Dropdown.tsx
+++ b/packages/react-ui/components/Dropdown/Dropdown.tsx
@@ -87,6 +87,10 @@ export interface DropdownProps extends CommonProps {
 
 type DropdownSelectType = Select<React.ReactNode, React.ReactNode>;
 
+export const DropdownDataTids = {
+  root: 'Dropdown__root',
+} as const;
+
 /**
  * Выпадающее меню.
  *
@@ -178,6 +182,7 @@ export class Dropdown extends React.Component<DropdownProps> {
 
     return (
       <Select<React.ReactNode, React.ReactNode>
+        data-tid={DropdownDataTids.root}
         ref={this._refSelect}
         {...filterProps(props, PASS_PROPS)}
         value={caption}
diff --git a/packages/react-ui/components/FileUploader/FileUploader.tsx b/packages/react-ui/components/FileUploader/FileUploader.tsx
index d435bb8f9ee..0e5d74835e0 100644
--- a/packages/react-ui/components/FileUploader/FileUploader.tsx
+++ b/packages/react-ui/components/FileUploader/FileUploader.tsx
@@ -61,6 +61,12 @@ export interface FileUploaderRef {
   reset: () => void;
 }
 
+export const FileUploaderDataTids = {
+  root: 'FileUploader__root',
+  content: 'FileUploader__content',
+  link: 'FileUploader__link',
+} as const;
+
 const defaultRenderFile = (file: FileUploaderAttachedFile, fileNode: React.ReactElement) => fileNode;
 
 const _FileUploader = React.forwardRef<FileUploaderRef, _FileUploaderProps>((props: _FileUploaderProps, ref) => {
@@ -227,7 +233,7 @@ const _FileUploader = React.forwardRef<FileUploaderRef, _FileUploaderProps>((pro
 
   return (
     <CommonWrapper {...props}>
-      <div className={jsStyles.root(theme)} style={useMemoObject({ width })}>
+      <div data-tid={FileUploaderDataTids.root} className={jsStyles.root(theme)} style={useMemoObject({ width })}>
         {!hideFiles && !isSingleMode && !!files.length && <FileUploaderFileList renderFile={renderFile} />}
         <div className={uploadButtonWrapperClassNames}>
           <label
@@ -236,8 +242,8 @@ const _FileUploader = React.forwardRef<FileUploaderRef, _FileUploaderProps>((pro
             ref={labelRef}
             className={uploadButtonClassNames}
           >
-            <div data-tid={'FileUploader__content'} className={jsStyles.content()}>
-              <span data-tid={'FileUploader__link'} className={linkClassNames}>
+            <div data-tid={FileUploaderDataTids.content} className={jsStyles.content()}>
+              <span data-tid={FileUploaderDataTids.link} className={linkClassNames}>
                 {hasOneFileForSingle ? locale.choosedFile : locale.chooseFile}
               </span>
               &nbsp;
diff --git a/packages/react-ui/components/FxInput/FxInput.tsx b/packages/react-ui/components/FxInput/FxInput.tsx
index b7fa770025a..7b2c0c34211 100644
--- a/packages/react-ui/components/FxInput/FxInput.tsx
+++ b/packages/react-ui/components/FxInput/FxInput.tsx
@@ -33,6 +33,10 @@ export interface FxInputProps
       }
     > {}
 
+export const FxInputDataTids = {
+  root: 'FxInput__root',
+} as const;
+
 /** Принимает все свойства `Input`'a */
 @rootNode
 export class FxInput extends React.Component<FxInputProps> {
@@ -87,7 +91,7 @@ export class FxInput extends React.Component<FxInputProps> {
     }
 
     return (
-      <Group width={this.props.width}>
+      <Group data-tid={FxInputDataTids.root} width={this.props.width}>
         {button}
         {this.getProps().type === 'currency' ? (
           <CurrencyInput
diff --git a/packages/react-ui/components/Gapped/Gapped.tsx b/packages/react-ui/components/Gapped/Gapped.tsx
index 0a0bb82ecd9..02ed8183fad 100644
--- a/packages/react-ui/components/Gapped/Gapped.tsx
+++ b/packages/react-ui/components/Gapped/Gapped.tsx
@@ -29,6 +29,11 @@ export interface GappedProps extends CommonProps {
   children: React.ReactNode;
 }
 
+export const GappedDataTids = {
+  vertical: 'Gapped__vertical',
+  horizontal: 'Gapped__horizontal',
+} as const;
+
 /**
  * Контейнер, расстояние между элементами в котором равно `gap`.
  */
@@ -94,7 +99,7 @@ export class Gapped extends React.Component<GappedProps> {
         );
       });
 
-    return <div>{children}</div>;
+    return <div data-tid={GappedDataTids.vertical}>{children}</div>;
   }
 
   private renderHorizontal() {
@@ -109,7 +114,7 @@ export class Gapped extends React.Component<GappedProps> {
     const contStyle: React.CSSProperties = wrap ? { marginTop: -gap - 1, marginLeft: -gap } : { whiteSpace: 'nowrap' };
 
     return (
-      <div style={rootStyle}>
+      <div data-tid={GappedDataTids.horizontal} style={rootStyle}>
         <div style={contStyle}>
           {React.Children.toArray(children)
             .filter(this.filterChildren)
diff --git a/packages/react-ui/components/GlobalLoader/GlobalLoader.tsx b/packages/react-ui/components/GlobalLoader/GlobalLoader.tsx
index b49b0cf8134..6615dfa1577 100644
--- a/packages/react-ui/components/GlobalLoader/GlobalLoader.tsx
+++ b/packages/react-ui/components/GlobalLoader/GlobalLoader.tsx
@@ -72,6 +72,10 @@ interface DefaultProps {
 }
 export type GlobalLoaderComponentProps = GlobalLoaderProps & DefaultProps;
 
+export const GlobalLoaderDataTids = {
+  root: 'GlobalLoader',
+} as const;
+
 let currentGlobalLoader: GlobalLoader;
 
 @rootNode
@@ -160,7 +164,7 @@ export class GlobalLoader extends React.Component<GlobalLoaderComponentProps, Gl
             expectedResponseTime={this.state.expectedResponseTime}
             delayBeforeHide={this.props.delayBeforeHide}
             status={status}
-            data-tid="GlobalLoader"
+            data-tid={GlobalLoaderDataTids.root}
             disableAnimations={this.props.disableAnimations}
           />
         </CommonWrapper>
diff --git a/packages/react-ui/components/Group/Group.tsx b/packages/react-ui/components/Group/Group.tsx
index 6c03c6fade2..f39945d043a 100644
--- a/packages/react-ui/components/Group/Group.tsx
+++ b/packages/react-ui/components/Group/Group.tsx
@@ -74,6 +74,10 @@ const passCornersIfButton = (child: React.ReactNode, firstChild: React.ReactNode
   return child;
 };
 
+export const GroupDataTids = {
+  root: 'Group__root',
+} as const;
+
 @rootNode
 export class Group extends React.Component<GroupProps> {
   public static __KONTUR_REACT_UI__ = 'Group';
@@ -94,7 +98,7 @@ export class Group extends React.Component<GroupProps> {
 
     return (
       <CommonWrapper rootNodeRef={this.setRootNode} {...this.props}>
-        <span className={styles.root()} style={style}>
+        <span data-tid={GroupDataTids.root} className={styles.root()} style={style}>
           {React.Children.map(childrenArray, (child) => {
             if (!child || !React.isValidElement<GroupChildProps>(child)) {
               return null;
diff --git a/packages/react-ui/components/Input/Input.tsx b/packages/react-ui/components/Input/Input.tsx
index 28e49ef7b68..08b449046a1 100644
--- a/packages/react-ui/components/Input/Input.tsx
+++ b/packages/react-ui/components/Input/Input.tsx
@@ -107,6 +107,10 @@ export interface InputState {
   needsPolyfillPlaceholder: boolean;
 }
 
+export const InputDataTids = {
+  root: 'Input__root',
+} as const;
+
 /**
  * Интерфейс пропсов наследуется от `React.InputHTMLAttributes<HTMLInputElement>`.
  *  Все пропсы кроме перечисленных, `className` и `style` передаются в `<input>`
@@ -328,7 +332,7 @@ export class Input extends React.Component<InputProps, InputState> {
     const input = mask ? this.renderMaskedInput(inputProps, mask) : React.createElement('input', inputProps);
 
     return (
-      <label {...labelProps}>
+      <label data-tid={InputDataTids.root} {...labelProps}>
         <span className={styles.sideContainer()}>
           {this.renderLeftIcon()}
           {this.renderPrefix()}
diff --git a/packages/react-ui/components/Link/Link.tsx b/packages/react-ui/components/Link/Link.tsx
index e5026373798..5704acb5cf3 100644
--- a/packages/react-ui/components/Link/Link.tsx
+++ b/packages/react-ui/components/Link/Link.tsx
@@ -61,6 +61,10 @@ export interface LinkState {
   focusedByTab: boolean;
 }
 
+export const LinkDataTids = {
+  root: 'Link__root',
+} as const;
+
 /**
  * Элемент ссылки из HTML.
  */
@@ -149,7 +153,7 @@ export class Link extends React.Component<LinkProps, LinkState> {
     };
 
     return (
-      <a {...rest} {...linkProps}>
+      <a data-tid={LinkDataTids.root} {...rest} {...linkProps}>
         {iconElement}
         {this.props.children}
         {arrow}
diff --git a/packages/react-ui/components/Loader/Loader.tsx b/packages/react-ui/components/Loader/Loader.tsx
index 9be565ebfbc..a87b13318e0 100644
--- a/packages/react-ui/components/Loader/Loader.tsx
+++ b/packages/react-ui/components/Loader/Loader.tsx
@@ -51,6 +51,11 @@ export interface LoaderState {
   spinnerStyle?: object;
 }
 
+export const LoaderDataTids = {
+  veil: 'Loader__Veil',
+  spinner: 'Loader__Spinner',
+} as const;
+
 /**
  * DRAFT - лоадер-контейнер
  */
@@ -217,7 +222,7 @@ export class Loader extends React.Component<LoaderProps, LoaderState> {
 
     return (
       <CommonWrapper rootNodeRef={this.setRootNode} {...this.props}>
-        <div className={styles.loader()} data-tid={isLoaderActive ? 'Loader__Veil' : ''}>
+        <div className={styles.loader()} data-tid={isLoaderActive ? LoaderDataTids.veil : ''}>
           <ZIndex
             priority={'Loader'}
             applyZIndex={isLoaderActive}
@@ -254,7 +259,7 @@ export class Loader extends React.Component<LoaderProps, LoaderState> {
   private renderSpinner(type?: 'mini' | 'normal' | 'big', caption?: React.ReactNode, component?: React.ReactNode) {
     return (
       <span
-        data-tid={'Loader__Spinner'}
+        data-tid={LoaderDataTids.spinner}
         className={cx(styles.spinnerContainer(), { [styles.spinnerContainerSticky()]: this.state.isStickySpinner })}
         style={this.state.spinnerStyle}
       >
diff --git a/packages/react-ui/components/MenuHeader/MenuHeader.tsx b/packages/react-ui/components/MenuHeader/MenuHeader.tsx
index f67fa19b256..35a35ddb30b 100644
--- a/packages/react-ui/components/MenuHeader/MenuHeader.tsx
+++ b/packages/react-ui/components/MenuHeader/MenuHeader.tsx
@@ -11,6 +11,10 @@ export interface MenuHeaderProps extends CommonProps {
   children: ReactNode;
 }
 
+export const MenuHeaderDataTids = {
+  root: 'MenuHeader__root',
+} as const;
+
 /**
  * `Заголовок меню` используется для того, чтобы разделить `элементы меню` на категории в рамках одного меню.
  *
@@ -24,6 +28,7 @@ function MenuHeader({ _enableIconPadding = false, children, ...rest }: MenuHeade
   return (
     <CommonWrapper {...rest}>
       <div
+        data-tid={MenuHeaderDataTids.root}
         className={cx({
           [styles.root(theme)]: true,
           [styles.withLeftPadding(theme)]: _enableIconPadding,
diff --git a/packages/react-ui/components/MenuItem/MenuItem.tsx b/packages/react-ui/components/MenuItem/MenuItem.tsx
index 9ff3e4de19f..e1d7bef30c7 100644
--- a/packages/react-ui/components/MenuItem/MenuItem.tsx
+++ b/packages/react-ui/components/MenuItem/MenuItem.tsx
@@ -76,6 +76,11 @@ export interface MenuItemProps extends CommonProps {
   isMobile?: boolean;
 }
 
+export const MenuItemDataTids = {
+  root: 'MenuItem__root',
+  comment: 'MenuItem__comment',
+} as const;
+
 /**
  *
  * `MenuItem` - это вложенный компонент, задающий базовые стили для элемента меню и позволяющий навигироваться по элементам меню с помощью клавиатуры.
@@ -168,6 +173,7 @@ export class MenuItem extends React.Component<MenuItemProps> {
 
     return (
       <Component
+        data-tid={MenuItemDataTids.root}
         {...rest}
         state={state}
         onMouseOver={this.handleMouseEnterFix}
@@ -179,7 +185,7 @@ export class MenuItem extends React.Component<MenuItemProps> {
         {content}
         {this.props.comment && (
           <div
-            data-tid="MenuItem__comment"
+            data-tid={MenuItemDataTids.comment}
             className={cx({
               [styles.comment(this.theme)]: true,
               [styles.commentHover(this.theme)]: hover,
diff --git a/packages/react-ui/components/MenuSeparator/MenuSeparator.tsx b/packages/react-ui/components/MenuSeparator/MenuSeparator.tsx
index 542a811bedb..983814081d0 100644
--- a/packages/react-ui/components/MenuSeparator/MenuSeparator.tsx
+++ b/packages/react-ui/components/MenuSeparator/MenuSeparator.tsx
@@ -6,6 +6,10 @@ import { CommonProps, CommonWrapper } from '../../internal/CommonWrapper';
 import { styles } from './MenuSeparator.styles';
 
 export type MenuSeparatorProps = CommonProps;
+
+export const MenuSeparatorDataTids = {
+  root: 'MenuSeparator__root',
+} as const;
 /**
  * Добавляет разделительную линию между элементами меню.
  *
@@ -16,7 +20,7 @@ function MenuSeparator(props: MenuSeparatorProps) {
 
   return (
     <CommonWrapper {...props}>
-      <div className={styles.root(theme)} />
+      <div data-tid={MenuSeparatorDataTids.root} className={styles.root(theme)} />
     </CommonWrapper>
   );
 }
diff --git a/packages/react-ui/components/Modal/Modal.tsx b/packages/react-ui/components/Modal/Modal.tsx
index 5c3e671ad99..62100a091a4 100644
--- a/packages/react-ui/components/Modal/Modal.tsx
+++ b/packages/react-ui/components/Modal/Modal.tsx
@@ -71,6 +71,12 @@ export interface ModalState {
   hasPanel: boolean;
 }
 
+export const ModalDataTids = {
+  container: 'modal-container',
+  content: 'modal-content',
+  close: 'modal-close',
+} as const;
+
 /**
  * Модальное окно
  *
@@ -200,7 +206,7 @@ export class Modal extends React.Component<ModalProps, ModalState> {
               onMouseDown={this.handleContainerMouseDown}
               onMouseUp={this.handleContainerMouseUp}
               onClick={this.handleContainerClick}
-              data-tid="modal-container"
+              data-tid={ModalDataTids.container}
             >
               <ResponsiveLayout>
                 {({ isMobile }) => {
@@ -212,7 +218,7 @@ export class Modal extends React.Component<ModalProps, ModalState> {
                         [styles.alignTop()]: Boolean(this.props.alignTop),
                       })}
                       style={isMobile ? undefined : containerStyle}
-                      data-tid="modal-content"
+                      data-tid={ModalDataTids.content}
                     >
                       <div
                         className={cx({ [styles.window(this.theme)]: true, [styles.mobileWindow()]: isMobile })}
diff --git a/packages/react-ui/components/Modal/ModalClose.tsx b/packages/react-ui/components/Modal/ModalClose.tsx
index 22ac2e538c2..7ed27ce4576 100644
--- a/packages/react-ui/components/Modal/ModalClose.tsx
+++ b/packages/react-ui/components/Modal/ModalClose.tsx
@@ -9,6 +9,7 @@ import { CommonWrapper } from '../../internal/CommonWrapper';
 
 import { CloseProps } from './ModalContext';
 import { styles } from './Modal.styles';
+import { ModalDataTids } from './Modal';
 
 export function ModalClose({ disableClose, requestClose, ...otherProps }: CloseProps) {
   const theme = useContext(ThemeContext);
@@ -42,7 +43,7 @@ export function ModalClose({ disableClose, requestClose, ...otherProps }: CloseP
             onClick={requestClose}
             onFocus={handleFocus}
             onBlur={handleBlur}
-            data-tid="modal-close"
+            data-tid={ModalDataTids.close}
             tabIndex={disableClose ? -1 : 0}
           >
             <CrossIcon />
diff --git a/packages/react-ui/components/Modal/ModalFooter.tsx b/packages/react-ui/components/Modal/ModalFooter.tsx
index acff6e7c0ed..06fc8c269ea 100644
--- a/packages/react-ui/components/Modal/ModalFooter.tsx
+++ b/packages/react-ui/components/Modal/ModalFooter.tsx
@@ -20,6 +20,10 @@ export interface ModalFooterProps extends CommonProps {
   children?: ReactNode;
 }
 
+export const ModalFooterDataTids = {
+  root: 'ModalFooter__root',
+} as const;
+
 /**
  * Футер модального окна.
  *
@@ -45,6 +49,7 @@ function ModalFooter(props: ModalFooterProps) {
   const renderContent = (fixed = false) => {
     return (
       <div
+        data-tid={ModalFooterDataTids.root}
         className={cx({
           [styles.footer(theme)]: true,
           [styles.fixedFooter(theme)]: fixed,
diff --git a/packages/react-ui/components/Modal/ModalHeader.tsx b/packages/react-ui/components/Modal/ModalHeader.tsx
index c7f9790a364..0d9a74b34c5 100644
--- a/packages/react-ui/components/Modal/ModalHeader.tsx
+++ b/packages/react-ui/components/Modal/ModalHeader.tsx
@@ -15,6 +15,11 @@ export interface ModalHeaderProps extends CommonProps {
   sticky?: boolean;
   children?: ReactNode;
 }
+
+export const ModalHeaderDataTids = {
+  root: 'ModalHeader__root',
+} as const;
+
 /**
  * Шапка модального окна
  *
@@ -36,6 +41,7 @@ function ModalHeader(props: ModalHeaderProps) {
   const renderContent = (fixed = false) => {
     return (
       <div
+        data-tid={ModalHeaderDataTids.root}
         className={cx({
           [styles.header(theme)]: true,
           [styles.mobileHeader(theme)]: layout.isMobile,
diff --git a/packages/react-ui/components/Paging/Paging.tsx b/packages/react-ui/components/Paging/Paging.tsx
index 18e04d14550..a13df24a766 100644
--- a/packages/react-ui/components/Paging/Paging.tsx
+++ b/packages/react-ui/components/Paging/Paging.tsx
@@ -74,6 +74,14 @@ export interface PagingState {
 
 export type ItemType = number | '.' | 'forward';
 
+export const PagingDataTids = {
+  root: 'Paging__root',
+  dots: 'Paging__dots',
+  forwardLink: 'Paging__forwardLink',
+  pageLinkWrapper: 'Paging__pageLinkWrapper',
+  pageLink: 'Paging__pageLink',
+} as const;
+
 @rootNode
 @locale('Paging', PagingLocaleHelper)
 export class Paging extends React.PureComponent<PagingProps, PagingState> {
@@ -83,7 +91,7 @@ export class Paging extends React.PureComponent<PagingProps, PagingState> {
     component: PagingDefaultComponent,
     shouldBeVisibleWithLessThanTwoPages: true,
     useGlobalListener: false,
-    'data-tid': 'Paging__root',
+    'data-tid': PagingDataTids.root,
   };
 
   public static propTypes = {};
@@ -185,7 +193,7 @@ export class Paging extends React.PureComponent<PagingProps, PagingState> {
 
   private renderDots = (key: string) => {
     return (
-      <span data-tid="Paging__dots" key={key} className={styles.dots(this.theme)}>
+      <span data-tid={PagingDataTids.dots} key={key} className={styles.dots(this.theme)}>
         {'...'}
       </span>
     );
@@ -203,7 +211,7 @@ export class Paging extends React.PureComponent<PagingProps, PagingState> {
     return (
       <Component
         key={'forward'}
-        data-tid="Paging__forwardLink"
+        data-tid={PagingDataTids.forwardLink}
         active={false}
         className={classes}
         onClick={disabled ? emptyHandler : this.goForward}
@@ -229,13 +237,13 @@ export class Paging extends React.PureComponent<PagingProps, PagingState> {
 
     return (
       <span
-        data-tid="Paging__pageLinkWrapper"
+        data-tid={PagingDataTids.pageLinkWrapper}
         key={pageNumber}
         className={styles.pageLinkWrapper()}
         onMouseDown={this.handleMouseDownPageLink}
       >
         <Component
-          data-tid="Paging__pageLink"
+          data-tid={PagingDataTids.pageLink}
           active={active}
           className={classes}
           onClick={handleClick}
diff --git a/packages/react-ui/components/PasswordInput/PasswordInput.tsx b/packages/react-ui/components/PasswordInput/PasswordInput.tsx
index 125dc5be753..f93c6e749cc 100644
--- a/packages/react-ui/components/PasswordInput/PasswordInput.tsx
+++ b/packages/react-ui/components/PasswordInput/PasswordInput.tsx
@@ -26,6 +26,12 @@ export interface PasswordInputState {
   capsLockEnabled?: boolean | null;
 }
 
+export const PasswordInputDataTids = {
+  root: 'PasswordInput',
+  capsLockDetector: 'PasswordInputCapsLockDetector',
+  eyeIcon: 'PasswordInputEyeIcon',
+} as const;
+
 /**
  * Компонент для ввода пароля
  */
@@ -174,9 +180,11 @@ export class PasswordInput extends React.PureComponent<PasswordInputProps, Passw
 
     return (
       <span className={styles.iconWrapper()}>
-        {capsLockEnabled && <span className={styles.capsLockDetector()} data-tid="PasswordInputCapsLockDetector" />}
+        {capsLockEnabled && (
+          <span className={styles.capsLockDetector()} data-tid={PasswordInputDataTids.capsLockDetector} />
+        )}
         <span
-          data-tid="PasswordInputEyeIcon"
+          data-tid={PasswordInputDataTids.eyeIcon}
           className={cx(styles.toggleVisibility(this.theme), this.getEyeWrapperClassname())}
           onClick={this.handleToggleVisibility}
         >
@@ -205,7 +213,7 @@ export class PasswordInput extends React.PureComponent<PasswordInputProps, Passw
 
     return (
       <RenderLayer onFocusOutside={this.hideSymbols} onClickOutside={this.hideSymbols}>
-        <div className={styles.root()}>
+        <div data-tid={PasswordInputDataTids.root} className={styles.root()}>
           <Input ref={this.refInput} type={this.state.visible ? 'text' : 'password'} {...inputProps} />
         </div>
       </RenderLayer>
diff --git a/packages/react-ui/components/Radio/Radio.tsx b/packages/react-ui/components/Radio/Radio.tsx
index e5f20bc66ae..ea119907bce 100644
--- a/packages/react-ui/components/Radio/Radio.tsx
+++ b/packages/react-ui/components/Radio/Radio.tsx
@@ -57,6 +57,10 @@ export interface RadioState {
   focusedByKeyboard: boolean;
 }
 
+export const RadioDataTids = {
+  root: 'Radio__root',
+} as const;
+
 /**
  * Радио-кнопки используются, когда может быть выбран только один вариант из нескольких.
  */
@@ -180,7 +184,7 @@ export class Radio<T> extends React.Component<RadioProps<T>, RadioState> {
     }
 
     return (
-      <label {...labelProps}>
+      <label data-tid={RadioDataTids.root} {...labelProps}>
         <input {...inputProps} />
         <span {...radioProps}>
           <span className={styles.placeholder()} />
diff --git a/packages/react-ui/components/RadioGroup/RadioGroup.tsx b/packages/react-ui/components/RadioGroup/RadioGroup.tsx
index 21196e19e55..c6c22c44b7b 100644
--- a/packages/react-ui/components/RadioGroup/RadioGroup.tsx
+++ b/packages/react-ui/components/RadioGroup/RadioGroup.tsx
@@ -81,6 +81,10 @@ export interface RadioGroupState<T> {
   activeItem?: T;
 }
 
+export const RadioGroupDataTids = {
+  root: 'RadioGroup__root',
+} as const;
+
 /**
  *
  * `children` может содержать любую разметку с компонентами Radio,
@@ -165,7 +169,7 @@ export class RadioGroup<T> extends React.Component<RadioGroupProps<T>, RadioGrou
     return (
       <CommonWrapper rootNodeRef={this.setRootNode} {...this.props}>
         <FocusTrap onBlur={onBlur}>
-          <span ref={this.ref} style={style} className={styles.root()} {...handlers}>
+          <span data-tid={RadioGroupDataTids.root} ref={this.ref} style={style} className={styles.root()} {...handlers}>
             <RadioGroupContext.Provider value={this.getRadioGroupContextValue()}>
               {this.renderChildren()}
             </RadioGroupContext.Provider>
diff --git a/packages/react-ui/components/ScrollContainer/ScrollContainer.tsx b/packages/react-ui/components/ScrollContainer/ScrollContainer.tsx
index ae0469fac4b..254186b63ec 100644
--- a/packages/react-ui/components/ScrollContainer/ScrollContainer.tsx
+++ b/packages/react-ui/components/ScrollContainer/ScrollContainer.tsx
@@ -50,6 +50,11 @@ export interface ScrollContainerProps extends CommonProps {
   disabled?: boolean;
 }
 
+export const ScrollContainerDataTids = {
+  root: 'ScrollContainer__root',
+  inner: 'ScrollContainer__inner',
+} as const;
+
 @rootNode
 export class ScrollContainer extends React.Component<ScrollContainerProps> {
   public static __KONTUR_REACT_UI__ = 'ScrollContainer';
@@ -108,14 +113,19 @@ export class ScrollContainer extends React.Component<ScrollContainerProps> {
 
     return (
       <CommonWrapper rootNodeRef={this.setRootNode} {...this.props}>
-        <div className={styles.root()} onMouseMove={this.handleMouseMove} onMouseLeave={this.handleMouseLeave}>
+        <div
+          data-tid={ScrollContainerDataTids.root}
+          className={styles.root()}
+          onMouseMove={this.handleMouseMove}
+          onMouseLeave={this.handleMouseLeave}
+        >
           {scrollbarY}
           {scrollbarX}
           <div
             style={innerStyle}
             ref={this.refInner}
             className={cx(styles.inner(), globalClasses.inner, isIE11 && styles.innerIE11())}
-            data-tid="ScrollContainer__inner"
+            data-tid={ScrollContainerDataTids.inner}
             onScroll={this.handleNativeScroll}
           >
             {props.children}
diff --git a/packages/react-ui/components/Select/Select.tsx b/packages/react-ui/components/Select/Select.tsx
index d934dffd750..fd4da807bf8 100644
--- a/packages/react-ui/components/Select/Select.tsx
+++ b/packages/react-ui/components/Select/Select.tsx
@@ -58,6 +58,10 @@ const PASS_BUTTON_PROPS = {
   onMouseOver: true,
 };
 
+export const SelectDataTids = {
+  root: 'Select__root',
+} as const;
+
 type SelectItem<TValue, TItem> =
   | [TValue, TItem, React.ReactNode?]
   | TItem
@@ -305,7 +309,11 @@ export class Select<TValue = {}, TItem = {}> extends React.Component<SelectProps
     };
 
     const root = (
-      <span className={cx({ [styles.root()]: true, [styles.rootMobile(this.theme)]: isMobile })} style={style}>
+      <span
+        data-tid={SelectDataTids.root}
+        className={cx({ [styles.root()]: true, [styles.rootMobile(this.theme)]: isMobile })}
+        style={style}
+      >
         {button}
         {this.getMenuRenderer()}
       </span>
diff --git a/packages/react-ui/components/SidePage/SidePage.tsx b/packages/react-ui/components/SidePage/SidePage.tsx
index 6b98f14e6bc..24e5c27d436 100644
--- a/packages/react-ui/components/SidePage/SidePage.tsx
+++ b/packages/react-ui/components/SidePage/SidePage.tsx
@@ -85,6 +85,11 @@ export interface SidePageState {
   hasPanel: boolean;
 }
 
+export const SidePageDataTids = {
+  root: 'SidePage__root',
+  container: 'SidePage__container',
+} as const;
+
 const TRANSITION_TIMEOUT = 200;
 
 /**
@@ -197,7 +202,7 @@ export class SidePage extends React.Component<SidePageProps, SidePageState> {
     return (
       <ZIndex
         priority={'Sidepage'}
-        data-tid="SidePage__root"
+        data-tid={SidePageDataTids.root}
         className={cx({
           [styles.root()]: true,
           [styles.mobileRoot()]: isMobile,
@@ -218,7 +223,7 @@ export class SidePage extends React.Component<SidePageProps, SidePageState> {
         <FocusLock disabled={disableFocusLock || !blockBackground} autoFocus={false} className={styles.focusLock()}>
           <RenderLayer onClickOutside={this.handleClickOutside} active>
             <div
-              data-tid="SidePage__container"
+              data-tid={SidePageDataTids.container}
               className={cx(styles.wrapper(this.theme), {
                 [styles.wrapperLeft()]: fromLeft,
                 [styles.wrapperMarginLeft()]: this.state.hasMargin && fromLeft,
diff --git a/packages/react-ui/components/SidePage/SidePageBody.tsx b/packages/react-ui/components/SidePage/SidePageBody.tsx
index e1dc24bdea1..efeee0430a5 100644
--- a/packages/react-ui/components/SidePage/SidePageBody.tsx
+++ b/packages/react-ui/components/SidePage/SidePageBody.tsx
@@ -12,6 +12,10 @@ import { SidePageContext, SidePageContextType } from './SidePageContext';
 export interface SidePageBodyProps extends CommonProps {
   children?: React.ReactNode;
 }
+
+export const SidePageBodyDataTids = {
+  root: 'SidePageBody__root',
+} as const;
 /**
  * Тело для сайдпейджа
  *
@@ -37,7 +41,10 @@ export class SidePageBody extends React.Component<SidePageBodyProps> {
         {(theme) => {
           return (
             <CommonWrapper rootNodeRef={this.setRootNode} {...this.props}>
-              <div className={cx(styles.body(theme), { [styles.mobileBody()]: this.isMobileLayout })}>
+              <div
+                data-tid={SidePageBodyDataTids.root}
+                className={cx(styles.body(theme), { [styles.mobileBody()]: this.isMobileLayout })}
+              >
                 {this.props.children}
               </div>
             </CommonWrapper>
diff --git a/packages/react-ui/components/SidePage/SidePageContainer.tsx b/packages/react-ui/components/SidePage/SidePageContainer.tsx
index ab64584f877..e91f0ffc522 100644
--- a/packages/react-ui/components/SidePage/SidePageContainer.tsx
+++ b/packages/react-ui/components/SidePage/SidePageContainer.tsx
@@ -12,6 +12,10 @@ import { SidePageContext } from './SidePageContext';
 
 export type SidePageContainerProps = CommonProps;
 
+export const SidePageContainerDataTids = {
+  root: 'SidePageContainer__root',
+} as const;
+
 /**
  * Контейнер с отступами
  *
@@ -43,6 +47,7 @@ export class SidePageContainer extends React.Component<SidePageContainerProps> {
         {({ hasHeader, hasFooter, hasPanel }) => (
           <CommonWrapper rootNodeRef={this.setRootNode} {...this.props}>
             <div
+              data-tid={SidePageContainerDataTids.root}
               className={cx({
                 [styles.container(this.theme)]: true,
                 [styles.containerWithoutHeader(this.theme)]: !hasHeader,
diff --git a/packages/react-ui/components/SidePage/SidePageFooter.tsx b/packages/react-ui/components/SidePage/SidePageFooter.tsx
index a3721a356d0..fb3265d79a3 100644
--- a/packages/react-ui/components/SidePage/SidePageFooter.tsx
+++ b/packages/react-ui/components/SidePage/SidePageFooter.tsx
@@ -21,6 +21,10 @@ export interface SidePageFooterProps extends CommonProps {
   sticky?: boolean;
 }
 
+export const SidePageFooterDataTids = {
+  root: 'SidePageFooter__root',
+} as const;
+
 /**
  * Футер сайдпейджа.
  *
@@ -95,7 +99,11 @@ export class SidePageFooter extends React.Component<SidePageFooterProps> {
   private renderMain() {
     return (
       <CommonWrapper rootNodeRef={this.setRootNode} {...this.props}>
-        <div style={{ height: this.getContentHeight() }} className={styles.footerWrapper()}>
+        <div
+          data-tid={SidePageFooterDataTids.root}
+          style={{ height: this.getContentHeight() }}
+          className={styles.footerWrapper()}
+        >
           <SidePageContext.Consumer>
             {({ getWidth }) => (
               <div
diff --git a/packages/react-ui/components/SidePage/SidePageHeader.tsx b/packages/react-ui/components/SidePage/SidePageHeader.tsx
index ff216c42673..25725ce6e84 100644
--- a/packages/react-ui/components/SidePage/SidePageHeader.tsx
+++ b/packages/react-ui/components/SidePage/SidePageHeader.tsx
@@ -25,6 +25,11 @@ export interface SidePageHeaderState {
   focusedByTab: boolean;
 }
 
+export const SidePageHeaderDataTids = {
+  root: 'SidePageHeader__root',
+  close: 'SidePage__close',
+} as const;
+
 /**
  * Шапка сайдпейджа
  *
@@ -115,7 +120,7 @@ export class SidePageHeader extends React.Component<SidePageHeaderProps, SidePag
 
     return (
       <CommonWrapper rootNodeRef={this.setRootNode} {...this.props}>
-        <div ref={this.wrapperRef} className={styles.headerWrapper()}>
+        <div data-tid={SidePageHeaderDataTids.root} ref={this.wrapperRef} className={styles.headerWrapper()}>
           {isStickyDesktop || isStickyMobile ? (
             <Sticky ref={this.stickyRef} side="top">
               {this.renderHeader}
@@ -179,7 +184,7 @@ export class SidePageHeader extends React.Component<SidePageHeaderProps, SidePag
           onFocus={this.handleFocus}
           onBlur={this.handleBlur}
           onClick={requestClose}
-          data-tid="SidePage__close"
+          data-tid={SidePageHeaderDataTids.close}
           tabIndex={0}
         >
           <CrossIcon />
diff --git a/packages/react-ui/components/Spinner/Spinner.tsx b/packages/react-ui/components/Spinner/Spinner.tsx
index 31ca82574ad..c87405c11b6 100644
--- a/packages/react-ui/components/Spinner/Spinner.tsx
+++ b/packages/react-ui/components/Spinner/Spinner.tsx
@@ -39,6 +39,10 @@ export interface SpinnerProps extends CommonProps {
   color?: React.CSSProperties['color'];
 }
 
+export const SpinnerDataTids = {
+  root: 'Spinner__root',
+} as const;
+
 /**
  * DRAFT - инлайн-лоадер
  */
@@ -93,7 +97,7 @@ export class Spinner extends React.Component<SpinnerProps> {
 
     return (
       <CommonWrapper rootNodeRef={this.setRootNode} {...this.props}>
-        <div className={styles.spinner()}>
+        <div data-tid={SpinnerDataTids.root} className={styles.spinner()}>
           <span className={styles.inner()}>{this.renderSpinner(type, dimmed, inline)}</span>
           {caption && this.renderCaption(type, caption)}
         </div>
diff --git a/packages/react-ui/components/Sticky/Sticky.tsx b/packages/react-ui/components/Sticky/Sticky.tsx
index b1c8b8bfd74..6f19a3d55dc 100644
--- a/packages/react-ui/components/Sticky/Sticky.tsx
+++ b/packages/react-ui/components/Sticky/Sticky.tsx
@@ -36,6 +36,10 @@ export interface StickyState {
   relativeTop: number;
 }
 
+export const StickyDataTids = {
+  root: 'Spinner__root',
+} as const;
+
 @rootNode
 export class Sticky extends React.Component<StickyProps, StickyState> {
   public static __KONTUR_REACT_UI__ = 'Sticky';
@@ -117,7 +121,7 @@ export class Sticky extends React.Component<StickyProps, StickyState> {
 
     return (
       <CommonWrapper rootNodeRef={this.setRootNode} {...this.props}>
-        <div ref={this.refWrapper} className={styles.wrapper()}>
+        <div data-tid={StickyDataTids.root} ref={this.refWrapper} className={styles.wrapper()}>
           <ZIndex
             priority="Sticky"
             applyZIndex={fixed}
diff --git a/packages/react-ui/components/Switcher/Switcher.tsx b/packages/react-ui/components/Switcher/Switcher.tsx
index d98432a2aed..40c322d58d7 100644
--- a/packages/react-ui/components/Switcher/Switcher.tsx
+++ b/packages/react-ui/components/Switcher/Switcher.tsx
@@ -17,6 +17,10 @@ import { getSwitcherTheme } from './switcherTheme';
 export type SwitcherSize = ButtonSize;
 type SwitcherItems = string | SwitcherItem;
 
+export const SwitcherDataTids = {
+  root: 'Switcher__root',
+} as const;
+
 export interface SwitcherProps extends CommonProps {
   /**
    * Список строк или список элементов типа `{ label: string, value: string }`
@@ -102,7 +106,7 @@ export class Switcher extends React.Component<SwitcherProps, SwitcherState> {
 
     return (
       <CommonWrapper rootNodeRef={this.setRootNode} {...this.props}>
-        <div className={styles.root()}>
+        <div data-tid={SwitcherDataTids.root} className={styles.root()}>
           {this.props.caption ? <div className={captionClassName}>{this.props.caption}</div> : null}
           <div className={styles.wrap()}>
             <input {...inputProps} />
diff --git a/packages/react-ui/components/Tabs/Indicator.tsx b/packages/react-ui/components/Tabs/Indicator.tsx
index 0bdb4bff97f..f21ae920665 100644
--- a/packages/react-ui/components/Tabs/Indicator.tsx
+++ b/packages/react-ui/components/Tabs/Indicator.tsx
@@ -12,6 +12,7 @@ import { getDOMRect } from '../../lib/dom/getDOMRect';
 import { styles } from './Indicator.styles';
 import { TabsContext, TabsContextType } from './TabsContext';
 import { TabIndicators } from './Tab';
+import { TabsDataTids } from './Tabs';
 
 export interface IndicatorProps {
   className?: string;
@@ -87,6 +88,7 @@ export class Indicator extends React.Component<IndicatorProps, IndicatorState> {
     };
     return (
       <div
+        data-tid={TabsDataTids.indicatorRoot}
         className={cx(
           styles.root(this.theme),
           indicators.primary && styles.primary(this.theme),
diff --git a/packages/react-ui/components/Tabs/Tab.tsx b/packages/react-ui/components/Tabs/Tab.tsx
index 2e52126def8..61ee0e47980 100644
--- a/packages/react-ui/components/Tabs/Tab.tsx
+++ b/packages/react-ui/components/Tabs/Tab.tsx
@@ -24,6 +24,10 @@ export interface TabIndicators {
   disabled: boolean;
 }
 
+export const TabDataTids = {
+  root: 'Tab__root',
+} as const;
+
 export interface TabProps<T extends string = string> extends CommonProps {
   /**
    * Tab content
@@ -206,6 +210,7 @@ export class Tab<T extends string = string> extends React.Component<TabProps<T>,
     return (
       <CommonWrapper rootNodeRef={this.setRootNode} {...this.props}>
         <Component
+          data-tid={TabDataTids.root}
           className={cx({
             [styles.root(this.theme)]: true,
             [styles.vertical(this.theme)]: !!isVertical,
diff --git a/packages/react-ui/components/Tabs/Tabs.tsx b/packages/react-ui/components/Tabs/Tabs.tsx
index deedf052a3b..f370b1d6632 100644
--- a/packages/react-ui/components/Tabs/Tabs.tsx
+++ b/packages/react-ui/components/Tabs/Tabs.tsx
@@ -53,6 +53,11 @@ export interface TabsProps<T extends ValueBaseType = string> extends CommonProps
   width?: number | string;
 }
 
+export const TabsDataTids = {
+  root: 'Tabs__root',
+  indicatorRoot: 'Indicator__root',
+} as const;
+
 /**
  * Tabs wrapper
  *
@@ -100,7 +105,11 @@ export class Tabs<T extends string = string> extends React.Component<TabsProps<T
           this.theme = theme;
           return (
             <CommonWrapper rootNodeRef={this.setRootNode} {...this.props}>
-              <div className={cx(styles.root(this.theme), vertical && styles.vertical())} style={{ width }}>
+              <div
+                data-tid={TabsDataTids.root}
+                className={cx(styles.root(this.theme), vertical && styles.vertical())}
+                style={{ width }}
+              >
                 <TabsContext.Provider
                   value={{
                     vertical,
diff --git a/packages/react-ui/components/Textarea/Textarea.tsx b/packages/react-ui/components/Textarea/Textarea.tsx
index 025fd3bee33..c0421b67aff 100644
--- a/packages/react-ui/components/Textarea/Textarea.tsx
+++ b/packages/react-ui/components/Textarea/Textarea.tsx
@@ -111,6 +111,11 @@ export interface TextareaState {
   isCounterVisible: boolean;
 }
 
+export const TextareaDataTids = {
+  root: 'Textarea__root',
+  counter: 'TextareaCounter__root',
+} as const;
+
 /**
  * Компонент для ввода многострочного текста.
  *
@@ -391,7 +396,7 @@ export class Textarea extends React.Component<TextareaProps, TextareaState> {
         onClickOutside={this.handleCloseCounterHelp}
         active={this.state.isCounterVisible}
       >
-        <label {...rootProps} className={styles.root(this.theme)}>
+        <label data-tid={TextareaDataTids.root} {...rootProps} className={styles.root(this.theme)}>
           {placeholderPolyfill}
           <ResizeDetector onResize={this.reflowCounter}>
             <textarea
diff --git a/packages/react-ui/components/Textarea/TextareaCounter.tsx b/packages/react-ui/components/Textarea/TextareaCounter.tsx
index ee0c43f3616..73c1bfbb571 100644
--- a/packages/react-ui/components/Textarea/TextareaCounter.tsx
+++ b/packages/react-ui/components/Textarea/TextareaCounter.tsx
@@ -8,7 +8,7 @@ import { isFunction } from '../../lib/utils';
 import { Tooltip } from '../Tooltip';
 import { cx } from '../../lib/theming/Emotion';
 
-import { TextareaProps } from './Textarea';
+import { TextareaDataTids, TextareaProps } from './Textarea';
 import { styles } from './Textarea.styles';
 
 export type TextareaCounterProps = {
@@ -49,7 +49,7 @@ export const TextareaCounter = forwardRefAndName<TextareaCounterRef, TextareaCou
     );
 
     return (
-      <div className={styles.counterContainer(theme)} style={{ width, height }}>
+      <div data-tid={TextareaDataTids.counter} className={styles.counterContainer(theme)} style={{ width, height }}>
         <span
           className={cx(styles.counter(theme), {
             [styles.counterError(theme)]: counterValue < 0,
diff --git a/packages/react-ui/components/Toast/Toast.tsx b/packages/react-ui/components/Toast/Toast.tsx
index f20bd86bb2d..ddb9cd99ef6 100644
--- a/packages/react-ui/components/Toast/Toast.tsx
+++ b/packages/react-ui/components/Toast/Toast.tsx
@@ -27,6 +27,13 @@ export interface ToastProps extends CommonProps {
   onClose?: (notification: string, action?: Action) => void;
 }
 
+export const ToastDataTids = {
+  toastStatic: 'StaticToast',
+  toastView: 'ToastView__root',
+  action: 'ToastView__action',
+  close: 'ToastView__close',
+} as const;
+
 /**
  * Показывает уведомления.
  *
diff --git a/packages/react-ui/components/Toast/ToastStatic.tsx b/packages/react-ui/components/Toast/ToastStatic.tsx
index 3e1e9d0492a..3fadc51f628 100644
--- a/packages/react-ui/components/Toast/ToastStatic.tsx
+++ b/packages/react-ui/components/Toast/ToastStatic.tsx
@@ -3,7 +3,7 @@ import ReactDOM from 'react-dom';
 
 import { Nullable } from '../../typings/utility-types';
 
-import { Toast, Action } from './Toast';
+import { Toast, Action, ToastDataTids } from './Toast';
 
 export class ToastStatic {
   public static push = (notification: string, action?: Action) => {
@@ -16,7 +16,7 @@ export class ToastStatic {
       body.appendChild(ToastStatic.node);
 
       ReactDOM.render(
-        <Toast data-tid="StaticToast" ref={(el) => (ToastStatic.instance = el)} />,
+        <Toast data-tid={ToastDataTids.toastStatic} ref={(el) => (ToastStatic.instance = el)} />,
         ToastStatic.node,
         () => ToastStatic._push(notification, action),
       );
diff --git a/packages/react-ui/components/Toast/ToastView.tsx b/packages/react-ui/components/Toast/ToastView.tsx
index 6124eed4f6b..ab4ced2e66e 100644
--- a/packages/react-ui/components/Toast/ToastView.tsx
+++ b/packages/react-ui/components/Toast/ToastView.tsx
@@ -9,6 +9,7 @@ import { CommonProps, CommonWrapper, CommonWrapperRestProps } from '../../intern
 import { rootNode, TSetRootNode } from '../../lib/rootNode';
 
 import { styles } from './ToastView.styles';
+import { ToastDataTids } from './Toast';
 
 export interface ToastViewProps extends CommonProps {
   /**
@@ -62,14 +63,14 @@ export class ToastView extends React.Component<ToastViewProps> {
     const { action, onClose, ...rest } = props;
 
     const link = action ? (
-      <span data-tid="ToastView__action" className={styles.link(this.theme)} onClick={action.handler}>
+      <span data-tid={ToastDataTids.action} className={styles.link(this.theme)} onClick={action.handler}>
         {action.label}
       </span>
     ) : null;
 
     const close = action ? (
       <span className={styles.closeWrapper(this.theme)}>
-        <span data-tid="ToastView__close" className={styles.close(this.theme)} onClick={onClose}>
+        <span data-tid={ToastDataTids.close} className={styles.close(this.theme)} onClick={onClose}>
           <CrossIcon />
         </span>
       </span>
@@ -77,7 +78,7 @@ export class ToastView extends React.Component<ToastViewProps> {
 
     return (
       <ZIndex priority="Toast" className={styles.wrapper(this.theme)}>
-        <div data-tid="ToastView__root" {...rest} className={styles.root(this.theme)} ref={this.setRootNode}>
+        <div data-tid={ToastDataTids.toastView} {...rest} className={styles.root(this.theme)} ref={this.setRootNode}>
           <span>{this.props.children}</span>
           {link}
           {close}
diff --git a/packages/react-ui/components/Toggle/Toggle.tsx b/packages/react-ui/components/Toggle/Toggle.tsx
index b0832a26679..cfdc2ff554b 100644
--- a/packages/react-ui/components/Toggle/Toggle.tsx
+++ b/packages/react-ui/components/Toggle/Toggle.tsx
@@ -82,6 +82,10 @@ export interface ToggleState {
   focusByTab?: boolean;
 }
 
+export const ToggleDataTids = {
+  root: 'Toggle__root',
+} as const;
+
 /**
  * _Примечание:_ под тоглом понимается полный компонент т.е. надпись + переключатель, а не просто переключатель.
  */
@@ -181,7 +185,7 @@ export class Toggle extends React.Component<ToggleProps, ToggleState> {
 
     return (
       <CommonWrapper rootNodeRef={this.setRootNode} {...this.props}>
-        <label className={labelClassNames}>
+        <label data-tid={ToggleDataTids.root} className={labelClassNames}>
           <div
             className={cx(styles.button(this.theme), {
               [styles.buttonRight()]: captionPosition === 'left',
diff --git a/packages/react-ui/components/Token/Token.tsx b/packages/react-ui/components/Token/Token.tsx
index 8c8465340d4..4941f981f70 100644
--- a/packages/react-ui/components/Token/Token.tsx
+++ b/packages/react-ui/components/Token/Token.tsx
@@ -49,6 +49,10 @@ const getValidation = (error: TokenProps['error'], warning: TokenProps['warning'
   return null;
 };
 
+export const TokenDataTids = {
+  root: 'Token__root',
+} as const;
+
 @rootNode
 export class Token extends React.Component<TokenProps> {
   public static __KONTUR_REACT_UI__ = 'Token';
@@ -110,6 +114,7 @@ export class Token extends React.Component<TokenProps> {
     return (
       <CommonWrapper rootNodeRef={this.setRootNode} {...this.props}>
         <div
+          data-tid={TokenDataTids.root}
           className={tokenClassNames}
           onClick={onClick}
           onDoubleClick={onDoubleClick}
diff --git a/packages/react-ui/components/TokenInput/TokenInput.tsx b/packages/react-ui/components/TokenInput/TokenInput.tsx
index ab3277f44e3..d31d92cedbd 100644
--- a/packages/react-ui/components/TokenInput/TokenInput.tsx
+++ b/packages/react-ui/components/TokenInput/TokenInput.tsx
@@ -162,6 +162,11 @@ export const DefaultState = {
   inputValueHeight: 22,
 };
 
+export const TokenInputDataTids = {
+  root: 'TokenInput__root',
+  tokenInputMenu: 'TokenInputMenu__root',
+} as const;
+
 const defaultToKey = <T extends {}>(item: T): string => item.toString();
 const identity = <T extends {}>(item: T): T => item;
 const defaultRenderToken = <T extends {}>(
@@ -337,7 +342,7 @@ export class TokenInput<T = string> extends React.PureComponent<TokenInputProps<
 
     return (
       <CommonWrapper rootNodeRef={this.setRootNode} {...this.props}>
-        <div onMouseEnter={onMouseEnter} onMouseLeave={onMouseLeave}>
+        <div data-tid={TokenInputDataTids.root} onMouseEnter={onMouseEnter} onMouseLeave={onMouseLeave}>
           <label
             ref={this.wrapperRef}
             style={{ width }}
diff --git a/packages/react-ui/components/TokenInput/TokenInputMenu.tsx b/packages/react-ui/components/TokenInput/TokenInputMenu.tsx
index 678236c2948..808085e3b9e 100644
--- a/packages/react-ui/components/TokenInput/TokenInputMenu.tsx
+++ b/packages/react-ui/components/TokenInput/TokenInputMenu.tsx
@@ -7,7 +7,7 @@ import { Menu } from '../../internal/Menu';
 import { Theme } from '../../lib/theming/Theme';
 import { ThemeContext } from '../../lib/theming/ThemeContext';
 
-import { TokenInputMenuAlign, TokenInputProps } from './TokenInput';
+import { TokenInputDataTids, TokenInputMenuAlign, TokenInputProps } from './TokenInput';
 
 export interface TokenInputMenuProps<T> extends ComboBoxMenuProps<T> {
   anchorElement: HTMLElement;
@@ -65,6 +65,7 @@ export class TokenInputMenu<T = string> extends React.Component<TokenInputMenuPr
 
     return (
       <Popup
+        data-tid={TokenInputDataTids.tokenInputMenu}
         opened={opened!}
         positions={['bottom left', 'top left']}
         anchorElement={anchorElement}
diff --git a/packages/react-ui/components/Tooltip/Tooltip.tsx b/packages/react-ui/components/Tooltip/Tooltip.tsx
index b98bc22a139..411ca454227 100644
--- a/packages/react-ui/components/Tooltip/Tooltip.tsx
+++ b/packages/react-ui/components/Tooltip/Tooltip.tsx
@@ -135,6 +135,10 @@ export interface TooltipState {
   focused: boolean;
 }
 
+export const TooltipDataTids = {
+  root: 'Tooltip__root',
+} as const;
+
 const Positions: PopupPositionsType[] = [
   'right bottom',
   'right middle',
@@ -328,6 +332,7 @@ export class Tooltip extends React.PureComponent<TooltipProps, TooltipState> imp
     return (
       <CommonWrapper rootNodeRef={this.setRootNode} {...this.props}>
         <Popup
+          data-tid={TooltipDataTids.root}
           anchorElement={anchorElement}
           hasPin
           hasShadow
diff --git a/packages/react-ui/components/TooltipMenu/TooltipMenu.tsx b/packages/react-ui/components/TooltipMenu/TooltipMenu.tsx
index fa2b36025e8..b69639b473f 100644
--- a/packages/react-ui/components/TooltipMenu/TooltipMenu.tsx
+++ b/packages/react-ui/components/TooltipMenu/TooltipMenu.tsx
@@ -50,6 +50,10 @@ export interface TooltipMenuProps extends CommonProps, Pick<PopupMenuProps, 'onO
   disableAnimations: boolean;
 }
 
+export const TooltipMenuDataTids = {
+  root: 'TooltipMenu__root',
+} as const;
+
 /**
  * Меню, раскрывающееся по клику на переданный в `caption` элемент.
  *
@@ -108,6 +112,7 @@ export class TooltipMenu extends React.Component<TooltipMenuProps> {
     return (
       <CommonWrapper rootNodeRef={this.setRootNode} {...this.props}>
         <PopupMenu
+          data-tid={TooltipMenuDataTids.root}
           menuMaxHeight={this.props.menuMaxHeight}
           menuWidth={this.props.menuWidth}
           caption={this.props.caption}
diff --git a/packages/react-ui/internal/Calendar/Calendar.tsx b/packages/react-ui/internal/Calendar/Calendar.tsx
index 8b151b7b9dd..04bc4ac6e5e 100644
--- a/packages/react-ui/internal/Calendar/Calendar.tsx
+++ b/packages/react-ui/internal/Calendar/Calendar.tsx
@@ -36,6 +36,13 @@ export interface CalendarState {
   touchStart: number;
 }
 
+export const CalendarDataTids = {
+  root: 'Calendar',
+  month: 'MonthView__month',
+  headerMonth: 'MonthView__headerMonth',
+  headerYear: 'MonthView__headerYear',
+} as const;
+
 const getTodayDate = () => {
   const date = new Date();
   return {
@@ -212,7 +219,7 @@ export class Calendar extends React.Component<CalendarProps, CalendarState> {
     const positions = this.getMonthPositions();
     const wrapperStyle = { height: themeConfig(this.theme).WRAPPER_HEIGHT };
     return (
-      <div ref={this.refRoot} className={styles.root(this.theme)} data-tid="Calendar">
+      <div ref={this.refRoot} className={styles.root(this.theme)} data-tid={CalendarDataTids.root}>
         <div style={wrapperStyle} className={styles.wrapper()}>
           {this.state.months
             .map<[number, MonthViewModel]>((x, i) => [positions[i], x])
diff --git a/packages/react-ui/internal/Calendar/MonthView.tsx b/packages/react-ui/internal/Calendar/MonthView.tsx
index d243d9bcdf0..fb708c236fc 100644
--- a/packages/react-ui/internal/Calendar/MonthView.tsx
+++ b/packages/react-ui/internal/Calendar/MonthView.tsx
@@ -8,6 +8,7 @@ import { cx } from '../../lib/theming/Emotion';
 import { styles } from './MonthView.styles';
 import { themeConfig } from './config';
 import * as CDS from './CalendarDateShape';
+import { CalendarDataTids } from './Calendar';
 
 interface MonthViewProps {
   children: React.ReactNode;
@@ -78,7 +79,7 @@ export function MonthView(props: MonthViewProps) {
   };
 
   return (
-    <div data-tid="MonthView__month" className={styles.month(theme)} style={{ top }} key={month + '-' + year}>
+    <div data-tid={CalendarDataTids.month} className={styles.month(theme)} style={{ top }} key={month + '-' + year}>
       <div
         style={{ top: headerTop }}
         className={cx({
@@ -87,7 +88,7 @@ export function MonthView(props: MonthViewProps) {
         })}
       >
         <div style={{ borderBottomColor }} className={styles.monthTitle(theme)}>
-          <div data-tid="MonthView__headerMonth" className={styles.headerMonth(theme)}>
+          <div data-tid={CalendarDataTids.headerMonth} className={styles.headerMonth(theme)}>
             <DateSelect
               disabled={monthSelectDisabled}
               width={85}
@@ -100,7 +101,7 @@ export function MonthView(props: MonthViewProps) {
             />
           </div>
           {isYearVisible && (
-            <div data-tid="MonthView__headerYear" className={styles.headerYear(theme)} style={{ top: yearTop }}>
+            <div data-tid={CalendarDataTids.headerYear} className={styles.headerYear(theme)} style={{ top: yearTop }}>
               <DateSelect
                 disabled={yearSelectDisabled}
                 width={50}
diff --git a/packages/react-ui/internal/CustomComboBox/ComboBoxMenu.tsx b/packages/react-ui/internal/CustomComboBox/ComboBoxMenu.tsx
index edb4da278f1..930d1757c43 100644
--- a/packages/react-ui/internal/CustomComboBox/ComboBoxMenu.tsx
+++ b/packages/react-ui/internal/CustomComboBox/ComboBoxMenu.tsx
@@ -29,6 +29,14 @@ export interface ComboBoxMenuProps<T> {
   isMobile?: boolean;
 }
 
+export const ComboBoxMenuDataTids = {
+  loading: 'ComboBoxMenu__loading',
+  failed: 'ComboBoxMenu__failed',
+  notFound: 'ComboBoxMenu__notFound',
+  items: 'ComboBoxMenu__items',
+  item: 'ComboBoxMenu__item',
+} as const;
+
 @locale('ComboBox', CustomComboBoxLocaleHelper)
 export class ComboBoxMenu<T> extends Component<ComboBoxMenuProps<T>> {
   public static __KONTUR_REACT_UI__ = 'ComboBoxMenu';
@@ -69,7 +77,12 @@ export class ComboBoxMenu<T> extends Component<ComboBoxMenuProps<T>> {
 
     if (loading && (!items || !items.length)) {
       return (
-        <Menu maxHeight={maxHeight} ref={refMenu} disableScrollContainer={isMobile} data-tid="ComboBoxMenu__loading">
+        <Menu
+          maxHeight={maxHeight}
+          ref={refMenu}
+          disableScrollContainer={isMobile}
+          data-tid={ComboBoxMenuDataTids.loading}
+        >
           <MenuItem disabled isMobile={isMobile}>
             <Spinner type="mini" dimmed />
           </MenuItem>
@@ -79,7 +92,12 @@ export class ComboBoxMenu<T> extends Component<ComboBoxMenuProps<T>> {
 
     if (items === null && requestStatus === ComboBoxRequestStatus.Failed) {
       return (
-        <Menu ref={refMenu} maxHeight={maxHeight} disableScrollContainer={isMobile} data-tid="ComboBoxMenu__failed">
+        <Menu
+          ref={refMenu}
+          maxHeight={maxHeight}
+          disableScrollContainer={isMobile}
+          data-tid={ComboBoxMenuDataTids.failed}
+        >
           <MenuItem disabled key="message" isMobile={isMobile}>
             <div style={{ maxWidth: 300, whiteSpace: 'normal' }}>{errorNetworkMessage}</div>
           </MenuItem>
@@ -103,7 +121,7 @@ export class ComboBoxMenu<T> extends Component<ComboBoxMenuProps<T>> {
       if (notFoundValue) {
         return (
           <Menu maxHeight={maxHeight} ref={refMenu} disableScrollContainer={isMobile}>
-            <MenuItem data-tid="ComboBoxMenu__notFound" disabled isMobile={isMobile}>
+            <MenuItem data-tid={ComboBoxMenuDataTids.notFound} disabled isMobile={isMobile}>
               {notFoundValue}
             </MenuItem>
           </Menu>
@@ -127,7 +145,7 @@ export class ComboBoxMenu<T> extends Component<ComboBoxMenuProps<T>> {
     }
 
     return (
-      <Menu data-tid="ComboBoxMenu__items" ref={refMenu} maxHeight={maxHeight} disableScrollContainer={isMobile}>
+      <Menu data-tid={ComboBoxMenuDataTids.items} ref={refMenu} maxHeight={maxHeight} disableScrollContainer={isMobile}>
         {renderedItems}
         {total}
         {renderAddButton && [<MenuSeparator key="separator" />, renderAddButton]}
@@ -154,7 +172,7 @@ export class ComboBoxMenu<T> extends Component<ComboBoxMenuProps<T>> {
 
     return (
       <MenuItem
-        data-tid="ComboBoxMenu__item"
+        data-tid={ComboBoxMenuDataTids.item}
         onClick={() => onValueChange(item)}
         key={index}
         isMobile={this.props.isMobile}
diff --git a/packages/react-ui/internal/CustomComboBox/ComboBoxView.tsx b/packages/react-ui/internal/CustomComboBox/ComboBoxView.tsx
index a4e2f769f85..99e46450ea7 100644
--- a/packages/react-ui/internal/CustomComboBox/ComboBoxView.tsx
+++ b/packages/react-ui/internal/CustomComboBox/ComboBoxView.tsx
@@ -18,6 +18,7 @@ import { rootNode, getRootNode, TSetRootNode } from '../../lib/rootNode';
 import { ComboBoxMenu } from './ComboBoxMenu';
 import { ComboBoxRequestStatus } from './CustomComboBoxTypes';
 import { styles } from './CustomComboBox.styles';
+import { CustomComboBoxDataTids } from './CustomComboBox';
 
 interface ComboBoxViewProps<T> extends CommonProps {
   align?: 'left' | 'center' | 'right';
@@ -136,6 +137,7 @@ export class ComboBoxView<T> extends React.Component<ComboBoxViewProps<T>, Combo
       <CommonWrapper {...this.props}>
         <RenderLayer onClickOutside={onClickOutside} onFocusOutside={onFocusOutside} active={opened}>
           <span
+            data-tid={CustomComboBoxDataTids.comboBoxView}
             style={{ width }}
             className={styles.root()}
             onMouseEnter={onMouseEnter}
diff --git a/packages/react-ui/internal/CustomComboBox/CustomComboBox.tsx b/packages/react-ui/internal/CustomComboBox/CustomComboBox.tsx
index 654c7debb23..6dc45512d3e 100644
--- a/packages/react-ui/internal/CustomComboBox/CustomComboBox.tsx
+++ b/packages/react-ui/internal/CustomComboBox/CustomComboBox.tsx
@@ -88,6 +88,10 @@ export const DefaultState = {
   requestStatus: ComboBoxRequestStatus.Unknown,
 };
 
+export const CustomComboBoxDataTids = {
+  comboBoxView: 'ComboBoxView__root',
+} as const;
+
 @responsiveLayout
 @rootNode
 export class CustomComboBox<T> extends React.PureComponent<CustomComboBoxProps<T>, CustomComboBoxState<T>> {
diff --git a/packages/react-ui/internal/DataTids/DATATIDS.md b/packages/react-ui/internal/DataTids/DATATIDS.md
new file mode 100644
index 00000000000..9a5c9188f9d
--- /dev/null
+++ b/packages/react-ui/internal/DataTids/DATATIDS.md
@@ -0,0 +1,12 @@
+Аттрибуты data-tid экспортируются для компонентов в виде объекта.
+При необходимости добавления аттрибута data-tid необходимо создать пулл-реквест.
+
+У всех компонентов также есть проп data-tid, которым можно переопределять корневые дата-тиды.
+
+Список экспортируемых data-tid:
+
+```jsx harmony
+import {DataTids} from './DataTids';
+
+<DataTids/>
+```
diff --git a/packages/react-ui/internal/DataTids/DataTids.styles.ts b/packages/react-ui/internal/DataTids/DataTids.styles.ts
new file mode 100644
index 00000000000..36679ce8180
--- /dev/null
+++ b/packages/react-ui/internal/DataTids/DataTids.styles.ts
@@ -0,0 +1,42 @@
+import { css, memoizeStyle } from '../../lib/theming/Emotion';
+
+export const styles = memoizeStyle({
+  wrapper() {
+    return css`
+      &:not(:first-child) {
+        margin-top: 20px;
+      }
+    `;
+  },
+  componentName() {
+    return css`
+      font-weight: 700;
+      font-size: 1.25em;
+      margin: 0 5px 5px;
+    `;
+  },
+  row() {
+    return css`
+      display: flex;
+      width: 100%;
+      font-size: 16px;
+    `;
+  },
+
+  leftCell() {
+    return css`
+      padding: 5px;
+      border-right: 1px solid #dadada;
+      border-bottom: 1px solid #dadada;
+      width: 30%;
+      overflow-wrap: anywhere;
+    `;
+  },
+  rightCell() {
+    return css`
+      padding: 5px;
+      border-bottom: 1px solid #dadada;
+      width: 70%;
+    `;
+  },
+});
diff --git a/packages/react-ui/internal/DataTids/DataTids.tsx b/packages/react-ui/internal/DataTids/DataTids.tsx
new file mode 100644
index 00000000000..b9d7179208f
--- /dev/null
+++ b/packages/react-ui/internal/DataTids/DataTids.tsx
@@ -0,0 +1,47 @@
+import React from 'react';
+
+import { Select } from '../../components/Select';
+
+import { styles } from './DataTids.styles';
+import { componentsDataTids } from './componentsDataTids';
+
+export class DataTids extends React.Component<{}, { selectedValue: string }> {
+  public state = {
+    selectedValue: 'все',
+  };
+
+  private components = Object.keys(componentsDataTids);
+
+  private items = ['все', ...this.components];
+
+  private setValue = (value: string) => {
+    this.setState({ selectedValue: value });
+  };
+
+  public render() {
+    return (
+      <div>
+        Выбрать компонент:
+        <Select<string> items={this.items} value={this.state.selectedValue} onValueChange={this.setValue} search />
+        {Object.entries(componentsDataTids).map(([componentName, dataTids], index) => {
+          if (componentName === this.state.selectedValue || this.state.selectedValue === 'все') {
+            return (
+              <div key={index} className={styles.wrapper()}>
+                <div className={styles.componentName()}>{componentName}</div>
+                {Object.values(dataTids).map((value, i) => {
+                  return (
+                    <div key={i} className={styles.row()}>
+                      <div className={styles.leftCell()}>{`${componentName}DataTids.${value[0]}`}</div>
+                      <div className={styles.rightCell()}>{`'${value[1]}'`}</div>
+                    </div>
+                  );
+                })}
+              </div>
+            );
+          }
+          return null;
+        })}
+      </div>
+    );
+  }
+}
diff --git a/packages/react-ui/internal/DataTids/componentsDataTids.ts b/packages/react-ui/internal/DataTids/componentsDataTids.ts
new file mode 100644
index 00000000000..b93eb365925
--- /dev/null
+++ b/packages/react-ui/internal/DataTids/componentsDataTids.ts
@@ -0,0 +1,16 @@
+import * as Components from '../../index';
+
+const tids = Object.keys(Components).filter((componentName) => {
+  if (componentName.match(/datatids/i)) {
+    return componentName;
+  }
+  return null;
+});
+
+export const componentsDataTids: { [key: string]: { [key: string]: string } } = tids.reduce((accum, currTid) => {
+  return {
+    ...accum,
+    // eslint-disable-next-line import/namespace
+    [currTid.replace('DataTids', '')]: Object.entries(Components[currTid as keyof typeof Components]),
+  };
+}, {});
diff --git a/packages/react-ui/internal/DateSelect/DateSelect.tsx b/packages/react-ui/internal/DateSelect/DateSelect.tsx
index 317e406d16d..2d890e78e83 100644
--- a/packages/react-ui/internal/DateSelect/DateSelect.tsx
+++ b/packages/react-ui/internal/DateSelect/DateSelect.tsx
@@ -58,6 +58,11 @@ const calculatePos = (pos: number, minPos: number, maxPos: number) => {
   return pos;
 };
 
+export const DateSelectDataTids = {
+  caption: 'DateSelect__caption',
+  menuItem: 'DateSelect__menuItem',
+} as const;
+
 @locale('DatePicker', DatePickerLocaleHelper)
 export class DateSelect extends React.PureComponent<DateSelectProps, DateSelectState> {
   public static __KONTUR_REACT_UI__ = 'DateSelect';
@@ -186,7 +191,7 @@ export class DateSelect extends React.PureComponent<DateSelectProps, DateSelectS
     };
     return (
       <span {...rootProps}>
-        <div data-tid="DateSelect__caption" className={styles.caption()} onClick={this.open}>
+        <div data-tid={DateSelectDataTids.caption} className={styles.caption()} onClick={this.open}>
           {this.getItem(0)}
           <div
             className={cx({
@@ -262,7 +267,7 @@ export class DateSelect extends React.PureComponent<DateSelectProps, DateSelectS
       };
       items.push(
         <div
-          data-tid="DateSelect__menuItem"
+          data-tid={DateSelectDataTids.menuItem}
           data-prop-disabled={disableItems}
           key={i}
           className={className}
diff --git a/packages/react-ui/internal/FileUploaderControl/FileUploaderFile/FileUploaderFile.tsx b/packages/react-ui/internal/FileUploaderControl/FileUploaderFile/FileUploaderFile.tsx
index 73842194865..36e82455127 100644
--- a/packages/react-ui/internal/FileUploaderControl/FileUploaderFile/FileUploaderFile.tsx
+++ b/packages/react-ui/internal/FileUploaderControl/FileUploaderFile/FileUploaderFile.tsx
@@ -40,6 +40,14 @@ const getTruncatedName = (fileNameWidth: number, fileNameElementWidth: number, n
   return truncate(name, maxCharsCountInSpan);
 };
 
+export const FileUploaderFileDataTids = {
+  file: 'FileUploader__file',
+  fileTooltip: 'FileUploader__fileTooltip',
+  fileName: 'FileUploader__fileName',
+  fileSize: 'FileUploader__fileSize',
+  fileIcon: 'FileUploader__fileIcon',
+} as const;
+
 export const FileUploaderFile = (props: FileUploaderFileProps) => {
   const { file, showSize, error } = props;
   const { id, originalFile, status, validationResult } = file;
@@ -151,27 +159,27 @@ export const FileUploaderFile = (props: FileUploaderFileProps) => {
 
   return (
     <div
-      data-tid="FileUploader__file"
+      data-tid={FileUploaderFileDataTids.file}
       className={jsStyles.root()}
       onMouseEnter={handleMouseEnter}
       onMouseLeave={handleMouseLeave}
     >
-      <Tooltip data-tid="FileUploader__fileTooltip" pos="right middle" render={renderTooltipContent}>
+      <Tooltip data-tid={FileUploaderFileDataTids.fileTooltip} pos="right middle" render={renderTooltipContent}>
         <div className={contentClassNames}>
           <TextWidthHelper ref={textHelperRef} text={name} />
           <Hint maxWidth={'100%'} text={isTruncated ? name : null}>
-            <span data-tid="FileUploader__fileName" ref={fileNameElementRef} className={jsStyles.name()}>
+            <span data-tid={FileUploaderFileDataTids.fileName} ref={fileNameElementRef} className={jsStyles.name()}>
               {truncatedFileName}
             </span>
           </Hint>
           {!!showSize && formattedSize && (
-            <span data-tid="FileUploader__fileSize" className={jsStyles.size()}>
+            <span data-tid={FileUploaderFileDataTids.fileSize} className={jsStyles.size()}>
               {formattedSize}
             </span>
           )}
           <div
             className={iconClassNames}
-            data-tid="FileUploader__fileIcon"
+            data-tid={FileUploaderFileDataTids.fileIcon}
             tabIndex={0}
             onClick={handleRemove}
             onFocus={handleFocus}
diff --git a/packages/react-ui/internal/FileUploaderControl/FileUploaderFileList/FileUploaderFileList.tsx b/packages/react-ui/internal/FileUploaderControl/FileUploaderFileList/FileUploaderFileList.tsx
index cfea108e465..a2a652a3f7a 100644
--- a/packages/react-ui/internal/FileUploaderControl/FileUploaderFileList/FileUploaderFileList.tsx
+++ b/packages/react-ui/internal/FileUploaderControl/FileUploaderFileList/FileUploaderFileList.tsx
@@ -11,13 +11,17 @@ interface FileUploaderFileListProps {
   renderFile: (file: FileUploaderAttachedFile, fileNode: React.ReactElement) => React.ReactNode;
 }
 
+export const FileUploaderFileDataTids = {
+  fileList: 'FileUploader__fileList',
+} as const;
+
 export const FileUploaderFileList = (props: FileUploaderFileListProps) => {
   const { renderFile } = props;
   const { files } = useContext(FileUploaderControlContext);
   const theme = useContext(ThemeContext);
 
   return (
-    <div data-tid="FileUploader__fileList">
+    <div data-tid={FileUploaderFileDataTids.fileList}>
       {files.map((file) => (
         <div key={file.id} className={jsStyles.fileWrapper(theme)}>
           <div className={jsStyles.file()}>{renderFile(file, <FileUploaderFile file={file} showSize />)}</div>
diff --git a/packages/react-ui/internal/InputLikeText/InputLikeText.tsx b/packages/react-ui/internal/InputLikeText/InputLikeText.tsx
index b80aa9855af..9d1f78526b7 100644
--- a/packages/react-ui/internal/InputLikeText/InputLikeText.tsx
+++ b/packages/react-ui/internal/InputLikeText/InputLikeText.tsx
@@ -30,6 +30,11 @@ export interface InputLikeTextProps extends CommonProps, InputProps {
 
 export type InputLikeTextState = Omit<InputState, 'needsPolyfillPlaceholder'>;
 
+export const InputLikeTextDataTids = {
+  root: 'InputLikeText__root',
+  input: 'InputLikeText__input',
+} as const;
+
 @rootNode
 export class InputLikeText extends React.Component<InputLikeTextProps, InputLikeTextState> {
   public static __KONTUR_REACT_UI__ = 'InputLikeText';
@@ -182,6 +187,7 @@ export class InputLikeText extends React.Component<InputLikeTextProps, InputLike
 
     return (
       <span
+        data-tid={InputLikeTextDataTids.root}
         {...rest}
         className={className}
         style={{ width, textAlign: align }}
@@ -196,7 +202,7 @@ export class InputLikeText extends React.Component<InputLikeTextProps, InputLike
         {leftSide}
         <span className={wrapperClass}>
           <span
-            data-tid="InputLikeText__input"
+            data-tid={InputLikeTextDataTids.input}
             className={cx(jsInputStyles.input(this.theme), {
               [styles.absolute()]: !takeContentWidth,
               [jsInputStyles.inputFocus(this.theme)]: focused,
diff --git a/packages/react-ui/internal/InternalMenu/InternalMenu.tsx b/packages/react-ui/internal/InternalMenu/InternalMenu.tsx
index 00d92f62578..629fd834eb7 100644
--- a/packages/react-ui/internal/InternalMenu/InternalMenu.tsx
+++ b/packages/react-ui/internal/InternalMenu/InternalMenu.tsx
@@ -44,6 +44,10 @@ interface MenuState {
   scrollState: ScrollContainerScrollState;
 }
 
+export const InternalMenuDataTids = {
+  root: 'InternalMenu__root',
+} as const;
+
 @rootNode
 export class InternalMenu extends React.PureComponent<MenuProps, MenuState> {
   public static __KONTUR_REACT_UI__ = 'InternalMenu';
@@ -114,6 +118,7 @@ export class InternalMenu extends React.PureComponent<MenuProps, MenuState> {
 
     return (
       <div
+        data-tid={InternalMenuDataTids.root}
         className={cx({
           [styles.root(this.theme)]: true,
           [styles.shadow(this.theme)]: this.props.hasShadow,
diff --git a/packages/react-ui/internal/MaskedInput/MaskedInput.tsx b/packages/react-ui/internal/MaskedInput/MaskedInput.tsx
index 074ebd62731..0dd74d5325f 100644
--- a/packages/react-ui/internal/MaskedInput/MaskedInput.tsx
+++ b/packages/react-ui/internal/MaskedInput/MaskedInput.tsx
@@ -26,6 +26,10 @@ interface MaskedInputState {
   focused: boolean;
 }
 
+export const MaskedInputDataTids = {
+  root: 'MaskedInput__root',
+} as const;
+
 export class MaskedInput extends React.PureComponent<MaskedInputProps, MaskedInputState> {
   public static __KONTUR_REACT_UI__ = 'MaskedInput';
 
@@ -99,7 +103,7 @@ export class MaskedInput extends React.PureComponent<MaskedInputProps, MaskedInp
       .map((_char, i) => (_char === '_' ? <MaskCharLowLine key={i} /> : _char));
 
     return (
-      <span className={styles.container()} x-ms-format-detection="none">
+      <span data-tid={MaskedInputDataTids.root} className={styles.container()} x-ms-format-detection="none">
         <ReactInputMask
           {...inputProps}
           maskChar={null}
diff --git a/packages/react-ui/internal/Menu/Menu.tsx b/packages/react-ui/internal/Menu/Menu.tsx
index 1d24cdf9a3f..64b4e15d6b0 100644
--- a/packages/react-ui/internal/Menu/Menu.tsx
+++ b/packages/react-ui/internal/Menu/Menu.tsx
@@ -32,6 +32,10 @@ export interface MenuState {
   highlightedIndex: number;
 }
 
+export const MenuDataTids = {
+  root: 'Menu__root',
+} as const;
+
 @rootNode
 export class Menu extends React.Component<MenuProps, MenuState> {
   public static __KONTUR_REACT_UI__ = 'Menu';
@@ -115,6 +119,7 @@ export class Menu extends React.Component<MenuProps, MenuState> {
 
     return (
       <div
+        data-tid={MenuDataTids.root}
         className={cx(getAlignRightClass(this.props), {
           [styles.root(this.theme)]: true,
           [styles.shadow(this.theme)]: this.props.hasShadow,
diff --git a/packages/react-ui/internal/MobilePopup/MobilePopup.tsx b/packages/react-ui/internal/MobilePopup/MobilePopup.tsx
index 104d066c702..41f4f0df254 100644
--- a/packages/react-ui/internal/MobilePopup/MobilePopup.tsx
+++ b/packages/react-ui/internal/MobilePopup/MobilePopup.tsx
@@ -35,6 +35,11 @@ interface MobilePopupState {
   isScrolled: boolean;
 }
 
+export const MobilePopupDataTids = {
+  root: 'MobilePopup__root',
+  container: 'MobilePopup__container',
+} as const;
+
 export class MobilePopup extends React.Component<MobilePopupProps, MobilePopupState> {
   public static __KONTUR_REACT_UI__ = 'MobileMenuHeader';
 
@@ -70,12 +75,14 @@ export class MobilePopup extends React.Component<MobilePopupProps, MobilePopupSt
           {(state) => (
             <>
               <div
+                data-tid={MobilePopupDataTids.container}
                 className={cx({
                   [jsStyles.container(this.theme)]: true,
                   [jsStyles.containerOpened()]: state === 'entered',
                 })}
               >
                 <div
+                  data-tid={MobilePopupDataTids.root}
                   className={cx({
                     [jsStyles.root(this.theme)]: true,
                     [jsStyles.rootFullHeight(this.theme)]: this.props.useFullHeight,
diff --git a/packages/react-ui/internal/Popup/Popup.tsx b/packages/react-ui/internal/Popup/Popup.tsx
index 2d16c028223..336456c8630 100644
--- a/packages/react-ui/internal/Popup/Popup.tsx
+++ b/packages/react-ui/internal/Popup/Popup.tsx
@@ -113,6 +113,12 @@ export interface PopupState {
   location: Nullable<PopupLocation>;
 }
 
+export const PopupDataTids = {
+  content: 'PopupContent',
+  contentInner: 'PopupContentInner',
+  popupPin: 'PopupPin__root',
+} as const;
+
 @responsiveLayout
 @rootNode
 export class Popup extends React.Component<PopupProps, PopupState> {
@@ -390,11 +396,11 @@ export class Popup extends React.Component<PopupProps, PopupState> {
     const { backgroundColor, width } = this.props;
 
     return (
-      <div className={styles.content(this.theme)} data-tid={'PopupContent'} ref={this.refForTransition}>
+      <div className={styles.content(this.theme)} data-tid={PopupDataTids.content} ref={this.refForTransition}>
         <div
           className={styles.contentInner(this.theme)}
           style={{ backgroundColor, width: this.calculateWidth(width) }}
-          data-tid={'PopupContentInner'}
+          data-tid={PopupDataTids.contentInner}
         >
           {children}
         </div>
diff --git a/packages/react-ui/internal/Popup/PopupPin.tsx b/packages/react-ui/internal/Popup/PopupPin.tsx
index 306324be1ef..74e511fcf00 100644
--- a/packages/react-ui/internal/Popup/PopupPin.tsx
+++ b/packages/react-ui/internal/Popup/PopupPin.tsx
@@ -5,6 +5,7 @@ import { Nullable } from '../../typings/utility-types';
 
 import { PopupHelper, PositionObject, Rect } from './PopupHelper';
 import { styles } from './PopupPin.styles';
+import { PopupDataTids } from './Popup';
 
 const borderStyles = {
   position: 'absolute',
@@ -95,7 +96,7 @@ export class PopupPin extends React.Component<Props> {
     const styleWrapper = this.getWrapperStyle(options.outerLeft, options.outerTop, options.outerSize);
 
     return (
-      <div className={styles.wrapper()} style={styleWrapper}>
+      <div data-tid={PopupDataTids.popupPin} className={styles.wrapper()} style={styleWrapper}>
         <div style={styleOuter}>
           <div style={styleInner} />
         </div>
diff --git a/packages/react-ui/internal/PopupMenu/PopupMenu.tsx b/packages/react-ui/internal/PopupMenu/PopupMenu.tsx
index 2814175658c..03004078402 100644
--- a/packages/react-ui/internal/PopupMenu/PopupMenu.tsx
+++ b/packages/react-ui/internal/PopupMenu/PopupMenu.tsx
@@ -71,6 +71,11 @@ export const PopupMenuType = {
   Tooltip: 'tooltip',
 };
 
+export const PopupMenuDataTids = {
+  root: 'PopupMenu__root',
+  caption: 'PopupMenu__caption',
+} as const;
+
 const Positions: PopupPositionsType[] = [
   'top left',
   'top center',
@@ -120,7 +125,7 @@ export class PopupMenu extends React.Component<PopupMenuProps, PopupMenuState> {
           onFocusOutside={this.hideMenuWithoutFocusing}
           active={this.state.menuVisible}
         >
-          <div className={styles.container()} style={{ width: this.props.width }}>
+          <div data-tid={PopupMenuDataTids.root} className={styles.container()} style={{ width: this.props.width }}>
             {this.renderCaption()}
             {this.captionWrapper && this.props.children && (
               <Popup
@@ -179,7 +184,7 @@ export class PopupMenu extends React.Component<PopupMenuProps, PopupMenuState> {
 
       return (
         <span
-          data-tid="PopupMenu__caption"
+          data-tid={PopupMenuDataTids.caption}
           className={styles.caption()}
           ref={(element) => (this.captionWrapper = element)}
         >
@@ -190,7 +195,7 @@ export class PopupMenu extends React.Component<PopupMenuProps, PopupMenuState> {
 
     return (
       <span
-        data-tid="PopupMenu__caption"
+        data-tid={PopupMenuDataTids.caption}
         onClick={this.handleCaptionClick}
         onKeyDown={this.handleCaptionKeyDown}
         ref={(element) => (this.captionWrapper = element)}