Added ComboBoxPw

closes #3

src/main/java/in/virit/mopo/ComboBoxPw.java

@@ -0,0 +1,74 @@
+package in.virit.mopo;
+
+import com.microsoft.playwright.Locator;
+
+import static com.microsoft.playwright.assertions.PlaywrightAssertions.assertThat;
+
+public class ComboBoxPw {
+
+    private final Locator root;
+
+    /**
+     * Creates a ComboBox page object for the given locator.
+     *
+     * @param gridLocator the Playwright locator for the combobox to be
+     * interacted with
+     */
+    public ComboBoxPw(Locator gridLocator) {
+        this.root = gridLocator;
+    }
+
+    /**
+     * Searches for given term in the ComboBox and picks the first suggestion.
+     *
+     * @param filter the string to be searched for
+     */
+    public void filterAndSelectFirst(String filter) {
+        filter(filter);
+        root.locator("input").press("Enter");
+    }
+
+    public ComboBoxPw filter(String filter) {
+        root.locator("input").fill(filter);
+        return this;
+    }
+
+    /**
+     * Selects a given option from currently open suggestions.
+     *
+     * @param option the text of the option to select
+     * @return the ComboBoxPw for further configuration
+     */
+    public ComboBoxPw selectOption(String option) {
+        selectionDropdown()
+                // For reason unknown to me, there are sometimes duplicates
+                // of some items that are "hidden" (and hidden with css), skip those
+                .locator("vaadin-combo-box-item:not([hidden])")
+                .getByText(option, new Locator.GetByTextOptions().setExact(true))
+                .click();
+        assertThat(selectionDropdown()).isHidden();
+        return this;
+    }
+
+    /**
+     * Returns a locator for the combobox overlay that contains current
+     * suggestions
+     *
+     * @return the locator for selection overlay
+     */
+    public Locator selectionDropdown() {
+        // there can be only one
+        return root.page().locator("vaadin-combo-box-overlay");
+    }
+
+    /**
+     * Clicks on the dropdown toggle button in the ComboBox to show the options.
+     *
+     * @return a Locator to the selection dropdown
+     */
+    public Locator openDropDown() {
+        root.locator("#toggleButton").click();
+        return selectionDropdown();
+    }
+
+}

src/test/java/firitin/pw/ComboBoxIT.java

@@ -0,0 +1,111 @@
+package firitin.pw;
+
+import com.microsoft.playwright.Browser;
+import com.microsoft.playwright.BrowserType;
+import com.microsoft.playwright.Locator;
+import com.microsoft.playwright.Page;
+import com.microsoft.playwright.Playwright;
+import in.virit.mopo.ComboBoxPw;
+import in.virit.mopo.Mopo;
+import org.junit.jupiter.api.AfterEach;
+import org.junit.jupiter.api.BeforeEach;
+import org.junit.jupiter.api.Tag;
+import org.junit.jupiter.api.Test;
+
+import static com.microsoft.playwright.assertions.PlaywrightAssertions.assertThat;
+
+@Tag("playwright")
+public class ComboBoxIT {
+    private final int port = 9998;
+
+    static Playwright playwright = Playwright.create();
+
+    static {
+    }
+
+    private Browser browser;
+    private Page page;
+    private Mopo mopo;
+
+    @BeforeEach
+    public void setup() {
+        browser = playwright.chromium()
+                .launch(new BrowserType.LaunchOptions()
+//                        .setHeadless(false)
+//                        .setDevtools(true)
+                );
+
+        page = browser.newPage();
+        page.setDefaultTimeout(5000); // die faster if needed
+        mopo = new Mopo(page);
+    }
+
+    @AfterEach
+    public  void closePlaywright() {
+        page.close();
+        browser.close();
+    }
+
+    @Test
+    public void rawUsage() throws InterruptedException {
+        page.navigate("http://localhost:" + port + "/combobox");
+
+        assertThat(page.locator("vaadin-combo-box")).isVisible();
+
+        Locator value = page.locator("#value");
+
+        assertThat(value).containsText("bar");
+
+        Locator cb = page.locator("input[role='combobox']");
+
+        cb.fill("foo");
+        cb.press("Enter");
+
+        assertThat(value).containsText("foo");
+
+        cb.fill("ba");
+        Locator overlay = page.locator("vaadin-combo-box-overlay");
+        // this should be third option & visible
+        overlay.getByText("baz").click();
+
+        assertThat(value).containsText("baz");
+
+
+        // Show options with the arrow down click
+        page.locator("vaadin-combo-box #toggleButton").click();
+
+        //pick first option
+        page.locator("vaadin-combo-box-item").first().click();
+        assertThat(value).containsText("foo");
+
+        System.out.println("Success!!");
+    }
+
+    @Test
+    public void usageWithComboBoxPw() throws InterruptedException {
+        page.navigate("http://localhost:" + port + "/combobox");
+
+        // in the example only one, typically with id or label
+        ComboBoxPw cbPw = new ComboBoxPw(page.locator("vaadin-combo-box"));
+        assertThat(page.locator("vaadin-combo-box")).isVisible();
+
+        Locator value = page.locator("#value");
+
+        assertThat(value).containsText("bar");
+
+        cbPw.filterAndSelectFirst("foo");
+
+        assertThat(value).containsText("foo");
+
+        cbPw.filter("ba").selectOption("baz");
+
+        assertThat(value).containsText("baz");
+
+        cbPw.openDropDown().getByText("foo").click();
+
+        assertThat(value).containsText("foo");
+
+        System.out.println("Success!!");
+    }
+
+}

src/test/java/firitin/ui/ComboBoxView.java

@@ -0,0 +1,25 @@
+package firitin.ui;
+
+import com.vaadin.flow.component.combobox.ComboBox;
+import com.vaadin.flow.component.html.Paragraph;
+import com.vaadin.flow.component.orderedlayout.VerticalLayout;
+import com.vaadin.flow.router.Route;
+
+@Route
+public class ComboBoxView extends VerticalLayout {
+
+    public ComboBoxView() {
+        add("Test view");
+
+        ComboBox<String> cb = new ComboBox<>();
+        cb.setItems("foo", "bar", "bar2","baz");
+        Paragraph value = new Paragraph();
+        value.setId("value");
+        cb.addValueChangeListener(e -> {
+            value.setText("value:" + e.getValue());
+        });
+        add(cb,value);
+
+        cb.setValue("bar");
+    }
+}