diff --git a/src/components/BackgroundImage/BackgroundImage.tsx b/src/components/BackgroundImage/BackgroundImage.tsx
index 26e65960d..48911d705 100644
--- a/src/components/BackgroundImage/BackgroundImage.tsx
+++ b/src/components/BackgroundImage/BackgroundImage.tsx
@@ -1,21 +1,24 @@
 import React from 'react';
 
 import {BackgroundImageProps, WithChildren} from '../../models';
-import {block} from '../../utils';
+import {block, getQaAttrubutes} from '../../utils';
 import Image from '../Image/Image';
 
 import './BackgroundImage.scss';
 
-export const qaIdByDefault = 'qa-background-image';
+export const qaIdByDefault = 'background-image';
 
 const b = block('storage-background-image');
 
 const BackgroundImage = (props: WithChildren<BackgroundImageProps>) => {
     const {children, src, desktop, className, imageClassName, style, hide, qa} = props;
+    const qaAttributes = getQaAttrubutes(qa || qaIdByDefault);
 
     return (
         <div className={b(null, className)} style={style} data-qa={qa || qaIdByDefault}>
-            {(src || desktop) && !hide && <Image {...props} className={b('img', imageClassName)} />}
+            {(src || desktop) && !hide && (
+                <Image {...props} className={b('img', imageClassName)} qa={qaAttributes.image} />
+            )}
             {children && <div className={b('container')}>{children}</div>}
         </div>
     );
diff --git a/src/components/BackgroundMedia/BackgroundMedia.tsx b/src/components/BackgroundMedia/BackgroundMedia.tsx
index 5fb2d63f0..d5a505f15 100644
--- a/src/components/BackgroundMedia/BackgroundMedia.tsx
+++ b/src/components/BackgroundMedia/BackgroundMedia.tsx
@@ -2,7 +2,7 @@ import React, {useContext} from 'react';
 
 import {MobileContext} from '../../context/mobileContext';
 import {BackgroundMediaProps} from '../../models';
-import {block} from '../../utils';
+import {block, getQaAttrubutes} from '../../utils';
 import AnimateBlock from '../AnimateBlock/AnimateBlock';
 import Media from '../Media/Media';
 
@@ -22,19 +22,21 @@ const BackgroundMedia = ({
     ...props
 }: BackgroundMediaProps) => {
     const isMobile = useContext(MobileContext);
+    const qaAttributes = getQaAttrubutes(qa, 'media');
 
     return (
         <AnimateBlock
             className={b(null, className)}
             style={{backgroundColor: color}}
             animate={animated}
-            qa={qa}
+            qa={qaAttributes.animate}
         >
             <Media
                 className={b('media', {'full-width-media': fullWidthMedia}, mediaClassName)}
                 imageClassName={b('image')}
                 videoClassName={b('video')}
                 isBackground={true}
+                qa={qaAttributes.media}
                 {...{
                     height: 720,
                     color,
diff --git a/src/components/BackgroundMedia/__tests__/BackgroundMedia.test.tsx b/src/components/BackgroundMedia/__tests__/BackgroundMedia.test.tsx
index c861b3bd6..5fe0a0423 100644
--- a/src/components/BackgroundMedia/__tests__/BackgroundMedia.test.tsx
+++ b/src/components/BackgroundMedia/__tests__/BackgroundMedia.test.tsx
@@ -2,14 +2,8 @@ import React from 'react';
 
 import {render, screen} from '@testing-library/react';
 
+import {getQaAttrubutes} from '../../..';
 import {testAnimated, testCustomClassName} from '../../../../test-utils/shared/common';
-import {qaIdByDefault as qaIdOfBackgroundImage} from '../../../components/BackgroundImage/BackgroundImage';
-import {defaultAnimatedDivQa} from '../../../components/Media/Image/Image';
-import {qaIdByDefault as qaIdOfMedia} from '../../../components/Media/Media';
-import {
-    defaultMediaVideoQa,
-    defaultMediaVideoSourceQa,
-} from '../../../components/Media/Video/Video';
 import {BackgroundMediaProps} from '../../../models';
 import BackgroundMedia from '../BackgroundMedia';
 
@@ -23,10 +17,19 @@ const videoProps = {
     ],
 };
 
+const qaAttributes = getQaAttrubutes(
+    qaId,
+    'media',
+    'media-video',
+    'media-video-source',
+    'media-image-background-image',
+    'media-image-animate',
+);
+
 describe('BackgroundMedia', () => {
     test('render component by default', async () => {
         render(<BackgroundMedia qa={qaId} />);
-        const component = screen.getByTestId(qaId);
+        const component = screen.getByTestId(qaAttributes.animate);
 
         expect(component).toBeInTheDocument();
     });
@@ -35,6 +38,7 @@ describe('BackgroundMedia', () => {
         testCustomClassName<BackgroundMediaProps>({
             component: BackgroundMedia,
             props: {qa: qaId},
+            options: {qaId: qaAttributes.animate},
         });
     });
 
@@ -42,6 +46,7 @@ describe('BackgroundMedia', () => {
         testAnimated<BackgroundMediaProps>({
             component: BackgroundMedia,
             props: {qa: qaId},
+            options: {qaId: qaAttributes.animate},
         });
     });
 
@@ -49,7 +54,7 @@ describe('BackgroundMedia', () => {
         const style = {backgroundColor: 'red'};
 
         render(<BackgroundMedia color={style.backgroundColor} qa={qaId} />);
-        const component = screen.getByTestId(qaId);
+        const component = screen.getByTestId(qaAttributes.media);
 
         expect(component).toHaveStyle(style);
     });
@@ -58,21 +63,21 @@ describe('BackgroundMedia', () => {
         const className = 'my-class';
 
         render(<BackgroundMedia qa={qaId} mediaClassName={className} />);
-        const component = screen.getByTestId(qaIdOfMedia);
+        const component = screen.getByTestId(qaAttributes.media);
 
         expect(component).toHaveClass(className);
     });
 
     test('render video', () => {
         render(<BackgroundMedia qa={qaId} video={videoProps} />);
-        const component = screen.getByTestId(defaultMediaVideoSourceQa);
+        const component = screen.getByTestId(qaAttributes.mediaVideoSource);
 
         expect(component).toBeInTheDocument();
     });
 
     test('render video with videoClassName', () => {
         render(<BackgroundMedia qa={qaId} video={videoProps} />);
-        const component = screen.getByTestId(defaultMediaVideoQa);
+        const component = screen.getByTestId(qaAttributes.mediaVideo);
 
         expect(component).toHaveClass('pc-BackgroundMedia__video');
     });
@@ -80,37 +85,41 @@ describe('BackgroundMedia', () => {
     test('render video with default height', () => {
         const style = {height: '720px'};
         render(<BackgroundMedia qa={qaId} video={videoProps} />);
-        const component = screen.getByTestId(defaultMediaVideoQa);
+        const component = screen.getByTestId(qaAttributes.mediaVideo);
 
         expect(component).toHaveStyle(style);
     });
 
-    test('render video with defined height', () => {
+    test('render video with custom height', () => {
         const height = 300;
         const style = {height: `${height}px`};
 
         render(<BackgroundMedia qa={qaId} video={videoProps} height={height} />);
-        const component = screen.getByTestId(defaultMediaVideoQa);
+        const component = screen.getByTestId(qaAttributes.mediaVideo);
         expect(component).toHaveStyle(style);
     });
 
     test('render with fullWidthMedia prop', () => {
         render(<BackgroundMedia qa={qaId} fullWidthMedia />);
-        const component = screen.getByTestId(qaIdOfMedia);
+        const component = screen.getByTestId(qaAttributes.media);
 
         expect(component).toHaveClass('pc-BackgroundMedia__media_full-width-media');
     });
 
     test('render image', () => {
+        const imageQaAttributes = getQaAttrubutes(
+            qaAttributes.mediaImageBackgroundImage,
+            'image-display-source',
+        );
         render(<BackgroundMedia qa={qaId} image={imageUrl} />);
-        const component = screen.getByTestId(qaIdOfBackgroundImage);
+        const component = screen.getByTestId(imageQaAttributes.imageDisplaySource);
 
         expect(component).toBeInTheDocument();
     });
 
     test('render image with imageClassName', () => {
         render(<BackgroundMedia qa={qaId} image={imageUrl} />);
-        const component = screen.getByTestId(qaIdOfBackgroundImage);
+        const component = screen.getByTestId(qaAttributes.mediaImageBackgroundImage);
 
         expect(component).toHaveClass('pc-BackgroundMedia__image');
     });
@@ -118,24 +127,24 @@ describe('BackgroundMedia', () => {
     test('render image with default height', () => {
         const style = {height: '720px'};
         render(<BackgroundMedia qa={qaId} image={imageUrl} />);
-        const component = screen.getByTestId(qaIdOfBackgroundImage);
+        const component = screen.getByTestId(qaAttributes.mediaImageBackgroundImage);
 
         expect(component).toHaveStyle(style);
     });
 
-    test('render image with defined height', () => {
+    test('render image with custom height', () => {
         const height = 300;
         const style = {height: `${height}px`};
 
         render(<BackgroundMedia qa={qaId} image={imageUrl} height={height} />);
-        const component = screen.getByTestId(qaIdOfBackgroundImage);
+        const component = screen.getByTestId(qaAttributes.mediaImageBackgroundImage);
 
         expect(component).toHaveStyle(style);
     });
 
     test('do not render image when video is provided', () => {
         render(<BackgroundMedia qa={qaId} image={imageUrl} video={videoProps} />);
-        const component = screen.getByTestId(qaIdOfBackgroundImage);
+        const component = screen.getByTestId(qaAttributes.mediaImageBackgroundImage);
 
         expect(component).toHaveClass('pc-media-component-image__item_withVideo');
     });
@@ -144,7 +153,7 @@ describe('BackgroundMedia', () => {
         const style = {transform: 'translateY(0px)'};
 
         render(<BackgroundMedia qa={qaId} parallax image={imageUrl} />);
-        const component = screen.getByTestId(defaultAnimatedDivQa);
+        const component = screen.getByTestId(qaAttributes.mediaImageAnimate);
 
         expect(component).toHaveStyle(style);
     });
diff --git a/src/components/Image/Image.tsx b/src/components/Image/Image.tsx
index e6217d26f..1861be1e7 100644
--- a/src/components/Image/Image.tsx
+++ b/src/components/Image/Image.tsx
@@ -3,6 +3,7 @@ import React, {CSSProperties, Fragment, MouseEventHandler, useContext, useState}
 import {BREAKPOINTS} from '../../constants';
 import {ProjectSettingsContext} from '../../context/projectSettingsContext';
 import {ImageDeviceProps, ImageObjectProps, QAProps} from '../../models';
+import {getQaAttrubutes} from '../../utils';
 import {isCompressible} from '../../utils/imageCompress';
 import ImageBase from '../ImageBase/ImageBase';
 
@@ -42,6 +43,15 @@ const Image = (props: ImageProps) => {
         return null;
     }
 
+    const qaAttributes = getQaAttrubutes(
+        qa,
+        'mobile-webp-source',
+        'mobile-source',
+        'tablet-webp-source',
+        'tablet-source',
+        'display-source',
+    );
+
     const disableWebp =
         projectSettings.disableCompress ||
         disableCompress ||
@@ -57,9 +67,14 @@ const Image = (props: ImageProps) => {
                             srcSet={checkWebP(mobile)}
                             type="image/webp"
                             media={`(max-width: ${BREAKPOINTS.sm}px)`}
+                            data-qa={qaAttributes.mobileWebpSource}
                         />
                     )}
-                    <source srcSet={mobile} media={`(max-width: ${BREAKPOINTS.sm}px)`} />
+                    <source
+                        srcSet={mobile}
+                        media={`(max-width: ${BREAKPOINTS.sm}px)`}
+                        data-qa={qaAttributes.mobileSource}
+                    />
                 </Fragment>
             )}
             {tablet && (
@@ -69,12 +84,23 @@ const Image = (props: ImageProps) => {
                             srcSet={checkWebP(tablet)}
                             type="image/webp"
                             media={`(max-width: ${BREAKPOINTS.md}px)`}
+                            data-qa={qaAttributes.tabletWebpSource}
                         />
                     )}
-                    <source srcSet={tablet} media={`(max-width: ${BREAKPOINTS.md}px)`} />
+                    <source
+                        srcSet={tablet}
+                        media={`(max-width: ${BREAKPOINTS.md}px)`}
+                        data-qa={qaAttributes.tabletSource}
+                    />
                 </Fragment>
             )}
-            {src && !disableWebp && <source srcSet={checkWebP(src)} type="image/webp" />}
+            {src && !disableWebp && (
+                <source
+                    srcSet={checkWebP(src)}
+                    type="image/webp"
+                    data-qa={qaAttributes.displaySource}
+                />
+            )}
             <ImageBase
                 className={className}
                 alt={alt}
diff --git a/src/components/Media/Image/Image.tsx b/src/components/Media/Image/Image.tsx
index a993494cc..153ea04cc 100644
--- a/src/components/Media/Image/Image.tsx
+++ b/src/components/Media/Image/Image.tsx
@@ -4,8 +4,8 @@ import _ from 'lodash';
 import {Interpolation, animated, config, useSpring} from 'react-spring';
 
 import SliderBlock from '../../../blocks/Slider/Slider';
-import {ImageProps, MediaComponentImageProps, SliderType} from '../../../models';
-import {block} from '../../../utils';
+import {ImageProps, MediaComponentImageProps, QAProps, SliderType} from '../../../models';
+import {block, getQaAttrubutes} from '../../../utils';
 import BackgroundImage from '../../BackgroundImage/BackgroundImage';
 import FullscreenImage from '../../FullscreenImage/FullscreenImage';
 import ImageView from '../../Image/Image';
@@ -26,7 +26,7 @@ interface InnerImageProps {
     hasVideoFallback: boolean;
 }
 
-type ImageAllProps = ImageAdditionProps & MediaComponentImageProps & InnerImageProps;
+type ImageAllProps = ImageAdditionProps & MediaComponentImageProps & InnerImageProps & QAProps;
 
 export const defaultAnimatedDivQa = 'animated-div';
 
@@ -40,8 +40,17 @@ const Image = (props: ImageAllProps) => {
         hasVideoFallback,
         video,
         fullscreen,
+        qa,
     } = props;
 
+    const qaAttributes = getQaAttrubutes(
+        qa,
+        'fullscreen-image',
+        'animate',
+        'background-image',
+        'image-view',
+        'slider-block',
+    );
     const [scrollY, setScrollY] = useState(0);
     const [{springScrollY}, springSetScrollY] = useSpring(() => ({
         springScrollY: 0,
@@ -81,6 +90,7 @@ const Image = (props: ImageAllProps) => {
                 {...itemData}
                 imageClassName={imageClass}
                 imageStyle={{height}}
+                qa={qaAttributes.fullscreenImage}
             />
         );
     };
@@ -88,15 +98,27 @@ const Image = (props: ImageAllProps) => {
     const imageBackground = (oneImage: ImageProps) => {
         const imageData = getMediaImage(oneImage);
         return (
-            <animated.div style={{transform: parallaxInterpolate}} data-qa={defaultAnimatedDivQa}>
-                <BackgroundImage {...imageData} className={imageClass} style={{height}} />
+            <animated.div style={{transform: parallaxInterpolate}} data-qa={qaAttributes.animate}>
+                <BackgroundImage
+                    {...imageData}
+                    className={imageClass}
+                    style={{height}}
+                    qa={qaAttributes.backgroundImage}
+                />
             </animated.div>
         );
     };
 
     const imageOnly = (oneImage: ImageProps) => {
         const imageData = getMediaImage(oneImage);
-        return <ImageView {...imageData} className={imageClass} style={{height}} />;
+        return (
+            <ImageView
+                {...imageData}
+                className={imageClass}
+                style={{height}}
+                qa={qaAttributes.imageView}
+            />
+        );
     };
 
     const imageSlider = (imageArray: ImageProps[]) => {
diff --git a/src/components/Media/Media.tsx b/src/components/Media/Media.tsx
index 8eb068b3c..d065a77d6 100644
--- a/src/components/Media/Media.tsx
+++ b/src/components/Media/Media.tsx
@@ -1,7 +1,7 @@
 import React, {ReactElement, useMemo, useState} from 'react';
 
-import {MediaProps} from '../../models';
-import {block} from '../../utils';
+import {MediaProps, QAProps} from '../../models';
+import {block, getQaAttrubutes} from '../../utils';
 import YoutubeBlock from '../VideoBlock/VideoBlock';
 
 import DataLens from './DataLens/DataLens';
@@ -11,14 +11,11 @@ import Video, {VideoAdditionProps} from './Video/Video';
 
 import './Media.scss';
 
-export const qaIdByDefault = 'qa-media';
-
 const b = block('Media');
 
-export interface MediaAllProps extends MediaProps, VideoAdditionProps, ImageAdditionProps {
+export interface MediaAllProps extends MediaProps, VideoAdditionProps, ImageAdditionProps, QAProps {
     className?: string;
     youtubeClassName?: string;
-    qa?: string;
 }
 
 export const Media = (props: MediaAllProps) => {
@@ -42,11 +39,13 @@ export const Media = (props: MediaAllProps) => {
         isBackground,
         playButton,
         customBarControlsClassName,
-        qa = qaIdByDefault,
+        qa,
     } = props;
 
     const [hasVideoFallback, setHasVideoFallback] = useState(false);
 
+    const qaAttributes = getQaAttrubutes(qa, 'video');
+
     const content = useMemo(() => {
         let result: ReactElement | ReactElement[] = [];
 
@@ -62,6 +61,7 @@ export const Media = (props: MediaAllProps) => {
                     video={video}
                     hasVideoFallback={hasVideoFallback}
                     fullscreen={fullscreen}
+                    qa={qaAttributes.image}
                 />,
             );
         }
@@ -83,9 +83,9 @@ export const Media = (props: MediaAllProps) => {
             };
 
             if (fullscreen) {
-                result.push(<FullscreenVideo {...videoProps} />);
+                result.push(<FullscreenVideo {...videoProps} qa={qaAttributes.video} />);
             } else {
-                result.push(<Video {...videoProps} />);
+                result.push(<Video {...videoProps} qa={qaAttributes.video} />);
             }
         }
 
@@ -118,6 +118,9 @@ export const Media = (props: MediaAllProps) => {
         imageClassName,
         isBackground,
         hasVideoFallback,
+        fullscreen,
+        qaAttributes.image,
+        qaAttributes.video,
         videoClassName,
         metrika,
         analyticsEvents,
@@ -126,7 +129,6 @@ export const Media = (props: MediaAllProps) => {
         playButton,
         customBarControlsClassName,
         youtubeClassName,
-        fullscreen,
     ]);
 
     return (
diff --git a/src/components/Media/Video/Video.tsx b/src/components/Media/Video/Video.tsx
index 62b8d4923..8d82e00d6 100644
--- a/src/components/Media/Video/Video.tsx
+++ b/src/components/Media/Video/Video.tsx
@@ -1,7 +1,7 @@
 import React, {useEffect, useMemo, useRef} from 'react';
 
-import {MediaComponentVideoProps, MediaVideoType, PlayButtonProps} from '../../../models';
-import {block} from '../../../utils';
+import {MediaComponentVideoProps, MediaVideoType, PlayButtonProps, QAProps} from '../../../models';
+import {block, getQaAttrubutes} from '../../../utils';
 import ReactPlayerBlock from '../../ReactPlayer/ReactPlayer';
 
 import {getVideoTypesWithPriority} from './utils';
@@ -10,9 +10,6 @@ import './Video.scss';
 
 const b = block('media-component-video');
 
-export const defaultMediaVideoQa = 'media-video';
-export const defaultMediaVideoSourceQa = 'media-video-source';
-
 export interface VideoAdditionProps {
     playButton?: PlayButtonProps;
     customBarControlsClassName?: string;
@@ -25,7 +22,10 @@ interface InnerVideoProps {
     hasVideoFallback: boolean;
 }
 
-export type VideoAllProps = VideoAdditionProps & MediaComponentVideoProps & InnerVideoProps;
+export type VideoAllProps = VideoAdditionProps &
+    MediaComponentVideoProps &
+    InnerVideoProps &
+    QAProps;
 
 const Video = (props: VideoAllProps) => {
     const {
@@ -40,8 +40,11 @@ const Video = (props: VideoAllProps) => {
         playVideo,
         setHasVideoFallback,
         hasVideoFallback,
+        qa,
     } = props;
 
+    const qaAttributes = getQaAttrubutes(qa, 'source');
+
     const ref = useRef<HTMLVideoElement>(null);
 
     useEffect(() => {
@@ -121,7 +124,7 @@ const Video = (props: VideoAllProps) => {
             <div
                 className={b('wrap', videoClassName)}
                 style={{height}}
-                data-qa={defaultMediaVideoQa}
+                data-qa={qaAttributes.default}
             >
                 <video
                     disablePictureInPicture
@@ -136,17 +139,20 @@ const Video = (props: VideoAllProps) => {
                     aria-label={video.ariaLabel}
                 >
                     {getVideoTypesWithPriority(video.src).map(({src, type}, index) => (
-                        <source
-                            key={index}
-                            src={src}
-                            type={type}
-                            data-qa={defaultMediaVideoSourceQa}
-                        />
+                        <source key={index} src={src} type={type} data-qa={qaAttributes.source} />
                     ))}
                 </video>
             </div>
         ) : null;
-    }, [video, videoClassName, hasVideoFallback, height]);
+    }, [
+        video.src,
+        video.ariaLabel,
+        hasVideoFallback,
+        videoClassName,
+        height,
+        qaAttributes.default,
+        qaAttributes.source,
+    ]);
 
     switch (video.type) {
         case MediaVideoType.Player:
diff --git a/src/models/constructor-items/common.ts b/src/models/constructor-items/common.ts
index f5ce430c6..d3c7fd176 100644
--- a/src/models/constructor-items/common.ts
+++ b/src/models/constructor-items/common.ts
@@ -253,11 +253,10 @@ export interface MediaProps
     color?: string;
 }
 
-export interface BackgroundMediaProps extends MediaProps, Animatable {
+export interface BackgroundMediaProps extends MediaProps, Animatable, QAProps {
     fullWidthMedia?: boolean;
     className?: string;
     mediaClassName?: string;
-    qa?: string;
 }
 
 export type Coordinate = number[];
diff --git a/src/utils/blocks.ts b/src/utils/blocks.ts
index c94497fbc..5710097d2 100644
--- a/src/utils/blocks.ts
+++ b/src/utils/blocks.ts
@@ -1,4 +1,4 @@
-import {camelCase} from 'lodash';
+import {camelCase, flatten} from 'lodash';
 
 import {ConstructorBlock, CustomConfig, PCShareSocialNetwork, TextSize} from '../models';
 
@@ -41,7 +41,7 @@ const BLOCK_ELEMENTS = [
 
 const BLOCK_ELEMENTS_REGEX = `<(${BLOCK_ELEMENTS.join('|')})[^>]*>`;
 
-const QA_ATTRIBUTES_KEYS = ['container', 'content', 'wrapper', 'image', 'button'];
+const QA_ATTRIBUTES_KEYS = ['container', 'content', 'wrapper', 'image', 'button', 'animate'];
 
 export function getHeaderTag(size: TextSize) {
     switch (size) {
@@ -133,15 +133,17 @@ export const getShareLink = (
     }
 };
 
-export const getQaAttrubutes = (qa?: string, customKeys: Array<string> = []) => {
+export const getQaAttrubutes = (qa?: string, ...customKeys: (string | Array<string>)[]) => {
     const attributes: Record<string, string> = {};
 
     if (qa) {
-        const keys = QA_ATTRIBUTES_KEYS.concat(customKeys);
+        const keys = QA_ATTRIBUTES_KEYS.concat(flatten(customKeys));
 
         keys.forEach((key) => {
             attributes[camelCase(key)] = `${qa}-${key}`;
         });
+
+        attributes.default = qa;
     }
 
     return attributes;
diff --git a/test-utils/shared/common.tsx b/test-utils/shared/common.tsx
index e29a405e9..0d5028851 100644
--- a/test-utils/shared/common.tsx
+++ b/test-utils/shared/common.tsx
@@ -5,15 +5,17 @@ import React, {ElementType} from 'react';
 import {QAProps} from '../../src/models/common';
 import {ERROR_INPUT_DATA_MESSAGE} from '../constants';
 
+type CommonTestArgs<T> = {
+    component: ElementType;
+    props: T & QAProps;
+    options?: {qaId?: string};
+};
+
 export const testCustomClassName = <T,>({
     component: Component,
     props,
     options,
-}: {
-    component: ElementType;
-    props: T & QAProps;
-    options?: {qaId?: string};
-}) => {
+}: CommonTestArgs<T>) => {
     if (!props.qa) {
         throw new Error(ERROR_INPUT_DATA_MESSAGE);
     }
@@ -24,13 +26,7 @@ export const testCustomClassName = <T,>({
     expect(anchor).toHaveClass(className);
 };
 
-export const testCustomStyle = <T,>({
-    component: Component,
-    props,
-}: {
-    component: ElementType;
-    props: T & QAProps;
-}) => {
+export const testCustomStyle = <T,>({component: Component, props}: CommonTestArgs<T>) => {
     if (!props.qa) {
         throw new Error(ERROR_INPUT_DATA_MESSAGE);
     }
@@ -46,13 +42,15 @@ export const testCustomStyle = <T,>({
 export const testAnimated = async <T,>({
     component: Component,
     props,
-}: {
-    component: ElementType;
-    props: T & QA;
-}) => {
+    options,
+}: CommonTestArgs<T>) => {
+    if (!options?.qaId) {
+        throw new Error(ERROR_INPUT_DATA_MESSAGE);
+    }
+
     const user = userEvent.setup();
     render(<Component animated {...props} />);
-    const component = screen.getByTestId(props.qa);
+    const component = screen.getByTestId(options?.qaId);
     await user.hover(component);
 
     expect(component).toHaveClass('animate');