@uxf/e2e-playwright 11.76.0

package/README.md

@@ -0,0 +1,5 @@
+# @uxf/e2e-playwright
+
+```sh
+yarn add @uxf/e2e-playwright
+```

package/components.d.ts

@@ -0,0 +1,16 @@
+import { Page } from "@playwright/test";
+export declare function createUi(page: Page): {
+    button: (finder: import("./ui/button").ButtonFinder) => import("./ui/button").ButtonModel;
+    checkboxInput: (finder: import("./ui/checkbox-input").CheckboxInputFinder) => import("./ui/checkbox-input").CheckboxInputModel;
+    combobox: (finder: import("./ui/combobox").ComboboxFinder) => import("./ui/combobox").ComboboxModel;
+    datePickerInput: (finder: import("./ui/date-picker-input").DatePickerInputFinder) => import("./ui/date-picker-input").DatePickerInputModel;
+    datetimePickerInput: (finder: import("./ui/datetime-picker-input").DatetimePickerInputFinder) => import("./ui/datetime-picker-input").DatetimePickerInputModel;
+    dropzone: (finder: import("./ui/dropzone").DropzoneFinder) => import("./ui/dropzone").DropzoneModel;
+    multiCombobox: (finder: import("./ui/multi-combobox").MultiComboboxFinder) => import("./ui/multi-combobox").MultiComboboxModel;
+    multiSelect: (finder: import("./ui/multi-select").MultiSelectFinder) => import("./ui/multi-select").MultiSelectModel;
+    radioGroup: (finder: import("./ui/radio-group").RadioGroupFinder) => import("./ui/radio-group").RadioGroupModel;
+    textarea: (finder: import("./ui/textarea").TextareaFinder) => import("./ui/textarea").TextareaModel;
+    select: (finder: import("./ui/select").SelectFinder) => import("./ui/select").SelectModel;
+    textInput: (finder: import("./ui/text-input").TextInputFinder) => import("./ui/text-input").TextInputModel;
+    toggle: (finder: import("./ui/toggle").ToggleFinder) => import("./ui/toggle").ToggleModel;
+};

package/components.js

@@ -0,0 +1,33 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.createUi = createUi;
+const button_1 = require("./ui/button");
+const checkbox_input_1 = require("./ui/checkbox-input");
+const combobox_1 = require("./ui/combobox");
+const date_picker_input_1 = require("./ui/date-picker-input");
+const datetime_picker_input_1 = require("./ui/datetime-picker-input");
+const dropzone_1 = require("./ui/dropzone");
+const multi_combobox_1 = require("./ui/multi-combobox");
+const multi_select_1 = require("./ui/multi-select");
+const radio_group_1 = require("./ui/radio-group");
+const select_1 = require("./ui/select");
+const text_input_1 = require("./ui/text-input");
+const textarea_1 = require("./ui/textarea");
+const toggle_1 = require("./ui/toggle");
+function createUi(page) {
+    return {
+        button: (0, button_1.button)(page),
+        checkboxInput: (0, checkbox_input_1.checkboxInput)(page),
+        combobox: (0, combobox_1.combobox)(page),
+        datePickerInput: (0, date_picker_input_1.datePickerInput)(page),
+        datetimePickerInput: (0, datetime_picker_input_1.datetimePickerInput)(page),
+        dropzone: (0, dropzone_1.dropzone)(page),
+        multiCombobox: (0, multi_combobox_1.multiCombobox)(page),
+        multiSelect: (0, multi_select_1.multiSelect)(page),
+        radioGroup: (0, radio_group_1.radioGroup)(page),
+        textarea: (0, textarea_1.textarea)(page),
+        select: (0, select_1.select)(page),
+        textInput: (0, text_input_1.textInput)(page),
+        toggle: (0, toggle_1.toggle)(page),
+    };
+}

package/index.d.ts

@@ -0,0 +1 @@
+export * from "./components";

package/index.js

