(ListSelectionMode.Single);
+
+ return (
+ <>
+
+
+
+ setCancelCount((c) => c + 1)}
+ onClose={() => setOpen(false)}
+ selectionMode={selectionMode}
+ >
+ {listItems}
+
+ {cancelCount}
+
+ );
+};
+
+export const SelectDialogConfirmButtonPropsTestComp = () => {
+ return (
+
+ );
+};
diff --git a/playwright-ct.config.ts b/playwright-ct.config.ts
new file mode 100644
index 00000000000..1bdca3c4655
--- /dev/null
+++ b/playwright-ct.config.ts
@@ -0,0 +1,45 @@
+import { fileURLToPath } from 'node:url';
+import { defineConfig, devices } from '@playwright/experimental-ct-react';
+import react from '@vitejs/plugin-react';
+import tsconfigPaths from 'vite-tsconfig-paths';
+
+export default defineConfig({
+ testDir: '.',
+ testMatch: ['**/packages/main/src/components/**/test/*.spec.tsx', '**/playwright/test/*.spec.tsx'],
+ testIgnore: ['**/*.cy.tsx', '**/*.cy.ts', '**/*.stories.tsx', '**/*.mdx'],
+ fullyParallel: true,
+ forbidOnly: !!process.env.CI,
+ retries: process.env.CI ? 1 : 0,
+ workers: process.env.CI ? '100%' : undefined,
+ reporter: 'html',
+ timeout: 10_000,
+ expect: { timeout: 4000 },
+ use: {
+ trace: 'on-first-retry',
+ ctViteConfig: {
+ plugins: [
+ react(),
+ tsconfigPaths({
+ projects: [fileURLToPath(new URL('tsconfig.base.json', import.meta.url))],
+ }),
+ ],
+ optimizeDeps: {
+ esbuildOptions: {
+ target: 'esnext',
+ },
+ exclude: ['**/*.cy.tsx', '**/*.cy.ts', '**/*.stories.tsx'],
+ },
+ build: {
+ target: 'esnext',
+ rollupOptions: {
+ external: [/\.cy\.tsx$/, /\.cy\.ts$/, /\.stories\.tsx$/],
+ },
+ },
+ },
+ },
+ projects: [
+ { name: 'chromium', use: { ...devices['Desktop Chrome'] } },
+ { name: 'firefox', use: { ...devices['Desktop Firefox'] } },
+ { name: 'webkit', use: { ...devices['Desktop Safari'] } },
+ ],
+});
diff --git a/playwright/index.html b/playwright/index.html
new file mode 100644
index 00000000000..d11d6018986
--- /dev/null
+++ b/playwright/index.html
@@ -0,0 +1,17 @@
+
+
+
+
+
+ Playwright Component Tests
+
+
+
+
+
+
+
diff --git a/playwright/index.tsx b/playwright/index.tsx
new file mode 100644
index 00000000000..135f5a79c4f
--- /dev/null
+++ b/playwright/index.tsx
@@ -0,0 +1 @@
+import '@ui5/webcomponents-react/dist/Assets.js';
diff --git a/playwright/test/UI5FixturesTestComponents.tsx b/playwright/test/UI5FixturesTestComponents.tsx
new file mode 100644
index 00000000000..f477b09df8d
--- /dev/null
+++ b/playwright/test/UI5FixturesTestComponents.tsx
@@ -0,0 +1,251 @@
+import { Button } from '@ui5/webcomponents-react/Button';
+import { CheckBox } from '@ui5/webcomponents-react/CheckBox';
+import { ComboBox } from '@ui5/webcomponents-react/ComboBox';
+import { ComboBoxItem } from '@ui5/webcomponents-react/ComboBoxItem';
+import { Dialog } from '@ui5/webcomponents-react/Dialog';
+import { Input } from '@ui5/webcomponents-react/Input';
+import { List } from '@ui5/webcomponents-react/List';
+import { ListItemStandard } from '@ui5/webcomponents-react/ListItemStandard';
+import { MultiComboBox } from '@ui5/webcomponents-react/MultiComboBox';
+import { MultiComboBoxItem } from '@ui5/webcomponents-react/MultiComboBoxItem';
+import { MultiInput } from '@ui5/webcomponents-react/MultiInput';
+import { Option } from '@ui5/webcomponents-react/Option';
+import { RadioButton } from '@ui5/webcomponents-react/RadioButton';
+import { Select } from '@ui5/webcomponents-react/Select';
+import { SuggestionItem } from '@ui5/webcomponents-react/SuggestionItem';
+import { Switch } from '@ui5/webcomponents-react/Switch';
+import { Tab } from '@ui5/webcomponents-react/Tab';
+import { TabContainer } from '@ui5/webcomponents-react/TabContainer';
+import { TextArea } from '@ui5/webcomponents-react/TextArea';
+import { Toolbar } from '@ui5/webcomponents-react/Toolbar';
+import { ToolbarButton } from '@ui5/webcomponents-react/ToolbarButton';
+import { useState } from 'react';
+
+export const InputTestComp = () => {
+ const [value, setValue] = useState('');
+ return (
+ <>
+ setValue(e.target.value)} />
+ {value}
+
+ );
+};
+
+export const ClearInputTestComp = () => {
+ const [value, setValue] = useState('initial value');
+ return (
+ <>
+ setValue(e.target.value)} />
+ {value}
+
+ );
+};
+
+export const CheckboxTestComp = () => {
+ const [checked, setChecked] = useState(false);
+ return (
+
+ setChecked(e.target.checked)} />
+ {checked ? 'checked' : 'unchecked'}
+
+ );
+};
+
+export const SwitchTestComp = () => {
+ const [checked, setChecked] = useState(false);
+ return (
+
+ setChecked(e.target.checked)} />
+ {checked ? 'on' : 'off'}
+
+ );
+};
+
+export const RadioButtonTestComp = () => {
+ const [selected, setSelected] = useState('');
+ return (
+
+ setSelected('option1')} />
+ setSelected('option2')} />
+ {selected}
+
+ );
+};
+
+export const TextAreaTestComp = () => {
+ const [value, setValue] = useState('');
+ return (
+
+