diff --git a/src/components/ArrowToggle/__snapshots__/ArrowToggle.visual.test.tsx-snapshots/ArrowToggle-smoke-smoke-light-chromium-linux.png b/src/components/ArrowToggle/__snapshots__/ArrowToggle.visual.test.tsx-snapshots/ArrowToggle-smoke-smoke-light-chromium-linux.png
new file mode 100644
index 000000000..2e1d6ac3b
Binary files /dev/null and b/src/components/ArrowToggle/__snapshots__/ArrowToggle.visual.test.tsx-snapshots/ArrowToggle-smoke-smoke-light-chromium-linux.png differ
diff --git a/src/components/ArrowToggle/__tests__/ArrowToggle.visual.test.tsx b/src/components/ArrowToggle/__tests__/ArrowToggle.visual.test.tsx
new file mode 100644
index 000000000..74a9e958e
--- /dev/null
+++ b/src/components/ArrowToggle/__tests__/ArrowToggle.visual.test.tsx
@@ -0,0 +1,37 @@
+import React from 'react';
+
+import {smokeTest, test} from '~playwright/core';
+
+import {createSmokeScenarios} from '../../../stories/tests-factory/create-smoke-scenarios';
+import type {ArrowToggleProps} from '../ArrowToggle';
+import {ArrowToggle} from '../ArrowToggle';
+
+import {directionCases, sizeCases} from './cases';
+
+test.describe('ArrowToggle', {tag: '@ArrowToggle'}, () => {
+    smokeTest('smoke', async ({mount, expectScreenshot}) => {
+        const defaultProps: ArrowToggleProps = {};
+
+        const smokeScenarios = createSmokeScenarios(defaultProps, {
+            size: sizeCases,
+            direction: directionCases,
+        });
+
+        await mount(
+            <div>
+                {smokeScenarios.map(([title, props]) => (
+                    <div key={title}>
+                        <h4>{title}</h4>
+                        <div>
+                            <ArrowToggle {...props} />
+                        </div>
+                    </div>
+                ))}
+            </div>,
+        );
+
+        await expectScreenshot({
+            themes: ['light'],
+        });
+    });
+});
diff --git a/src/components/ArrowToggle/__tests__/cases.tsx b/src/components/ArrowToggle/__tests__/cases.tsx
new file mode 100644
index 000000000..6f9313d2f
--- /dev/null
+++ b/src/components/ArrowToggle/__tests__/cases.tsx
@@ -0,0 +1,10 @@
+import type {Cases} from '../../../stories/tests-factory/models';
+import type {ArrowToggleProps} from '../ArrowToggle';
+
+export const sizeCases: Cases<ArrowToggleProps['size']> = [10, 20, 30, 40, 50, 100];
+export const directionCases: Cases<ArrowToggleProps['direction']> = [
+    'top',
+    'left',
+    'bottom',
+    'right',
+];