diff --git a/src/components/Tabs/TabsItem.tsx b/src/components/Tabs/TabsItem.tsx
index ca2b005479..4fcb33bd3f 100644
--- a/src/components/Tabs/TabsItem.tsx
+++ b/src/components/Tabs/TabsItem.tsx
@@ -4,6 +4,7 @@ import * as React from 'react';
import {Label} from '../Label';
import type {LabelProps} from '../Label';
+import type {QAProps} from '../types';
import {block} from '../utils/cn';
import {TabsContext} from './TabsContext';
@@ -22,7 +23,7 @@ type ExtraProps = Omit<
| 'onKeyDown'
>;
-export interface TabsItemProps {
+export interface TabsItemProps extends QAProps {
id: string;
className?: string;
title: string | React.ReactNode;
@@ -55,6 +56,7 @@ export function TabsItem({
hasOverflow,
extraProps,
onClick,
+ qa,
}: TabsItemProps) {
const {activeTabId} = React.useContext(TabsContext);
const isActive = typeof active === 'boolean' ? active : activeTabId === id;
@@ -96,6 +98,7 @@ export function TabsItem({
title={htmlTitle}
onClick={handleClick}
onKeyDown={handleKeyDown}
+ data-qa={qa}
>
{icon &&
{icon}
}
diff --git a/src/components/Tabs/__snapshots__/Tabs.visual.test.tsx-snapshots/Tabs-smoke-allow-not-selected-light-chromium-linux.png b/src/components/Tabs/__snapshots__/Tabs.visual.test.tsx-snapshots/Tabs-smoke-allow-not-selected-light-chromium-linux.png
new file mode 100644
index 0000000000..40091b359c
Binary files /dev/null and b/src/components/Tabs/__snapshots__/Tabs.visual.test.tsx-snapshots/Tabs-smoke-allow-not-selected-light-chromium-linux.png differ
diff --git a/src/components/Tabs/__snapshots__/Tabs.visual.test.tsx-snapshots/Tabs-smoke-light-chromium-linux.png b/src/components/Tabs/__snapshots__/Tabs.visual.test.tsx-snapshots/Tabs-smoke-light-chromium-linux.png
new file mode 100644
index 0000000000..ac39684ccd
Binary files /dev/null and b/src/components/Tabs/__snapshots__/Tabs.visual.test.tsx-snapshots/Tabs-smoke-light-chromium-linux.png differ
diff --git a/src/components/Tabs/__snapshots__/Tabs.visual.test.tsx-snapshots/Tabs-smoke-with-custom-tab-light-chromium-linux.png b/src/components/Tabs/__snapshots__/Tabs.visual.test.tsx-snapshots/Tabs-smoke-with-custom-tab-light-chromium-linux.png
new file mode 100644
index 0000000000..9edd9c73b1
Binary files /dev/null and b/src/components/Tabs/__snapshots__/Tabs.visual.test.tsx-snapshots/Tabs-smoke-with-custom-tab-light-chromium-linux.png differ
diff --git a/src/components/Tabs/__stories__/getTabsMock.tsx b/src/components/Tabs/__stories__/getTabsMock.tsx
index 244a21cc1e..e9154bd4b2 100644
--- a/src/components/Tabs/__stories__/getTabsMock.tsx
+++ b/src/components/Tabs/__stories__/getTabsMock.tsx
@@ -20,6 +20,7 @@ export function getTabsMock(args: StoryParams): TabsProps['items'] {
maxWidth: args.withOverflow ? '100px' : 'auto',
},
},
+ qa: '1',
},
{
id: 'active',
@@ -33,6 +34,7 @@ export function getTabsMock(args: StoryParams): TabsProps['items'] {
maxWidth: args.withOverflow ? '100px' : 'auto',
},
},
+ qa: '2',
},
{
id: 'disabled',
@@ -47,6 +49,7 @@ export function getTabsMock(args: StoryParams): TabsProps['items'] {
maxWidth: args.withOverflow ? '100px' : 'auto',
},
},
+ qa: '3',
},
];
}
diff --git a/src/components/Tabs/__tests__/Tabs.visual.test.tsx b/src/components/Tabs/__tests__/Tabs.visual.test.tsx
new file mode 100644
index 0000000000..d4acb7dfd9
--- /dev/null
+++ b/src/components/Tabs/__tests__/Tabs.visual.test.tsx
@@ -0,0 +1,93 @@
+import {smokeTest, test} from '~playwright/core';
+
+import {createSmokeScenarios} from '../../../stories/tests-factory/create-smoke-scenarios';
+import type {TabsProps} from '../Tabs';
+
+import {directionCases, sizeCases} from './cases';
+import {TestTabs, TestTabsWithCustomTabs} from './helpers';
+
+test.describe('Tabs', {tag: '@Tabs'}, () => {
+ smokeTest('', async ({mount, expectScreenshot}) => {
+ const smokeScenarios = createSmokeScenarios
(
+ {
+ activeTab: 'active',
+ },
+ {
+ size: sizeCases,
+ direction: directionCases,
+ },
+ );
+
+ await mount(
+
+ {smokeScenarios.map(([title, props]) => (
+
+ ))}
+
,
+ );
+
+ await expectScreenshot({
+ themes: ['light'],
+ });
+ });
+
+ smokeTest('allow not selected', async ({mount, expectScreenshot}) => {
+ const smokeScenarios = createSmokeScenarios(
+ {
+ allowNotSelected: true,
+ },
+ {},
+ );
+
+ await mount(
+
+ {smokeScenarios.map(([title, props]) => (
+
+ ))}
+
,
+ );
+
+ await expectScreenshot({
+ themes: ['light'],
+ });
+ });
+
+ smokeTest('with custom tab', async ({mount, expectScreenshot}) => {
+ const smokeScenarios = createSmokeScenarios(
+ {
+ activeTab: 'active',
+ },
+ {
+ size: sizeCases,
+ direction: directionCases,
+ },
+ );
+
+ await mount(
+
+ {smokeScenarios.map(([title, props]) => (
+
+ ))}
+
,
+ );
+
+ await expectScreenshot({
+ themes: ['light'],
+ });
+ });
+});
diff --git a/src/components/Tabs/__tests__/cases.tsx b/src/components/Tabs/__tests__/cases.tsx
new file mode 100644
index 0000000000..5de47fd6b1
--- /dev/null
+++ b/src/components/Tabs/__tests__/cases.tsx
@@ -0,0 +1,9 @@
+import type {Cases} from '../../../stories/tests-factory/models';
+import type {TabsProps} from '../Tabs';
+import {TabsDirection} from '../Tabs';
+
+export const sizeCases: Cases = ['m', 'l', 'xl'];
+export const directionCases: Cases = [
+ TabsDirection.Horizontal,
+ TabsDirection.Vertical,
+];
diff --git a/src/components/Tabs/__tests__/helpers.tsx b/src/components/Tabs/__tests__/helpers.tsx
new file mode 100644
index 0000000000..47941456b3
--- /dev/null
+++ b/src/components/Tabs/__tests__/helpers.tsx
@@ -0,0 +1,28 @@
+import type {TabsItemProps, TabsProps} from '../Tabs';
+import {Tabs} from '../Tabs';
+import {getTabsMock} from '../__stories__/getTabsMock';
+
+export const TestTabs = (props: Partial) => {
+ const items = getTabsMock({});
+
+ return ;
+};
+
+export const TestTabsWithCustomTabs = (props: Partial) => {
+ const items = getTabsMock({});
+
+ return (
+ {
+ return (
+ // eslint-disable-next-line jsx-a11y/anchor-is-valid
+
+ {item.title}
+
+ );
+ }}
+ {...props}
+ />
+ );
+};