@@ -0,0 +1,17 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __exportStar = (this && this.__exportStar) || function(m, exports) {
+    for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+__exportStar(require("./components"), exports);

package/package.json

@@ -0,0 +1,25 @@
+{
+    "name": "@uxf/e2e-playwright",
+    "version": "11.76.0",
+    "description": "UXF Playwright helpers",
+    "publishConfig": {
+        "access": "public"
+    },
+    "scripts": {
+        "build": "npm run compile",
+        "compile": "tsc -P tsconfig.json",
+        "e2e:ui": "BASE_URL=http://localhost:3000 ../../node_modules/.bin/playwright test --ui",
+        "e2e:debug": "BASE_URL=http://localhost:3000 ../../node_modules/.bin/playwright test --debug",
+        "e2e:ci": "../../node_modules/.bin/playwright test",
+        "typecheck": "../../node_modules/.bin/tsc --noEmit --skipLibCheck"
+    },
+    "author": "UX Fans s.r.o",
+    "license": "MIT",
+    "devDependencies": {
+        "dayjs": "1.11.10",
+        "@playwright/test": "1.54.2"
+    },
+    "peerDependencies": {
+        "@playwright/test": "1.54.2"
+    }
+}

package/playwright.config.d.ts

@@ -0,0 +1,9 @@
+/**
+ * Read environment variables from file.
+ * https://github.com/motdotla/dotenv
+ */
+/**
+ * See https://playwright.dev/docs/test-configuration.
+ */
+declare const _default: import("@playwright/test").PlaywrightTestConfig<{}, {}>;
+export default _default;

package/playwright.config.js

@@ -0,0 +1,75 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const test_1 = require("@playwright/test");
+/**
+ * Read environment variables from file.
+ * https://github.com/motdotla/dotenv
+ */
+// import dotenv from 'dotenv';
+// import path from 'path';
+// dotenv.config({ path: path.resolve(__dirname, '.env') });
+/**
+ * See https://playwright.dev/docs/test-configuration.
+ */
+exports.default = (0, test_1.defineConfig)({
+    testDir: "./ui",
+    testMatch: "**/*.e2e.ts",
+    /* 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 ? 1 : undefined,
+    /* Reporter to use. See https://playwright.dev/docs/test-reporters */
+    reporter: "html",
+    /* Shared settings for all the projects below. See https://playwright.dev/docs/api/class-testoptions. */
+    use: {
+        baseURL: process.env.BASE_URL,
+        trace: "on-first-retry",
+        httpCredentials: {
+            username: "uxf",
+            password: "uxf",
+        },
+    },
+    /* Configure projects for major browsers */
+    projects: [
+        {
+            name: "chromium",
+            use: { ...test_1.devices["Desktop Chrome"] },
+        },
+        {
+            name: "firefox",
+            use: { ...test_1.devices["Desktop Firefox"] },
+        },
+        {
+            name: "webkit",
+            use: { ...test_1.devices["Desktop Safari"] },
+        },
+        /* Test against mobile viewports. */
+        // {
+        //   name: 'Mobile Chrome',
+        //   use: { ...devices['Pixel 5'] },
+        // },
+        // {
+        //   name: 'Mobile Safari',
+        //   use: { ...devices['iPhone 12'] },
+        // },
+        /* Test against branded browsers. */
+        // {
+        //   name: 'Microsoft Edge',
+        //   use: { ...devices['Desktop Edge'], channel: 'msedge' },
+        // },
+        // {
+        //   name: 'Google Chrome',
+        //   use: { ...devices['Desktop Chrome'], channel: 'chrome' },
+        // },
+    ],
+    /* Run your local dev server before starting the tests */
+    // webServer: {
+    //   command: 'npm run start',
+    //   url: 'http://localhost:3000',
+    //   reuseExistingServer: !process.env.CI,
+    // },
+});

package/ui/button.d.ts

@@ -0,0 +1,13 @@
+import { Page } from "@playwright/test";
+import { BaseFinder } from "../utils/base-finder";
+import { BaseModel } from "../utils/base-model";
+export interface ButtonFinder extends BaseFinder {
+    text: string;
+    nth?: number;
+}
+export declare class ButtonModel extends BaseModel {
+    protected readonly finder: ButtonFinder;
+    constructor(page: Page, finder: ButtonFinder);
+    click(): Promise<void>;
+}
+export declare const button: (page: Page) => (finder: ButtonFinder) => ButtonModel;

package/ui/button.e2e.d.ts

@@ -0,0 +1 @@
+export {};

package/ui/button.e2e.js

@@ -0,0 +1,11 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const test_1 = require("@playwright/test");
+const components_1 = require("../components");
+(0, test_1.test)("UI Button", async ({ page }) => {
+    await page.goto("/examples/ui/button/Default");
+    const ui = (0, components_1.createUi)(page);
+    await ui.button({ text: "Default" }).click();
+    await ui.button({ text: "Default" }).shouldExist();
+    await ui.button({ text: "Not found" }).shouldNotExist();
+});

package/ui/button.js

@@ -0,0 +1,18 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.button = exports.ButtonModel = void 0;
+const base_model_1 = require("../utils/base-model");
+class ButtonModel extends base_model_1.BaseModel {
+    constructor(page, finder) {
+        var _a;
+        const locator = page.locator("a.uxf-button", { hasText: finder.text }).nth((_a = finder.nth) !== null && _a !== void 0 ? _a : 0);
+        super(page, locator);
+        this.finder = finder;
+    }
+    click() {
+        return this.locator.click();
+    }
+}
+exports.ButtonModel = ButtonModel;
+const button = (page) => (finder) => new ButtonModel(page, finder);
+exports.button = button;

package/ui/checkbox-input.d.ts

@@ -0,0 +1,12 @@
+import { Page } from "@playwright/test";
+import { FormComponentFinder } from "../utils/base-finder";
+import { FormComponentModel } from "../utils/form-component-model";
+export type CheckboxInputFinder = FormComponentFinder;
+export declare class CheckboxInputModel extends FormComponentModel<boolean> {
+    private readonly finder;
+    private readonly checkboxLocator;
+    private readonly fakeCheckboxLocator;
+    constructor(page: Page, finder: FormComponentFinder);
+    change(value: boolean): Promise<void>;
+}
+export declare const checkboxInput: (page: Page) => (finder: CheckboxInputFinder) => CheckboxInputModel;

package/ui/checkbox-input.e2e.d.ts

@@ -0,0 +1 @@
+export {};

package/ui/checkbox-input.e2e.js

@@ -0,0 +1,11 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const test_1 = require("@playwright/test");
+const components_1 = require("../components");
+(0, test_1.test)("CheckboxInput", async ({ page }) => {
+    const ui = (0, components_1.createUi)(page);
+    await page.goto("/examples/ui/checkbox-input/Default");
+    await ui.checkboxInput({ $name: "default" }).change(true);
+    await ui.checkboxInput({ $name: "default" }).change(false);
+    await ui.checkboxInput({ $name: "default" }).change(true);
+});

package/ui/checkbox-input.js

@@ -0,0 +1,21 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.checkboxInput = exports.CheckboxInputModel = void 0;
+const form_component_model_1 = require("../utils/form-component-model");
+class CheckboxInputModel extends form_component_model_1.FormComponentModel {
+    constructor(page, finder) {
+        const locator = page.locator(`.uxf-checkbox-input__wrapper[data-name=${finder.$name}]`);
+        super(page, locator);
+        this.finder = finder;
+        this.checkboxLocator = this.locator.locator("input[type=checkbox]");
+        this.fakeCheckboxLocator = this.locator.locator(".uxf-checkbox");
+    }
+    async change(value) {
+        if (value !== (await this.fakeCheckboxLocator.evaluate((el) => el.classList.contains("is-selected")))) {
+            await this.locator.click();
+        }
+    }
+}
+exports.CheckboxInputModel = CheckboxInputModel;
+const checkboxInput = (page) => (finder) => new CheckboxInputModel(page, finder);
+exports.checkboxInput = checkboxInput;

package/ui/combobox.d.ts

@@ -0,0 +1,11 @@
+import { Page } from "@playwright/test";
+import { FormComponentFinder } from "../utils/base-finder";
+import { FormComponentModel } from "../utils/form-component-model";
+export type ComboboxFinder = FormComponentFinder;
+export declare class ComboboxModel extends FormComponentModel<string> {
+    private readonly finder;
+    private readonly inputLocator;
+    constructor(page: Page, finder: FormComponentFinder);
+    change(value: string): Promise<void>;
+}
+export declare const combobox: (page: Page) => (finder: ComboboxFinder) => ComboboxModel;

package/ui/combobox.e2e.d.ts

@@ -0,0 +1 @@
+export {};

package/ui/combobox.e2e.js

@@ -0,0 +1,10 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const test_1 = require("@playwright/test");
+const components_1 = require("../components");
+(0, test_1.test)("Combobox Synchronous", async ({ page }) => {
+    const ui = (0, components_1.createUi)(page);
+    await page.goto("/examples/ui/combobox/SynchronousOptions");
+    await ui.combobox({ $name: "default" }).change("Option one");
+    await ui.combobox({ $name: "default" }).change("Option three");
+});

package/ui/combobox.js

@@ -0,0 +1,20 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.combobox = exports.ComboboxModel = void 0;
+const form_component_model_1 = require("../utils/form-component-model");
+class ComboboxModel extends form_component_model_1.FormComponentModel {
+    constructor(page, finder) {
+        const locator = page.locator(`.uxf-combobox[data-name=${finder.$name}]`);
+        super(page, locator);
+        this.finder = finder;
+        this.inputLocator = this.locator.locator(".uxf-input__element");
+    }
+    async change(value) {
+        await this.inputLocator.fill(value);
+        await this.page.locator("li.uxf-dropdown__item").filter({ hasText: value }).first().click();
+        await this.page.locator("body").click();
+    }
+}
+exports.ComboboxModel = ComboboxModel;
+const combobox = (page) => (finder) => new ComboboxModel(page, finder);
+exports.combobox = combobox;

package/ui/date-picker-input.d.ts

@@ -0,0 +1,11 @@
+import { Page } from "@playwright/test";
+import { FormComponentFinder } from "../utils/base-finder";
+import { FormComponentModel } from "../utils/form-component-model";
+export type DatePickerInputFinder = FormComponentFinder;
+export declare class DatePickerInputModel extends FormComponentModel<Date> {
+    private readonly finder;
+    private readonly inputLocator;
+    constructor(page: Page, finder: FormComponentFinder);
+    change(value: Date): Promise<void>;
+}
+export declare const datePickerInput: (page: Page) => (finder: DatePickerInputFinder) => DatePickerInputModel;

package/ui/date-picker-input.e2e.d.ts

@@ -0,0 +1 @@
+export {};

package/ui/date-picker-input.e2e.js

@@ -0,0 +1,13 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const test_1 = require("@playwright/test");
+const dayjs_1 = __importDefault(require("dayjs"));
+const components_1 = require("../components");
+(0, test_1.test)("DatePickerInput", async ({ page }) => {
+    const ui = (0, components_1.createUi)(page);
+    await page.goto("/examples/ui/date-picker-input/Default");
+    await ui.datePickerInput({ $name: "default" }).change((0, dayjs_1.default)("2025-10-05").toDate());
+});

package/ui/date-picker-input.js

@@ -0,0 +1,23 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.datePickerInput = exports.DatePickerInputModel = void 0;
+const dayjs_1 = __importDefault(require("dayjs"));
+const form_component_model_1 = require("../utils/form-component-model");
+class DatePickerInputModel extends form_component_model_1.FormComponentModel {
+    constructor(page, finder) {
+        const locator = page.locator(`.uxf-date-picker-input[data-name=${finder.$name}]`);
+        super(page, locator);
+        this.finder = finder;
+        this.inputLocator = this.locator.locator(".uxf-input__element");
+    }
+    async change(value) {
+        const datetimeValue = (0, dayjs_1.default)(value).format("DD.MM.YYYY");
+        await this.inputLocator.fill(datetimeValue);
+    }
+}
+exports.DatePickerInputModel = DatePickerInputModel;
+const datePickerInput = (page) => (finder) => new DatePickerInputModel(page, finder);
+exports.datePickerInput = datePickerInput;

package/ui/datetime-picker-input.d.ts

@@ -0,0 +1,11 @@
+import { Page } from "@playwright/test";
+import { FormComponentFinder } from "../utils/base-finder";
+import { FormComponentModel } from "../utils/form-component-model";
+export type DatetimePickerInputFinder = FormComponentFinder;
+export declare class DatetimePickerInputModel extends FormComponentModel<Date> {
+    private readonly finder;
+    private readonly inputLocator;
+    constructor(page: Page, finder: FormComponentFinder);
+    change(value: Date): Promise<void>;
+}
+export declare const datetimePickerInput: (page: Page) => (finder: DatetimePickerInputFinder) => DatetimePickerInputModel;

package/ui/datetime-picker-input.e2e.d.ts

@@ -0,0 +1 @@
+export {};

package/ui/datetime-picker-input.e2e.js

@@ -0,0 +1,13 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const test_1 = require("@playwright/test");
+const dayjs_1 = __importDefault(require("dayjs"));
+const components_1 = require("../components");
+(0, test_1.test)("DatetimePickerInput", async ({ page }) => {
+    const ui = (0, components_1.createUi)(page);
+    await page.goto("/examples/ui/datetime-picker-input/Default");
+    await ui.datetimePickerInput({ $name: "default" }).change((0, dayjs_1.default)("2025-10-05").toDate());
+});

package/ui/datetime-picker-input.js

@@ -0,0 +1,23 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.datetimePickerInput = exports.DatetimePickerInputModel = void 0;
+const dayjs_1 = __importDefault(require("dayjs"));
+const form_component_model_1 = require("../utils/form-component-model");
+class DatetimePickerInputModel extends form_component_model_1.FormComponentModel {
+    constructor(page, finder) {
+        const locator = page.locator(`.uxf-date-time-picker-input[data-name=${finder.$name}]`);
+        super(page, locator);
+        this.finder = finder;
+        this.inputLocator = this.locator.locator(".uxf-input__element");
+    }
+    async change(value) {
+        const datetimeValue = (0, dayjs_1.default)(value).format("DD.MM.YYYY HH:mm:ss");
+        await this.inputLocator.fill(datetimeValue);
+    }
+}
+exports.DatetimePickerInputModel = DatetimePickerInputModel;
+const datetimePickerInput = (page) => (finder) => new DatetimePickerInputModel(page, finder);
+exports.datetimePickerInput = datetimePickerInput;

package/ui/dropzone.d.ts

@@ -0,0 +1,11 @@
+import { Page } from "@playwright/test";
+import { FormComponentFinder } from "../utils/base-finder";
+import { FormComponentModel } from "../utils/form-component-model";
+export type DropzoneFinder = FormComponentFinder;
+export declare class DropzoneModel extends FormComponentModel<string[]> {
+    private readonly finder;
+    private readonly inputLocator;
+    constructor(page: Page, finder: FormComponentFinder);
+    change(filesToUpload: string[]): Promise<void>;
+}
+export declare const dropzone: (page: Page) => (finder: DropzoneFinder) => DropzoneModel;

package/ui/dropzone.e2e.d.ts

@@ -0,0 +1 @@
+export {};

package/ui/dropzone.e2e.js

@@ -0,0 +1,35 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const test_1 = require("@playwright/test");
+const path = __importStar(require("node:path"));
+const components_1 = require("../components");
+(0, test_1.test)("Dropzone", async ({ page }) => {
+    const ui = (0, components_1.createUi)(page);
+    await page.goto("/examples/ui/dropzone/Default");
+    await ui
+        .dropzone({ $name: "default" })
+        .change([path.join(__dirname, "..", "assets", "fan.png"), path.join(__dirname, "..", "assets", "fan.png")]);
+});

package/ui/dropzone.js

@@ -0,0 +1,20 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.dropzone = exports.DropzoneModel = void 0;
+const test_1 = require("@playwright/test");
+const form_component_model_1 = require("../utils/form-component-model");
+class DropzoneModel extends form_component_model_1.FormComponentModel {
+    constructor(page, finder) {
+        const locator = page.locator(`.uxf-dropzone[data-name=${finder.$name}]`);
+        super(page, locator);
+        this.finder = finder;
+        this.inputLocator = locator.locator("input");
+    }
+    async change(filesToUpload) {
+        await this.inputLocator.setInputFiles(filesToUpload);
+        await (0, test_1.expect)(this.locator).toHaveAttribute("data-state", "OK");
+    }
+}
+exports.DropzoneModel = DropzoneModel;
+const dropzone = (page) => (finder) => new DropzoneModel(page, finder);
+exports.dropzone = dropzone;

package/ui/multi-combobox.d.ts

@@ -0,0 +1,12 @@
+import { Page } from "@playwright/test";
+import { FormComponentFinder } from "../utils/base-finder";
+import { FormComponentModel } from "../utils/form-component-model";
+export type MultiComboboxFinder = FormComponentFinder;
+export declare class MultiComboboxModel extends FormComponentModel<string[]> {
+    private readonly finder;
+    private readonly buttonLocator;
+    private readonly inputLocator;
+    constructor(page: Page, finder: FormComponentFinder);
+    change(value: string[]): Promise<void>;
+}
+export declare const multiCombobox: (page: Page) => (finder: MultiComboboxFinder) => MultiComboboxModel;

package/ui/multi-combobox.e2e.d.ts

@@ -0,0 +1 @@
+export {};

package/ui/multi-combobox.e2e.js

@@ -0,0 +1,14 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const test_1 = require("@playwright/test");
+const components_1 = require("../components");
+(0, test_1.test)("MultiSelect", async ({ page }) => {
+    const ui = (0, components_1.createUi)(page);
+    await page.goto("/examples/ui/multi-combobox/Default");
+    await ui.multiCombobox({ $name: "default" }).change(["Option red", "Option green"]);
+});
+(0, test_1.test)("MultiSelect Async", async ({ page }) => {
+    const ui = (0, components_1.createUi)(page);
+    await page.goto("/examples/ui/multi-combobox/Async");
+    await ui.multiCombobox({ $name: "async" }).change(["Option ten", "Option twelve"]);
+});

package/ui/multi-combobox.js

@@ -0,0 +1,26 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.multiCombobox = exports.MultiComboboxModel = void 0;
+const form_component_model_1 = require("../utils/form-component-model");
+class MultiComboboxModel extends form_component_model_1.FormComponentModel {
+    constructor(page, finder) {
+        const locator = page.locator(`.uxf-multi-combobox[data-name=${finder.$name}]`);
+        super(page, locator);
+        this.finder = finder;
+        this.buttonLocator = this.locator.locator(".uxf-multi-combobox__button");
+        this.inputLocator = this.locator.locator("input");
+    }
+    async change(value) {
+        await this.buttonLocator.click();
+        for (const optionText of value) {
+            /* eslint-disable no-await-in-loop */
+            await this.inputLocator.fill(optionText);
+            await this.page.locator(".uxf-dropdown__item").getByText(optionText).click();
+            /* eslint-enable no-await-in-loop */
+        }
+        await this.buttonLocator.click();
+    }
+}
+exports.MultiComboboxModel = MultiComboboxModel;
+const multiCombobox = (page) => (finder) => new MultiComboboxModel(page, finder);
+exports.multiCombobox = multiCombobox;

package/ui/multi-select.d.ts

@@ -0,0 +1,11 @@
+import { Page } from "@playwright/test";
+import { FormComponentFinder } from "../utils/base-finder";
+import { FormComponentModel } from "../utils/form-component-model";
+export type MultiSelectFinder = FormComponentFinder;
+export declare class MultiSelectModel extends FormComponentModel<string[]> {
+    private readonly finder;
+    private readonly buttonLocator;
+    constructor(page: Page, finder: FormComponentFinder);
+    change(optionTexts: string[]): Promise<void>;
+}
+export declare const multiSelect: (page: Page) => (finder: MultiSelectFinder) => MultiSelectModel;

package/ui/multi-select.e2e.d.ts

@@ -0,0 +1 @@
+export {};

package/ui/multi-select.e2e.js

@@ -0,0 +1,9 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const test_1 = require("@playwright/test");
+const components_1 = require("../components");
+(0, test_1.test)("MultiSelect", async ({ page }) => {
+    const ui = (0, components_1.createUi)(page);
+    await page.goto("/examples/ui/multi-select/Default");
+    await ui.multiSelect({ $name: "default" }).change(["Option red", "Option green"]);
+});

package/ui/multi-select.js

@@ -0,0 +1,24 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.multiSelect = exports.MultiSelectModel = void 0;
+const form_component_model_1 = require("../utils/form-component-model");
+class MultiSelectModel extends form_component_model_1.FormComponentModel {
+    constructor(page, finder) {
+        const locator = page.locator(`.uxf-multi-select[data-name=${finder.$name}]`);
+        super(page, locator);
+        this.finder = finder;
+        this.buttonLocator = this.locator.locator(".uxf-multi-select__button");
+    }
+    // TODO implementovat odebrání předchozích hodnot (ideálně nějak kliknout na clear tlačítko)
+    async change(optionTexts) {
+        await this.buttonLocator.click();
+        for (const optionText of optionTexts) {
+            // eslint-disable-next-line no-await-in-loop
+            await this.page.locator(".uxf-dropdown__item").filter({ hasText: optionText }).click();
+        }
+        await this.buttonLocator.click();
+    }
+}
+exports.MultiSelectModel = MultiSelectModel;
+const multiSelect = (page) => (finder) => new MultiSelectModel(page, finder);
+exports.multiSelect = multiSelect;

package/ui/radio-group.d.ts

@@ -0,0 +1,10 @@
+import { Page } from "@playwright/test";
+import { FormComponentFinder } from "../utils/base-finder";
+import { FormComponentModel } from "../utils/form-component-model";
+export type RadioGroupFinder = FormComponentFinder;
+export declare class RadioGroupModel extends FormComponentModel<string> {
+    private readonly finder;
+    constructor(page: Page, finder: FormComponentFinder);
+    change(value: string): Promise<void>;
+}
+export declare const radioGroup: (page: Page) => (finder: RadioGroupFinder) => RadioGroupModel;

package/ui/radio-group.e2e.d.ts

@@ -0,0 +1 @@
+export {};

package/ui/radio-group.e2e.js

@@ -0,0 +1,10 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const test_1 = require("@playwright/test");
+const components_1 = require("../components");
+(0, test_1.test)("RadioGroup", async ({ page }) => {
+    const ui = (0, components_1.createUi)(page);
+    await page.goto("/examples/ui/radio-group/Default");
+    await ui.radioGroup({ $name: "radio-group" }).change("Radio two");
+    await ui.radioGroup({ $name: "radio-group" }).change("Radio three");
+});

package/ui/radio-group.js

@@ -0,0 +1,18 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.radioGroup = exports.RadioGroupModel = void 0;
+const form_component_model_1 = require("../utils/form-component-model");
+class RadioGroupModel extends form_component_model_1.FormComponentModel {
+    constructor(page, finder) {
+        const locator = page.locator(`.uxf-radio-group[data-name=${finder.$name}]`);
+        super(page, locator);
+        this.finder = finder;
+    }
+    async change(value) {
+        const option = this.locator.locator(".uxf-radio-group__option").filter({ hasText: value });
+        await option.click();
+    }
+}
+exports.RadioGroupModel = RadioGroupModel;
+const radioGroup = (page) => (finder) => new RadioGroupModel(page, finder);
+exports.radioGroup = radioGroup;

package/ui/select.d.ts

@@ -0,0 +1,11 @@
+import { Page } from "@playwright/test";
+import { FormComponentFinder } from "../utils/base-finder";
+import { FormComponentModel } from "../utils/form-component-model";
+export type SelectFinder = FormComponentFinder;
+export declare class SelectModel extends FormComponentModel<string> {
+    private readonly finder;
+    private readonly buttonLocator;
+    constructor(page: Page, finder: FormComponentFinder);
+    change(optionText: string): Promise<void>;
+}
+export declare const select: (page: Page) => (finder: SelectFinder) => SelectModel;

package/ui/select.e2e.d.ts

@@ -0,0 +1 @@
+export {};

package/ui/select.e2e.js

@@ -0,0 +1,10 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const test_1 = require("@playwright/test");
+const components_1 = require("../components");
+(0, test_1.test)("Select", async ({ page }) => {
+    const ui = (0, components_1.createUi)(page);
+    await page.goto("/examples/ui/select/Default");
+    await ui.select({ $name: "select" }).change("Option six");
+    await ui.select({ $name: "select" }).change("Option nine");
+});

package/ui/select.js

@@ -0,0 +1,19 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.select = exports.SelectModel = void 0;
+const form_component_model_1 = require("../utils/form-component-model");
+class SelectModel extends form_component_model_1.FormComponentModel {
+    constructor(page, finder) {
+        const locator = page.locator(`.uxf-select[data-name=${finder.$name}]`);
+        super(page, locator);
+        this.finder = finder;
+        this.buttonLocator = this.locator.locator("div.uxf-input__element");
+    }
+    async change(optionText) {
+        await this.buttonLocator.click();
+        await this.page.locator(".uxf-dropdown__item").filter({ hasText: optionText }).click();
+    }
+}
+exports.SelectModel = SelectModel;
+const select = (page) => (finder) => new SelectModel(page, finder);
+exports.select = select;

package/ui/text-input.d.ts

@@ -0,0 +1,10 @@
+import { Page } from "@playwright/test";
+import { FormComponentFinder } from "../utils/base-finder";
+import { FormComponentModel } from "../utils/form-component-model";
+export type TextInputFinder = FormComponentFinder;
+export declare class TextInputModel extends FormComponentModel<string> {
+    private readonly finder;
+    constructor(page: Page, finder: FormComponentFinder);
+    change(value: string): Promise<void>;
+}
+export declare const textInput: (page: Page) => (finder: TextInputFinder) => TextInputModel;

package/ui/text-input.e2e.d.ts

@@ -0,0 +1 @@
+export {};

package/ui/text-input.e2e.js

@@ -0,0 +1,9 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const test_1 = require("@playwright/test");
+const components_1 = require("../components");
+(0, test_1.test)("TextInput", async ({ page }) => {
+    const ui = (0, components_1.createUi)(page);
+    await page.goto("/examples/ui/text-input/Default");
+    await ui.textInput({ $name: "default" }).change("Value");
+});

package/ui/text-input.js

@@ -0,0 +1,17 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.textInput = exports.TextInputModel = void 0;
+const form_component_model_1 = require("../utils/form-component-model");
+class TextInputModel extends form_component_model_1.FormComponentModel {
+    constructor(page, finder) {
+        const locator = page.locator(`.uxf-text-input[data-name=${finder.$name}]`);
+        super(page, locator);
+        this.finder = finder;
+    }
+    async change(value) {
+        await this.locator.locator("input").fill(value);
+    }
+}
+exports.TextInputModel = TextInputModel;
+const textInput = (page) => (finder) => new TextInputModel(page, finder);
+exports.textInput = textInput;

package/ui/textarea.d.ts

@@ -0,0 +1,10 @@
+import { Page } from "@playwright/test";
+import { FormComponentFinder } from "../utils/base-finder";
+import { FormComponentModel } from "../utils/form-component-model";
+export type TextareaFinder = FormComponentFinder;
+export declare class TextareaModel extends FormComponentModel<string> {
+    private readonly finder;
+    constructor(page: Page, finder: FormComponentFinder);
+    change(value: string): Promise<void>;
+}
+export declare const textarea: (page: Page) => (finder: TextareaFinder) => TextareaModel;

package/ui/textarea.e2e.d.ts

@@ -0,0 +1 @@
+export {};

package/ui/textarea.e2e.js

@@ -0,0 +1,9 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const test_1 = require("@playwright/test");
+const components_1 = require("../components");
+(0, test_1.test)("Textarea", async ({ page }) => {
+    const ui = (0, components_1.createUi)(page);
+    await page.goto("/examples/ui/textarea/Default");
+    await ui.textarea({ $name: "text-area" }).change("Value");
+});

package/ui/textarea.js

@@ -0,0 +1,18 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.textarea = exports.TextareaModel = void 0;
+const form_component_model_1 = require("../utils/form-component-model");
+class TextareaModel extends form_component_model_1.FormComponentModel {
+    constructor(page, finder) {
+        const locator = page.locator(`.uxf-textarea[data-name=${finder.$name}]`);
+        super(page, locator);
+        this.finder = finder;
+    }
+    async change(value) {
+        const textarea = this.locator.locator("textarea");
+        await textarea.fill(value);
+    }
+}
+exports.TextareaModel = TextareaModel;
+const textarea = (page) => (finder) => new TextareaModel(page, finder);
+exports.textarea = textarea;

package/ui/toggle.d.ts

@@ -0,0 +1,10 @@
+import { Page } from "@playwright/test";
+import { FormComponentFinder } from "../utils/base-finder";
+import { FormComponentModel } from "../utils/form-component-model";
+export type ToggleFinder = FormComponentFinder;
+export declare class ToggleModel extends FormComponentModel<boolean> {
+    private readonly finder;
+    constructor(page: Page, finder: FormComponentFinder);
+    change(value: boolean): Promise<void>;
+}
+export declare const toggle: (page: Page) => (finder: ToggleFinder) => ToggleModel;

package/ui/toggle.e2e.d.ts

@@ -0,0 +1 @@
+export {};

package/ui/toggle.e2e.js

@@ -0,0 +1,11 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const test_1 = require("@playwright/test");
+const components_1 = require("../components");
+(0, test_1.test)("Toggle", async ({ page }) => {
+    const ui = (0, components_1.createUi)(page);
+    await page.goto("/examples/ui/toggle/Default");
+    await ui.toggle({ $name: "toggle-default" }).change(true);
+    await ui.toggle({ $name: "toggle-default" }).change(false);
+    await ui.toggle({ $name: "toggle-default" }).change(true);
+});

package/ui/toggle.js

@@ -0,0 +1,20 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.toggle = exports.ToggleModel = void 0;
+const form_component_model_1 = require("../utils/form-component-model");
+class ToggleModel extends form_component_model_1.FormComponentModel {
+    constructor(page, finder) {
+        const locator = page.locator(`.uxf-toggle__wrapper[data-name=${finder.$name}]`);
+        super(page, locator);
+        this.finder = finder;
+    }
+    async change(value) {
+        const isSelected = await this.locator.locator("button").evaluate((el) => el.classList.contains("is-selected"));
+        if (value !== isSelected) {
+            return this.locator.locator("button").click();
+        }
+    }
+}
+exports.ToggleModel = ToggleModel;
+const toggle = (page) => (finder) => new ToggleModel(page, finder);
+exports.toggle = toggle;

package/utils/base-finder.d.ts

@@ -0,0 +1,7 @@
+import { Locator } from "@playwright/test";
+export type BaseFinder = {
+    parent?: Locator;
+};
+export interface FormComponentFinder extends BaseFinder {
+    $name: string;
+}

package/utils/base-finder.js

@@ -0,0 +1,2 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });

