);
+
+ await expect(component).toHaveScreenshot();
+ });
+
+ test('render table with no data (custom)', async ({mount}) => {
+ const emptyText = 'Custom no data message';
+ const component = await mount(
+
,
+ );
+
+ await expect(component).toHaveScreenshot();
+ });
+});
diff --git a/src/components/Table/__component__/Table.spec.tsx-snapshots/Table-render-table-by-default-1-chromium-darwin.png b/src/components/Table/__component__/Table.spec.tsx-snapshots/Table-render-table-by-default-1-chromium-darwin.png
new file mode 100644
index 0000000000..f9f9af2e0b
Binary files /dev/null and b/src/components/Table/__component__/Table.spec.tsx-snapshots/Table-render-table-by-default-1-chromium-darwin.png differ
diff --git a/src/components/Table/__component__/Table.spec.tsx-snapshots/Table-render-table-by-default-1-webkit-darwin.png b/src/components/Table/__component__/Table.spec.tsx-snapshots/Table-render-table-by-default-1-webkit-darwin.png
new file mode 100644
index 0000000000..ea138b5c2b
Binary files /dev/null and b/src/components/Table/__component__/Table.spec.tsx-snapshots/Table-render-table-by-default-1-webkit-darwin.png differ
diff --git a/src/components/Table/__component__/Table.spec.tsx-snapshots/Table-render-table-by-empty-data-1-chromium-darwin.png b/src/components/Table/__component__/Table.spec.tsx-snapshots/Table-render-table-by-empty-data-1-chromium-darwin.png
new file mode 100644
index 0000000000..1d5f1e914d
Binary files /dev/null and b/src/components/Table/__component__/Table.spec.tsx-snapshots/Table-render-table-by-empty-data-1-chromium-darwin.png differ
diff --git a/src/components/Table/__component__/Table.spec.tsx-snapshots/Table-render-table-by-empty-data-1-webkit-darwin.png b/src/components/Table/__component__/Table.spec.tsx-snapshots/Table-render-table-by-empty-data-1-webkit-darwin.png
new file mode 100644
index 0000000000..c2a3c4774d
Binary files /dev/null and b/src/components/Table/__component__/Table.spec.tsx-snapshots/Table-render-table-by-empty-data-1-webkit-darwin.png differ
diff --git a/src/components/Table/__component__/Table.spec.tsx-snapshots/Table-render-table-with-edge-padding-1-chromium-darwin.png b/src/components/Table/__component__/Table.spec.tsx-snapshots/Table-render-table-with-edge-padding-1-chromium-darwin.png
new file mode 100644
index 0000000000..f9f9af2e0b
Binary files /dev/null and b/src/components/Table/__component__/Table.spec.tsx-snapshots/Table-render-table-with-edge-padding-1-chromium-darwin.png differ
diff --git a/src/components/Table/__component__/Table.spec.tsx-snapshots/Table-render-table-with-edge-padding-1-webkit-darwin.png b/src/components/Table/__component__/Table.spec.tsx-snapshots/Table-render-table-with-edge-padding-1-webkit-darwin.png
new file mode 100644
index 0000000000..ea138b5c2b
Binary files /dev/null and b/src/components/Table/__component__/Table.spec.tsx-snapshots/Table-render-table-with-edge-padding-1-webkit-darwin.png differ
diff --git a/src/components/Table/__component__/Table.spec.tsx-snapshots/Table-render-table-with-no-data-custom-1-chromium-darwin.png b/src/components/Table/__component__/Table.spec.tsx-snapshots/Table-render-table-with-no-data-custom-1-chromium-darwin.png
new file mode 100644
index 0000000000..ad27248a9b
Binary files /dev/null and b/src/components/Table/__component__/Table.spec.tsx-snapshots/Table-render-table-with-no-data-custom-1-chromium-darwin.png differ
diff --git a/src/components/Table/__component__/Table.spec.tsx-snapshots/Table-render-table-with-no-data-custom-1-webkit-darwin.png b/src/components/Table/__component__/Table.spec.tsx-snapshots/Table-render-table-with-no-data-custom-1-webkit-darwin.png
new file mode 100644
index 0000000000..f14cb43071
Binary files /dev/null and b/src/components/Table/__component__/Table.spec.tsx-snapshots/Table-render-table-with-no-data-custom-1-webkit-darwin.png differ
diff --git a/src/components/Table/__component__/utils.ts b/src/components/Table/__component__/utils.ts
new file mode 100644
index 0000000000..b81b3ca3ef
--- /dev/null
+++ b/src/components/Table/__component__/utils.ts
@@ -0,0 +1,72 @@
+import type {TableColumnConfig} from '../Table';
+
+export interface DataItem {
+ name: string;
+ city?: string;
+ phone: string;
+ count: number;
+ date: string;
+ disabled?: boolean;
+}
+
+export const data: DataItem[] = [
+ {
+ name: 'Nomlanga Compton',
+ city: 'Erli',
+ phone: '+7 (923) 737-89-72',
+ count: 82,
+ date: '2019-03-15',
+ },
+ {
+ name: 'Paul Hatfield',
+ city: 'Campitello di Fassa',
+ phone: '+7 (900) 333-82-02',
+ count: 51,
+ date: '2019-11-23',
+ },
+ {
+ name: 'Phelan Daniel',
+ city: 'Meugliano',
+ phone: '+7 (925) 549-50-23',
+ count: 10,
+ date: '2019-05-14',
+ },
+ {
+ name: 'Hiram Mayer',
+ city: '',
+ phone: '+7 (950) 372-56-84',
+ count: 54,
+ date: '2019-03-29',
+ },
+ {
+ name: 'Madeline Puckett',
+ phone: '+7 (908) 582-05-91',
+ count: 75,
+ date: '2019-02-01',
+ disabled: true,
+ },
+];
+
+export const columns: TableColumnConfig[] = [
+ {
+ id: 'name',
+ name: 'Name',
+ },
+ {
+ id: 'city',
+ name: 'City',
+ },
+ {
+ id: 'phone',
+ name: 'Phone',
+ },
+ {
+ id: 'count',
+ name: 'Count',
+ align: 'right',
+ },
+ {
+ id: 'date',
+ name: 'Date created',
+ },
+];
diff --git a/src/components/controls/TextInput/__component__/TextInput.spec.tsx b/src/components/controls/TextInput/__component__/TextInput.spec.tsx
new file mode 100644
index 0000000000..2165ed81f1
--- /dev/null
+++ b/src/components/controls/TextInput/__component__/TextInput.spec.tsx
@@ -0,0 +1,142 @@
+import React from 'react';
+
+import {expect, test} from '@playwright/experimental-ct-react';
+
+import {TextInputNote, TextInputWrapper} from './TextInputHelper';
+
+test.describe('TextInput', () => {
+ test.describe('without label prop', () => {
+ test.describe('basic', () => {
+ test('render input by default', async ({mount}) => {
+ const component = await mount();
+
+ await expect(component).toHaveScreenshot();
+ });
+ });
+
+ test('render error message with error prop', async ({mount}) => {
+ const component = await mount();
+
+ await expect(component).toHaveScreenshot();
+ });
+
+ test('render note container with note prop', async ({mount}) => {
+ const component = await mount();
+
+ await expect(component).toHaveScreenshot();
+ });
+
+ test('check clear button visibility with hasClear prop', async ({mount}) => {
+ const component = await mount();
+
+ await expect(component).toHaveScreenshot();
+
+ // eslint-disable-next-line testing-library/prefer-screen-queries
+ await component.getByRole('textbox').fill('value');
+
+ await expect(component).toHaveScreenshot();
+
+ // eslint-disable-next-line testing-library/prefer-screen-queries
+ await component.getByRole('button').click();
+
+ await expect(component).toHaveScreenshot();
+ });
+ });
+
+ test.describe('error', () => {
+ test('render error message with error prop (if it is not an empty string)', async ({
+ mount,
+ }) => {
+ const component = await mount();
+
+ await expect(component).toHaveScreenshot();
+ });
+
+ test('render error message with errorMessage prop (if it is not an empty string)', async ({
+ mount,
+ }) => {
+ const component = await mount(
+ ,
+ );
+
+ await expect(component).toHaveScreenshot();
+ });
+
+ test('render error message with errorMessage prop and invalid state (if it is not an empty string)', async ({
+ mount,
+ }) => {
+ const component = await mount(
+ ,
+ );
+
+ await expect(component).toHaveScreenshot();
+ });
+
+ test('render error icon if tooltip option is selected for errorPlacement prop', async ({
+ mount,
+ }) => {
+ const component = await mount(
+ ,
+ );
+
+ await expect(component).toHaveScreenshot();
+ });
+
+ test('do not show error message if error prop value is an empty string', async ({
+ mount,
+ }) => {
+ const component = await mount();
+
+ await expect(component).toHaveScreenshot();
+ });
+
+ test('do not show error message if errorMessage prop value is an empty string', async ({
+ mount,
+ }) => {
+ const component = await mount();
+
+ await expect(component).toHaveScreenshot();
+ });
+
+ test('do not show error icon if error prop is an empty string', async ({mount}) => {
+ const component = await mount();
+
+ await expect(component).toHaveScreenshot();
+ });
+
+ test('do not show error icon if errorMessage prop is an empty string', async ({mount}) => {
+ const component = await mount(
+ ,
+ );
+
+ await expect(component).toHaveScreenshot();
+ });
+ });
+
+ test.describe('with label prop', () => {
+ test.describe('basic', () => {
+ test('render input with label', async ({mount}) => {
+ const component = await mount();
+
+ await expect(component).toHaveScreenshot();
+ });
+
+ test('render described input with error message and note', async ({mount}) => {
+ const errorText = 'Some error text';
+ const noteText = 'Note text';
+ const component = await mount(
+ ,
+ );
+
+ await expect(component).toHaveScreenshot();
+ });
+ });
+ });
+});
diff --git a/src/components/controls/TextInput/__component__/TextInput.spec.tsx-snapshots/TextInput-error-do-not-show-error-icon-if-error-prop-is-an-empty-string-1-chromium-darwin.png b/src/components/controls/TextInput/__component__/TextInput.spec.tsx-snapshots/TextInput-error-do-not-show-error-icon-if-error-prop-is-an-empty-string-1-chromium-darwin.png
new file mode 100644
index 0000000000..783cd2c22b
Binary files /dev/null and b/src/components/controls/TextInput/__component__/TextInput.spec.tsx-snapshots/TextInput-error-do-not-show-error-icon-if-error-prop-is-an-empty-string-1-chromium-darwin.png differ
diff --git a/src/components/controls/TextInput/__component__/TextInput.spec.tsx-snapshots/TextInput-error-do-not-show-error-icon-if-error-prop-is-an-empty-string-1-webkit-darwin.png b/src/components/controls/TextInput/__component__/TextInput.spec.tsx-snapshots/TextInput-error-do-not-show-error-icon-if-error-prop-is-an-empty-string-1-webkit-darwin.png
new file mode 100644
index 0000000000..0bab00b43f
Binary files /dev/null and b/src/components/controls/TextInput/__component__/TextInput.spec.tsx-snapshots/TextInput-error-do-not-show-error-icon-if-error-prop-is-an-empty-string-1-webkit-darwin.png differ
diff --git a/src/components/controls/TextInput/__component__/TextInput.spec.tsx-snapshots/TextInput-error-do-not-show-error-icon-if-errorMessage-prop-is-an-empty-string-1-chromium-darwin.png b/src/components/controls/TextInput/__component__/TextInput.spec.tsx-snapshots/TextInput-error-do-not-show-error-icon-if-errorMessage-prop-is-an-empty-string-1-chromium-darwin.png
new file mode 100644
index 0000000000..783cd2c22b
Binary files /dev/null and b/src/components/controls/TextInput/__component__/TextInput.spec.tsx-snapshots/TextInput-error-do-not-show-error-icon-if-errorMessage-prop-is-an-empty-string-1-chromium-darwin.png differ
diff --git a/src/components/controls/TextInput/__component__/TextInput.spec.tsx-snapshots/TextInput-error-do-not-show-error-icon-if-errorMessage-prop-is-an-empty-string-1-webkit-darwin.png b/src/components/controls/TextInput/__component__/TextInput.spec.tsx-snapshots/TextInput-error-do-not-show-error-icon-if-errorMessage-prop-is-an-empty-string-1-webkit-darwin.png
new file mode 100644
index 0000000000..0bab00b43f
Binary files /dev/null and b/src/components/controls/TextInput/__component__/TextInput.spec.tsx-snapshots/TextInput-error-do-not-show-error-icon-if-errorMessage-prop-is-an-empty-string-1-webkit-darwin.png differ
diff --git a/src/components/controls/TextInput/__component__/TextInput.spec.tsx-snapshots/TextInput-error-do-not-show-error-message-if-error-prop-value-is-an-empty-string-1-chromium-darwin.png b/src/components/controls/TextInput/__component__/TextInput.spec.tsx-snapshots/TextInput-error-do-not-show-error-message-if-error-prop-value-is-an-empty-string-1-chromium-darwin.png
new file mode 100644
index 0000000000..783cd2c22b
Binary files /dev/null and b/src/components/controls/TextInput/__component__/TextInput.spec.tsx-snapshots/TextInput-error-do-not-show-error-message-if-error-prop-value-is-an-empty-string-1-chromium-darwin.png differ
diff --git a/src/components/controls/TextInput/__component__/TextInput.spec.tsx-snapshots/TextInput-error-do-not-show-error-message-if-error-prop-value-is-an-empty-string-1-webkit-darwin.png b/src/components/controls/TextInput/__component__/TextInput.spec.tsx-snapshots/TextInput-error-do-not-show-error-message-if-error-prop-value-is-an-empty-string-1-webkit-darwin.png
new file mode 100644
index 0000000000..0bab00b43f
Binary files /dev/null and b/src/components/controls/TextInput/__component__/TextInput.spec.tsx-snapshots/TextInput-error-do-not-show-error-message-if-error-prop-value-is-an-empty-string-1-webkit-darwin.png differ
diff --git a/src/components/controls/TextInput/__component__/TextInput.spec.tsx-snapshots/TextInput-error-do-not-show-error-message-if-errorMessage-prop-value-is-an-empty-string-1-chromium-darwin.png b/src/components/controls/TextInput/__component__/TextInput.spec.tsx-snapshots/TextInput-error-do-not-show-error-message-if-errorMessage-prop-value-is-an-empty-string-1-chromium-darwin.png
new file mode 100644
index 0000000000..783cd2c22b
Binary files /dev/null and b/src/components/controls/TextInput/__component__/TextInput.spec.tsx-snapshots/TextInput-error-do-not-show-error-message-if-errorMessage-prop-value-is-an-empty-string-1-chromium-darwin.png differ
diff --git a/src/components/controls/TextInput/__component__/TextInput.spec.tsx-snapshots/TextInput-error-do-not-show-error-message-if-errorMessage-prop-value-is-an-empty-string-1-webkit-darwin.png b/src/components/controls/TextInput/__component__/TextInput.spec.tsx-snapshots/TextInput-error-do-not-show-error-message-if-errorMessage-prop-value-is-an-empty-string-1-webkit-darwin.png
new file mode 100644
index 0000000000..0bab00b43f
Binary files /dev/null and b/src/components/controls/TextInput/__component__/TextInput.spec.tsx-snapshots/TextInput-error-do-not-show-error-message-if-errorMessage-prop-value-is-an-empty-string-1-webkit-darwin.png differ
diff --git a/src/components/controls/TextInput/__component__/TextInput.spec.tsx-snapshots/TextInput-error-render-error-icon-if-tooltip-option-is-selected-for-errorPlacement-prop-1-chromium-darwin.png b/src/components/controls/TextInput/__component__/TextInput.spec.tsx-snapshots/TextInput-error-render-error-icon-if-tooltip-option-is-selected-for-errorPlacement-prop-1-chromium-darwin.png
new file mode 100644
index 0000000000..4663d8452e
Binary files /dev/null and b/src/components/controls/TextInput/__component__/TextInput.spec.tsx-snapshots/TextInput-error-render-error-icon-if-tooltip-option-is-selected-for-errorPlacement-prop-1-chromium-darwin.png differ
diff --git a/src/components/controls/TextInput/__component__/TextInput.spec.tsx-snapshots/TextInput-error-render-error-icon-if-tooltip-option-is-selected-for-errorPlacement-prop-1-webkit-darwin.png b/src/components/controls/TextInput/__component__/TextInput.spec.tsx-snapshots/TextInput-error-render-error-icon-if-tooltip-option-is-selected-for-errorPlacement-prop-1-webkit-darwin.png
new file mode 100644
index 0000000000..4a7aebbf48
Binary files /dev/null and b/src/components/controls/TextInput/__component__/TextInput.spec.tsx-snapshots/TextInput-error-render-error-icon-if-tooltip-option-is-selected-for-errorPlacement-prop-1-webkit-darwin.png differ
diff --git a/src/components/controls/TextInput/__component__/TextInput.spec.tsx-snapshots/TextInput-error-render-error-message-with-erro-a4ab6--invalid-state-if-it-is-not-an-empty-string-1-chromium-darwin.png b/src/components/controls/TextInput/__component__/TextInput.spec.tsx-snapshots/TextInput-error-render-error-message-with-erro-a4ab6--invalid-state-if-it-is-not-an-empty-string-1-chromium-darwin.png
new file mode 100644
index 0000000000..a7910eeed5
Binary files /dev/null and b/src/components/controls/TextInput/__component__/TextInput.spec.tsx-snapshots/TextInput-error-render-error-message-with-erro-a4ab6--invalid-state-if-it-is-not-an-empty-string-1-chromium-darwin.png differ
diff --git a/src/components/controls/TextInput/__component__/TextInput.spec.tsx-snapshots/TextInput-error-render-error-message-with-erro-a4ab6--invalid-state-if-it-is-not-an-empty-string-1-webkit-darwin.png b/src/components/controls/TextInput/__component__/TextInput.spec.tsx-snapshots/TextInput-error-render-error-message-with-erro-a4ab6--invalid-state-if-it-is-not-an-empty-string-1-webkit-darwin.png
new file mode 100644
index 0000000000..6c3ba3c38e
Binary files /dev/null and b/src/components/controls/TextInput/__component__/TextInput.spec.tsx-snapshots/TextInput-error-render-error-message-with-erro-a4ab6--invalid-state-if-it-is-not-an-empty-string-1-webkit-darwin.png differ
diff --git a/src/components/controls/TextInput/__component__/TextInput.spec.tsx-snapshots/TextInput-error-render-error-message-with-error-prop-if-it-is-not-an-empty-string-1-chromium-darwin.png b/src/components/controls/TextInput/__component__/TextInput.spec.tsx-snapshots/TextInput-error-render-error-message-with-error-prop-if-it-is-not-an-empty-string-1-chromium-darwin.png
new file mode 100644
index 0000000000..538fc827d1
Binary files /dev/null and b/src/components/controls/TextInput/__component__/TextInput.spec.tsx-snapshots/TextInput-error-render-error-message-with-error-prop-if-it-is-not-an-empty-string-1-chromium-darwin.png differ
diff --git a/src/components/controls/TextInput/__component__/TextInput.spec.tsx-snapshots/TextInput-error-render-error-message-with-error-prop-if-it-is-not-an-empty-string-1-webkit-darwin.png b/src/components/controls/TextInput/__component__/TextInput.spec.tsx-snapshots/TextInput-error-render-error-message-with-error-prop-if-it-is-not-an-empty-string-1-webkit-darwin.png
new file mode 100644
index 0000000000..2f5cda04ee
Binary files /dev/null and b/src/components/controls/TextInput/__component__/TextInput.spec.tsx-snapshots/TextInput-error-render-error-message-with-error-prop-if-it-is-not-an-empty-string-1-webkit-darwin.png differ
diff --git a/src/components/controls/TextInput/__component__/TextInput.spec.tsx-snapshots/TextInput-error-render-error-message-with-errorMessage-prop-if-it-is-not-an-empty-string-1-chromium-darwin.png b/src/components/controls/TextInput/__component__/TextInput.spec.tsx-snapshots/TextInput-error-render-error-message-with-errorMessage-prop-if-it-is-not-an-empty-string-1-chromium-darwin.png
new file mode 100644
index 0000000000..783cd2c22b
Binary files /dev/null and b/src/components/controls/TextInput/__component__/TextInput.spec.tsx-snapshots/TextInput-error-render-error-message-with-errorMessage-prop-if-it-is-not-an-empty-string-1-chromium-darwin.png differ
diff --git a/src/components/controls/TextInput/__component__/TextInput.spec.tsx-snapshots/TextInput-error-render-error-message-with-errorMessage-prop-if-it-is-not-an-empty-string-1-webkit-darwin.png b/src/components/controls/TextInput/__component__/TextInput.spec.tsx-snapshots/TextInput-error-render-error-message-with-errorMessage-prop-if-it-is-not-an-empty-string-1-webkit-darwin.png
new file mode 100644
index 0000000000..0bab00b43f
Binary files /dev/null and b/src/components/controls/TextInput/__component__/TextInput.spec.tsx-snapshots/TextInput-error-render-error-message-with-errorMessage-prop-if-it-is-not-an-empty-string-1-webkit-darwin.png differ
diff --git a/src/components/controls/TextInput/__component__/TextInput.spec.tsx-snapshots/TextInput-with-label-prop-basic-render-described-input-with-error-message-and-note-1-chromium-darwin.png b/src/components/controls/TextInput/__component__/TextInput.spec.tsx-snapshots/TextInput-with-label-prop-basic-render-described-input-with-error-message-and-note-1-chromium-darwin.png
new file mode 100644
index 0000000000..60079bed66
Binary files /dev/null and b/src/components/controls/TextInput/__component__/TextInput.spec.tsx-snapshots/TextInput-with-label-prop-basic-render-described-input-with-error-message-and-note-1-chromium-darwin.png differ
diff --git a/src/components/controls/TextInput/__component__/TextInput.spec.tsx-snapshots/TextInput-with-label-prop-basic-render-described-input-with-error-message-and-note-1-webkit-darwin.png b/src/components/controls/TextInput/__component__/TextInput.spec.tsx-snapshots/TextInput-with-label-prop-basic-render-described-input-with-error-message-and-note-1-webkit-darwin.png
new file mode 100644
index 0000000000..60b13509b0
Binary files /dev/null and b/src/components/controls/TextInput/__component__/TextInput.spec.tsx-snapshots/TextInput-with-label-prop-basic-render-described-input-with-error-message-and-note-1-webkit-darwin.png differ
diff --git a/src/components/controls/TextInput/__component__/TextInput.spec.tsx-snapshots/TextInput-with-label-prop-basic-render-input-with-label-1-chromium-darwin.png b/src/components/controls/TextInput/__component__/TextInput.spec.tsx-snapshots/TextInput-with-label-prop-basic-render-input-with-label-1-chromium-darwin.png
new file mode 100644
index 0000000000..dad75a0c74
Binary files /dev/null and b/src/components/controls/TextInput/__component__/TextInput.spec.tsx-snapshots/TextInput-with-label-prop-basic-render-input-with-label-1-chromium-darwin.png differ
diff --git a/src/components/controls/TextInput/__component__/TextInput.spec.tsx-snapshots/TextInput-with-label-prop-basic-render-input-with-label-1-webkit-darwin.png b/src/components/controls/TextInput/__component__/TextInput.spec.tsx-snapshots/TextInput-with-label-prop-basic-render-input-with-label-1-webkit-darwin.png
new file mode 100644
index 0000000000..eb5b14f172
Binary files /dev/null and b/src/components/controls/TextInput/__component__/TextInput.spec.tsx-snapshots/TextInput-with-label-prop-basic-render-input-with-label-1-webkit-darwin.png differ
diff --git a/src/components/controls/TextInput/__component__/TextInput.spec.tsx-snapshots/TextInput-without-label-prop-basic-render-input-by-default-1-chromium-darwin.png b/src/components/controls/TextInput/__component__/TextInput.spec.tsx-snapshots/TextInput-without-label-prop-basic-render-input-by-default-1-chromium-darwin.png
new file mode 100644
index 0000000000..783cd2c22b
Binary files /dev/null and b/src/components/controls/TextInput/__component__/TextInput.spec.tsx-snapshots/TextInput-without-label-prop-basic-render-input-by-default-1-chromium-darwin.png differ
diff --git a/src/components/controls/TextInput/__component__/TextInput.spec.tsx-snapshots/TextInput-without-label-prop-basic-render-input-by-default-1-webkit-darwin.png b/src/components/controls/TextInput/__component__/TextInput.spec.tsx-snapshots/TextInput-without-label-prop-basic-render-input-by-default-1-webkit-darwin.png
new file mode 100644
index 0000000000..0bab00b43f
Binary files /dev/null and b/src/components/controls/TextInput/__component__/TextInput.spec.tsx-snapshots/TextInput-without-label-prop-basic-render-input-by-default-1-webkit-darwin.png differ
diff --git a/src/components/controls/TextInput/__component__/TextInput.spec.tsx-snapshots/TextInput-without-label-prop-check-clear-button-visibility-with-hasClear-prop-1-chromium-darwin.png b/src/components/controls/TextInput/__component__/TextInput.spec.tsx-snapshots/TextInput-without-label-prop-check-clear-button-visibility-with-hasClear-prop-1-chromium-darwin.png
new file mode 100644
index 0000000000..783cd2c22b
Binary files /dev/null and b/src/components/controls/TextInput/__component__/TextInput.spec.tsx-snapshots/TextInput-without-label-prop-check-clear-button-visibility-with-hasClear-prop-1-chromium-darwin.png differ
diff --git a/src/components/controls/TextInput/__component__/TextInput.spec.tsx-snapshots/TextInput-without-label-prop-check-clear-button-visibility-with-hasClear-prop-1-webkit-darwin.png b/src/components/controls/TextInput/__component__/TextInput.spec.tsx-snapshots/TextInput-without-label-prop-check-clear-button-visibility-with-hasClear-prop-1-webkit-darwin.png
new file mode 100644
index 0000000000..0bab00b43f
Binary files /dev/null and b/src/components/controls/TextInput/__component__/TextInput.spec.tsx-snapshots/TextInput-without-label-prop-check-clear-button-visibility-with-hasClear-prop-1-webkit-darwin.png differ
diff --git a/src/components/controls/TextInput/__component__/TextInput.spec.tsx-snapshots/TextInput-without-label-prop-check-clear-button-visibility-with-hasClear-prop-2-chromium-darwin.png b/src/components/controls/TextInput/__component__/TextInput.spec.tsx-snapshots/TextInput-without-label-prop-check-clear-button-visibility-with-hasClear-prop-2-chromium-darwin.png
new file mode 100644
index 0000000000..522ff4fe24
Binary files /dev/null and b/src/components/controls/TextInput/__component__/TextInput.spec.tsx-snapshots/TextInput-without-label-prop-check-clear-button-visibility-with-hasClear-prop-2-chromium-darwin.png differ
diff --git a/src/components/controls/TextInput/__component__/TextInput.spec.tsx-snapshots/TextInput-without-label-prop-check-clear-button-visibility-with-hasClear-prop-2-webkit-darwin.png b/src/components/controls/TextInput/__component__/TextInput.spec.tsx-snapshots/TextInput-without-label-prop-check-clear-button-visibility-with-hasClear-prop-2-webkit-darwin.png
new file mode 100644
index 0000000000..9c7762a97c
Binary files /dev/null and b/src/components/controls/TextInput/__component__/TextInput.spec.tsx-snapshots/TextInput-without-label-prop-check-clear-button-visibility-with-hasClear-prop-2-webkit-darwin.png differ
diff --git a/src/components/controls/TextInput/__component__/TextInput.spec.tsx-snapshots/TextInput-without-label-prop-check-clear-button-visibility-with-hasClear-prop-3-chromium-darwin.png b/src/components/controls/TextInput/__component__/TextInput.spec.tsx-snapshots/TextInput-without-label-prop-check-clear-button-visibility-with-hasClear-prop-3-chromium-darwin.png
new file mode 100644
index 0000000000..e62ddebb19
Binary files /dev/null and b/src/components/controls/TextInput/__component__/TextInput.spec.tsx-snapshots/TextInput-without-label-prop-check-clear-button-visibility-with-hasClear-prop-3-chromium-darwin.png differ
diff --git a/src/components/controls/TextInput/__component__/TextInput.spec.tsx-snapshots/TextInput-without-label-prop-check-clear-button-visibility-with-hasClear-prop-3-webkit-darwin.png b/src/components/controls/TextInput/__component__/TextInput.spec.tsx-snapshots/TextInput-without-label-prop-check-clear-button-visibility-with-hasClear-prop-3-webkit-darwin.png
new file mode 100644
index 0000000000..9ca6ddc8e2
Binary files /dev/null and b/src/components/controls/TextInput/__component__/TextInput.spec.tsx-snapshots/TextInput-without-label-prop-check-clear-button-visibility-with-hasClear-prop-3-webkit-darwin.png differ
diff --git a/src/components/controls/TextInput/__component__/TextInput.spec.tsx-snapshots/TextInput-without-label-prop-render-error-message-with-error-prop-1-chromium-darwin.png b/src/components/controls/TextInput/__component__/TextInput.spec.tsx-snapshots/TextInput-without-label-prop-render-error-message-with-error-prop-1-chromium-darwin.png
new file mode 100644
index 0000000000..538fc827d1
Binary files /dev/null and b/src/components/controls/TextInput/__component__/TextInput.spec.tsx-snapshots/TextInput-without-label-prop-render-error-message-with-error-prop-1-chromium-darwin.png differ
diff --git a/src/components/controls/TextInput/__component__/TextInput.spec.tsx-snapshots/TextInput-without-label-prop-render-error-message-with-error-prop-1-webkit-darwin.png b/src/components/controls/TextInput/__component__/TextInput.spec.tsx-snapshots/TextInput-without-label-prop-render-error-message-with-error-prop-1-webkit-darwin.png
new file mode 100644
index 0000000000..2f5cda04ee
Binary files /dev/null and b/src/components/controls/TextInput/__component__/TextInput.spec.tsx-snapshots/TextInput-without-label-prop-render-error-message-with-error-prop-1-webkit-darwin.png differ
diff --git a/src/components/controls/TextInput/__component__/TextInput.spec.tsx-snapshots/TextInput-without-label-prop-render-note-container-with-note-prop-1-chromium-darwin.png b/src/components/controls/TextInput/__component__/TextInput.spec.tsx-snapshots/TextInput-without-label-prop-render-note-container-with-note-prop-1-chromium-darwin.png
new file mode 100644
index 0000000000..ce875f1728
Binary files /dev/null and b/src/components/controls/TextInput/__component__/TextInput.spec.tsx-snapshots/TextInput-without-label-prop-render-note-container-with-note-prop-1-chromium-darwin.png differ
diff --git a/src/components/controls/TextInput/__component__/TextInput.spec.tsx-snapshots/TextInput-without-label-prop-render-note-container-with-note-prop-1-webkit-darwin.png b/src/components/controls/TextInput/__component__/TextInput.spec.tsx-snapshots/TextInput-without-label-prop-render-note-container-with-note-prop-1-webkit-darwin.png
new file mode 100644
index 0000000000..2dd73c4a7d
Binary files /dev/null and b/src/components/controls/TextInput/__component__/TextInput.spec.tsx-snapshots/TextInput-without-label-prop-render-note-container-with-note-prop-1-webkit-darwin.png differ
diff --git a/src/components/controls/TextInput/__component__/TextInputHelper.tsx b/src/components/controls/TextInput/__component__/TextInputHelper.tsx
new file mode 100644
index 0000000000..ff7d765b86
--- /dev/null
+++ b/src/components/controls/TextInput/__component__/TextInputHelper.tsx
@@ -0,0 +1,15 @@
+import React from 'react';
+
+import {TextInput, TextInputProps} from '../TextInput';
+
+export const TextInputWrapper = (props: TextInputProps) => {
+ return (
+
+
+
+ );
+};
+
+export const TextInputNote = () => {
+ return Additional} />;
+};
diff --git a/test-component/README.md b/test-component/README.md
new file mode 100644
index 0000000000..5667a9e834
--- /dev/null
+++ b/test-component/README.md
@@ -0,0 +1,87 @@
+# Test Component
+
+## How to write a test
+
+1. You need to select the component for which you want to write tests
+2. In the component folder, create a folder `__component__`
+3. Create a file in it `component name.spec.tsx`
+4. In the file to make imports:
+
+ ```ts
+ import React from 'react';
+
+ import {expect, test} from '@playwright/experimental-ct-react';
+
+ import {MyTestedComponent} from '../MyTestedComponent';
+ ```
+
+5. Writing a test:
+
+ ```ts
+ test('Name test', async ({mount}) => {
+ //mounting a component
+ const component = await mount();
+
+ //screenshot
+ await expect(component).toHaveScreenshot();
+ });
+ ```
+
+ ```ts
+ test.describe('Name group tests', () => {
+ test('1', ...);
+ test('2', ...);
+ ...
+ test('10', ...)
+ });
+ ```
+
+6. Running the test: (you don't need to run storybook to test components)
+
+ ```shell
+ npm run playwright:install
+ npm run test:component
+ ```
+
+ ! the npm run playwright:install command must be run for the first time
+
+7. In the folder `__component__`, in which the folder `component name.spec.tsx-snapshots` will appear, it will contain screenshots
+
+## Description of possible commands:
+
+1. [playwright-test-components](https://playwright.dev/docs/test-components)
+2. [playwright-docs](https://playwright.dev/docs/api/class-test)
+
+## Pay attention
+
+It takes screenshots along the border of the component and if you see that any part of the component did not get into the screenshots, it is recommended to do the following:
+
+```ts
+import React from 'react';
+
+import {expect, test} from '@playwright/experimental-ct-react';
+
+import {Component} from '../Component';
+
+test('test Component ', async ({mount}) => {
+ const component = await mount(
+
+
+
,
+ );
+
+ await expect(component).toHaveScreenshot();
+});
+```
+
+## Test examples
+
+- [TextInput](../src/components/controls/TextInput/__component__/TextInput.spec.tsx)
+- [Button](../src/components/Button/__component__/Button.spec.tsx)
+- [Card](../src/components/Card/__component__/Card.spec.tsx)
+- [Table](../src/components/Table/__component__/Table.spec.tsx)
+
+## Npm scripts
+
+- `npm run test:component` - run tests
+- `npm run test:component:update` - update screenshots
diff --git a/test-component/playwright.config.ts b/test-component/playwright.config.ts
new file mode 100644
index 0000000000..f0468b4e11
--- /dev/null
+++ b/test-component/playwright.config.ts
@@ -0,0 +1,69 @@
+import {resolve} from 'path';
+
+import type {PlaywrightTestConfig} from '@playwright/experimental-ct-react';
+import {defineConfig, devices} from '@playwright/experimental-ct-react';
+import react from '@vitejs/plugin-react';
+
+function pathFromRoot(p: string) {
+ return resolve(__dirname, '../', p);
+}
+
+const reporter: PlaywrightTestConfig['reporter'] = [];
+
+reporter.push(
+ ['list'],
+ [
+ 'html',
+ {
+ open: !process.env.CI ? 'on-failure' : 'never',
+ outputFolder: resolve(process.cwd(), 'playwright-report'),
+ },
+ ],
+);
+
+/**
+ * See https://playwright.dev/docs/test-configuration.
+ */
+const config: PlaywrightTestConfig = {
+ testDir: pathFromRoot('src'),
+ testMatch: '*/__component__/*.spec.tsx',
+ updateSnapshots: process.env.UPDATE_REQUEST ? 'all' : 'missing',
+ /* The base directory, relative to the config file, for snapshot files created with toMatchSnapshot and toHaveScreenshot. */
+ /* Maximum time one test can run for. */
+ timeout: 10 * 1000,
+ /* Run tests in files in parallel */
+ fullyParallel: true,
+ /* Fail the build on CI if you accidentally left test.only in the source code. */
+ forbidOnly: Boolean(process.env.CI),
+ /* Retry on CI only */
+ retries: process.env.CI ? 2 : 0,
+ /* Opt out of parallel tests on CI. */
+ workers: process.env.CI ? 8 : undefined,
+ /* Reporter to use. See https://playwright.dev/docs/test-reporters */
+ reporter,
+ /* Shared settings for all the projects below. See https://playwright.dev/docs/api/class-testoptions. */
+ use: {
+ testIdAttribute: 'data-qa',
+ /* Collect trace when retrying the failed test. See https://playwright.dev/docs/trace-viewer */
+ trace: 'on-first-retry',
+ headless: true,
+ /* Port to use for Playwright component endpoint. */
+ ctPort: 3100,
+ screenshot: 'only-on-failure',
+ timezoneId: 'Europe/Belgrade',
+ ctViteConfig: {plugins: [react()]},
+ },
+ /* Configure projects for major browsers */
+ projects: [
+ {
+ name: 'chromium',
+ use: {...devices['Desktop Chrome']},
+ },
+ {
+ name: 'webkit',
+ use: {...devices['Desktop Safari']},
+ },
+ ],
+};
+
+export default defineConfig(config);
diff --git a/test-component/playwright/index.html b/test-component/playwright/index.html
new file mode 100644
index 0000000000..6572a36e5f
--- /dev/null
+++ b/test-component/playwright/index.html
@@ -0,0 +1,12 @@
+
+
+
+
+
+ Test component page
+
+
+
+
+
+
diff --git a/test-component/playwright/index.scss b/test-component/playwright/index.scss
new file mode 100644
index 0000000000..7a17f9ab7f
--- /dev/null
+++ b/test-component/playwright/index.scss
@@ -0,0 +1 @@
+@import '../../styles/styles.scss';
diff --git a/test-component/playwright/index.tsx b/test-component/playwright/index.tsx
new file mode 100644
index 0000000000..67aac616fc
--- /dev/null
+++ b/test-component/playwright/index.tsx
@@ -0,0 +1 @@
+import './index.scss';