Add test for picker input example

uui-e2e-tests/framework/pageObjects/pickerInputObject.ts

@@ -0,0 +1,34 @@
+import { Locator, Page } from '@playwright/test';
+
+export class PickerInputObject {
+    constructor(private page: Page, private root: Locator) {
+    }
+
+    // getByPlaceholder('Please select locations').click();
+    async openDropdown() {
+        await this.root.first().click();
+    }
+
+    // E.g.: ['parent-1', 'parent-2', 'item-to-select']
+    async selectItemFromTree(hierarchy: string[]) {
+        for (let i = 0; i < hierarchy.length; i++) {
+            const text = hierarchy[i];
+            const isLast = i === hierarchy.length - 1;
+            if (isLast) {
+                await this.page.getByText(text).click();
+            } else {
+                await this.page.getByRole('cell', { name: text }).getByLabel('Unfold').click();
+            }
+        }
+    }
+
+    async arrowDownNTimesAndSelect(times: number = 1) {
+        const elem = this.page.locator('*:focus');
+        for (let i = 0; i < times + 1; i++) {
+            await elem.press('ArrowDown');
+            await this.page.waitForTimeout(50);
+        }
+        await elem.press('Enter');
+        await this.page.waitForTimeout(50);
+    }
+}

uui-e2e-tests/package.json

@@ -19,6 +19,7 @@
     "test-e2e-update": "cross-env UUI_TEST_PARAM_UPDATE_SNAPSHOTS=true yarn test-e2e",
     "test-e2e-open-report": "npx ../node_modules/playwright show-report ./tests/.report/report",
     "start-server": "yarn --cwd ../app server",
+    "codegen": "npx ../node_modules/playwright codegen",
     "print-error": "ts-node scripts/cmd/cmdPrintError.ts"
   },
   "dependencies": {

uui-e2e-tests/tests/docExampleTests/docExample.e2e.ts

@@ -1,10 +1,16 @@
 import { test } from '../../framework/fixtures/docExamplePage/fixture';
-import { expect } from '@playwright/test';
 import { TTheme } from '../../framework';
+import { PickerInputObject } from '../../framework/pageObjects/pickerInputObject';
+import { expect } from '@playwright/test';
 
-/*
-test('dummy test', async ({ docExamplePage }) => {
+test('PickerInput-ValueSelectWithKeyboard', async ({ docExamplePage }) => {
     await docExamplePage.editDocExample({ examplePath: 'pickerInput/LazyTreeInput', theme: TTheme.promo });
-    await expect(docExamplePage.page).toHaveScreenshot();
+    const { page } = docExamplePage;
+    const root = page.locator('css=.uui-input-box');
+    const pio = new PickerInputObject(page, root);
+    await pio.openDropdown();
+    await pio.arrowDownNTimesAndSelect(7);
+    await pio.arrowDownNTimesAndSelect(10);
+    await pio.arrowDownNTimesAndSelect(20);
+    await expect(page).toHaveScreenshot();
 });
-*/