package/utils/base-model.d.ts

@@ -0,0 +1,8 @@
+import { Locator, Page } from "@playwright/test";
+export declare abstract class BaseModel {
+    protected readonly page: Page;
+    protected readonly locator: Locator;
+    protected constructor(page: Page, locator: Locator);
+    shouldExist(): Promise<void>;
+    shouldNotExist(): Promise<void>;
+}

package/utils/base-model.js

@@ -0,0 +1,17 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.BaseModel = void 0;
+const test_1 = require("@playwright/test");
+class BaseModel {
+    constructor(page, locator) {
+        this.page = page;
+        this.locator = locator;
+    }
+    async shouldExist() {
+        await (0, test_1.expect)(this.locator).toBeVisible();
+    }
+    async shouldNotExist() {
+        await (0, test_1.expect)(this.locator).not.toBeVisible();
+    }
+}
+exports.BaseModel = BaseModel;

package/utils/form-component-model.d.ts

@@ -0,0 +1,6 @@
+import { Locator, Page } from "@playwright/test";
+import { BaseModel } from "./base-model";
+export declare abstract class FormComponentModel<Value> extends BaseModel {
+    protected constructor(page: Page, locator: Locator);
+    abstract change(value: Value): Promise<any>;
+}

package/utils/form-component-model.js

@@ -0,0 +1,10 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.FormComponentModel = void 0;
+const base_model_1 = require("./base-model");
+class FormComponentModel extends base_model_1.BaseModel {
+    constructor(page, locator) {
+        super(page, locator);
+    }
+}
+exports.FormComponentModel = FormComponentModel;