diff --git a/src/components/BackgroundImage/__tests__/BackgroundImage.test.tsx b/src/components/BackgroundImage/__tests__/BackgroundImage.test.tsx
index c162825d8..d32bc5059 100644
--- a/src/components/BackgroundImage/__tests__/BackgroundImage.test.tsx
+++ b/src/components/BackgroundImage/__tests__/BackgroundImage.test.tsx
@@ -5,6 +5,7 @@ import {render, screen} from '@testing-library/react';
 import {testCustomClassName, testCustomStyle} from '../../../../test-utils/shared/common';
 import {testSourceProps} from '../../../../test-utils/shared/image';
 import {BackgroundImageProps} from '../../../models';
+import {getQaAttrubutes} from '../../../utils';
 import BackgroundImage from '../BackgroundImage';
 
 const qa = 'background-image-component';
@@ -12,6 +13,8 @@ const qa = 'background-image-component';
 const imageSrc =
     'https://storage.yandexcloud.net/cloud-www-assets/constructor/storybook/images/img-gray.png';
 
+const qaAttributes = getQaAttrubutes(qa, 'image-display-source');
+
 describe('BackgroundImage', () => {
     test('Render BackgroundImage by default', async () => {
         render(<BackgroundImage qa={qa} />);
@@ -24,14 +27,16 @@ describe('BackgroundImage', () => {
     test('add image as src prop', () => {
         testSourceProps<BackgroundImageProps>({
             component: BackgroundImage,
-            props: {src: imageSrc, qa: qaId},
+            props: {src: imageSrc, qa},
+            options: {qaId: qaAttributes.imageDisplaySource},
         });
     });
 
     test('add image as desktop prop', () => {
         testSourceProps<BackgroundImageProps>({
             component: BackgroundImage,
-            props: {desktop: imageSrc, qa: qaId},
+            props: {desktop: imageSrc, qa},
+            options: {qaId: qaAttributes.imageDisplaySource},
         });
     });
 
diff --git a/src/components/Button/__tests__/Button.test.tsx b/src/components/Button/__tests__/Button.test.tsx
index 42b0b9862..a7afd6ec7 100644
--- a/src/components/Button/__tests__/Button.test.tsx
+++ b/src/components/Button/__tests__/Button.test.tsx
@@ -64,7 +64,7 @@ describe('Button', () => {
     test('call onClick', async () => {
         testOnClick<ButtonProps>({
             component: Button,
-            props: {text: buttonProps.text, qa: qaId},
+            props: {text: buttonProps.text, qa},
         });
     });
 
diff --git a/src/components/Image/Image.tsx b/src/components/Image/Image.tsx
index 92ab8c075..167f408bd 100644
--- a/src/components/Image/Image.tsx
+++ b/src/components/Image/Image.tsx
@@ -38,14 +38,10 @@ const DeviceSpecificFragment = ({
                 srcSet={checkWebP(src)}
                 type="image/webp"
                 media={`(max-width: ${BREAKPOINTS[breakpoint]}px)`}
-                data-qa={`${qa}-${breakpoint}`}
+                data-qa={`${qa}-compressed`}
             />
         )}
-        <source
-            srcSet={src}
-            media={`(max-width: ${BREAKPOINTS[breakpoint]}px)`}
-            data-qa={`${qa}-${breakpoint}`}
-        />
+        <source srcSet={src} media={`(max-width: ${BREAKPOINTS[breakpoint]}px)`} data-qa={qa} />
     </Fragment>
 );
 
@@ -90,10 +86,20 @@ const Image = (props: ImageProps) => {
     return (
         <picture className={containerClassName} data-qa={qa}>
             {mobile && (
-                <DeviceSpecificFragment src={mobile} disableWebp={disableWebp} breakpoint="sm" />
+                <DeviceSpecificFragment
+                    src={mobile}
+                    disableWebp={disableWebp}
+                    breakpoint="sm"
+                    qa={qaAttributes.mobileSource}
+                />
             )}
             {tablet && (
-                <DeviceSpecificFragment src={tablet} disableWebp={disableWebp} breakpoint="md" />
+                <DeviceSpecificFragment
+                    src={tablet}
+                    disableWebp={disableWebp}
+                    breakpoint="md"
+                    qa={qaAttributes.tabletSource}
+                />
             )}
             {src && !disableWebp && (
                 <source
diff --git a/test-utils/shared/common.tsx b/test-utils/shared/common.tsx
index 7f9b89b33..45b07ae07 100644
--- a/test-utils/shared/common.tsx
+++ b/test-utils/shared/common.tsx
@@ -8,34 +8,49 @@ import {ERROR_INPUT_DATA_MESSAGE} from '../constants';
 type CommonTestArgs<T> = {
     component: ElementType;
     props: T & QAProps;
-    options?: {qaId?: string; customClassNameProp?: string};
+    options?: {qaId?: string; customClassNameProp?: string; role?: string};
+};
+
+const validateInputProps = <T,>(props: CommonTestArgs<T>['props']) => {
+    if (!props.qa) {
+        throw new Error(ERROR_INPUT_DATA_MESSAGE);
+    }
+};
+
+const getComponent = <T,>({props, options}: Omit<CommonTestArgs<T>, 'component'>) => {
+    if (!props.qa) {
+        throw new Error(ERROR_INPUT_DATA_MESSAGE);
+    }
+
+    return options?.role
+        ? screen.getByRole(options.role)
+        : screen.getByTestId(options?.qaId || props.qa);
 };
-import {QA} from './types';
 
 export const testCustomClassName = <T,>({
     component: Component,
     props,
     options,
 }: CommonTestArgs<T>) => {
-    if (!props.qa) {
-        throw new Error(ERROR_INPUT_DATA_MESSAGE);
-    }
+    validateInputProps(props);
 
     const className = 'custom-class-name';
-    render(<Component {...props} className={className} />);
-    const anchor = screen.getByTestId(options?.qaId || props.qa);
-    expect(anchor).toHaveClass(className);
+    const classNameProps = {
+        [options?.customClassNameProp || 'className']: className,
+    };
+    render(<Component {...props} {...classNameProps} />);
+    const component = getComponent({props, options});
+
+    expect(component).toHaveClass(className);
 };
 
 export const testCustomStyle = <T,>({component: Component, props, options}: CommonTestArgs<T>) => {
-    if (!props.qa) {
-        throw new Error(ERROR_INPUT_DATA_MESSAGE);
-    }
+    validateInputProps(props);
 
     const style = {color: 'red'};
 
     render(<Component {...props} style={style} />);
-    const component = screen.getByTestId(options?.qaId || props.qa);
+    const component = getComponent({props, options});
 
     expect(component).toHaveStyle(style);
 };
@@ -45,13 +60,12 @@ export const testAnimated = async <T,>({
     props,
     options,
 }: CommonTestArgs<T>) => {
-    if (!options?.qaId) {
-        throw new Error(ERROR_INPUT_DATA_MESSAGE);
-    }
+    validateInputProps(props);
 
     const user = userEvent.setup();
     render(<Component animated {...props} />);
-    const component = screen.getByTestId(options?.qaId);
+    const component = getComponent({props, options});
+
     await user.hover(component);
 
     expect(component).toHaveClass('animate');
@@ -61,18 +75,14 @@ export const testOnClick = async <T,>({
     component: Component,
     props,
     options,
-}: {
-    component: ElementType;
-    props: T & QAProps;
-    options?: {
-        role?: string;
-    };
-}) => {
+}: CommonTestArgs<T>) => {
+    validateInputProps(props);
+
     const user = userEvent.setup();
     const handleOnClick = jest.fn();
     render(<Component {...props} onClick={handleOnClick} />);
 
-    const component = options?.role ? screen.getByRole('button') : screen.getByTestId(props.qa);
+    const component = getComponent({props, options});
 
     await user.click(component);
     expect(handleOnClick).toHaveBeenCalledTimes(1);
diff --git a/test-utils/shared/image.tsx b/test-utils/shared/image.tsx
index e95a897a8..68074ba84 100644
--- a/test-utils/shared/image.tsx
+++ b/test-utils/shared/image.tsx
@@ -1,25 +1,43 @@
 import {render, screen} from '@testing-library/react';
 import React, {ElementType} from 'react';
 
+import {getQaAttrubutes} from '../../src';
+import {QAProps} from '../../src/models';
 import {isCompressible} from '../../src/utils/imageCompress';
-
-import {QA} from './types';
+import {ERROR_INPUT_DATA_MESSAGE} from '../constants';
 
 export const testSourceProps = <T,>({
     component: Component,
     props,
+    options,
 }: {
     component: ElementType;
     props: T &
-        QA & {
+        QAProps & {
             src?: string;
             tablet?: string;
             desktop?: string;
             mobile?: string;
             disableCompress?: boolean;
         };
+    options?: {
+        qaId?: string;
+    };
 }) => {
     const src = props.src || props.desktop;
+    if (!src) {
+        throw new Error(ERROR_INPUT_DATA_MESSAGE);
+    }
+    const qaId = options?.qaId;
+
+    const qaAttributes = getQaAttrubutes(
+        props.qa,
+        'mobile-source-compressed',
+        'mobile-source',
+        'tablet-source-compressed',
+        'tablet-source',
+        'display-source',
+    );
 
     const disableWebp = src && (props.disableCompress || !isCompressible(src));
 
@@ -29,35 +47,41 @@ export const testSourceProps = <T,>({
     expect(component).toHaveAttribute('src', src);
 
     if (disableWebp) {
-        const sourceWebP = screen.queryByRole('image-webp-default');
+        const sourceWebP = screen.queryByTestId(qaId || qaAttributes.displaySource);
         expect(sourceWebP).not.toBeInTheDocument();
     } else {
-        const sourceWebP = screen.getByRole('image-webp-default');
+        const sourceWebP = screen.getByTestId(qaId || qaAttributes.displaySource);
         expect(sourceWebP).toHaveAttribute('srcset', src + '.webp');
     }
 
     if (props.tablet) {
-        const source = screen.getByRole('image-source-md');
-        expect(source).toHaveAttribute('srcset', props.tablet);
-
         if (disableWebp) {
-            const sourceWebP = screen.queryByRole('image-webp-source-md');
+            const source = screen.getAllByTestId(qaId || qaAttributes.tabletSource);
+            const sourceWebP = screen.queryByTestId(qaId || qaAttributes.tabletSourceCompressed);
+
+            expect(source[0]).toHaveAttribute('srcset', props.tablet);
             expect(sourceWebP).not.toBeInTheDocument();
         } else {
-            const sourceWebP = screen.getByRole('image-webp-source-md');
+            const source = screen.getAllByTestId(qaId || qaAttributes.tabletSource);
+            const sourceWebP = screen.getByTestId(qaId || qaAttributes.tabletSourceCompressed);
+
+            expect(source[0]).toHaveAttribute('srcset', props.tablet);
             expect(sourceWebP).toHaveAttribute('srcset', props.tablet + '.webp');
         }
     }
 
     if (props.mobile) {
-        const source = screen.getByRole('image-source-sm');
-        expect(source).toHaveAttribute('srcset', props.mobile);
-
         if (disableWebp) {
-            const sourceWebP = screen.queryByRole('image-webp-source-sm');
+            const source = screen.getAllByTestId(qaId || qaAttributes.mobileSource);
+            const sourceWebP = screen.queryByTestId(qaId || qaAttributes.mobileSourceCompressed);
+
+            expect(source[0]).toHaveAttribute('srcset', props.mobile);
             expect(sourceWebP).not.toBeInTheDocument();
         } else {
-            const sourceWebP = screen.getByRole('image-webp-source-sm');
+            const source = screen.getAllByTestId(qaId || qaAttributes.mobileSource);
+            const sourceWebP = screen.getByTestId(qaId || qaAttributes.mobileSourceCompressed);
+
+            expect(source[0]).toHaveAttribute('srcset', props.mobile);
             expect(sourceWebP).toHaveAttribute('srcset', props.mobile + '.webp');
         }
     }