feat: add conditional (non-attribute) selectors to ElementQueries (#1784

)

In contrast to ComponentQuerys of unit testing TestBench, ElementQuerys in E2E testing TestBench have (up until now) only provided attribute-based selector methods. This was expanded upon in PR #1774 to provide selector methods for common attributes, such as those for class names, theme, and id. This PR adds condition-based selector methods to ElementQuery to mirror and expand upon those of ComponentQuery. Namely:

withCondition
withPropertyValue[Containing]
withLabel[Containing]
withPlaceholder[Containing]
withCaption[Containing]
withText[Containing]

Elements having their labels in their text (such as buttons) must implement a new, method-less interface HasLabelAsText in their element tester (such as NativeButtonElement for the NativeButton component and ButtonElement for the Button component) in order for the withCaption[Containing] selectors to work for them.

This PR brings the E2E testing selectors up to par with the unit testing selectors. The only one missing is withValue.

Fixes #1183

vaadin-testbench-integration-tests-junit5/frontend/label-placeholder.ts

@@ -0,0 +1,21 @@
+import { html, LitElement } from 'lit';
+import { customElement, property } from 'lit/decorators.js';
+
+@customElement('label-placeholder')
+class LabelPlaceholder extends LitElement {
+    @property({ type: String })
+    label!: string;
+
+    @property({ type: String })
+    placeholder!: string;
+
+    render() {
+        return html`
+            <div>
+                <div id="label">${this.label}</div>
+                <div id="placeholder">${this.placeholder}</div>
+                <slot></slot>
+            </div>
+        `;
+    }
+}

vaadin-testbench-integration-tests-junit5/frontend/template-view.ts

@@ -18,6 +18,20 @@ export class TemplateView extends LitElement {
                 <button class="button button-shadow-special" id="special-button">Special Button (in Shadow DOM)</button>
             </div>
             <button class="button" id="foo'*+bar'">Button with special id</button>
+
+            <label-placeholder></label-placeholder>
+
+            <label-placeholder label="one"></label-placeholder>
+            <label-placeholder placeholder="two"></label-placeholder>
+            <label-placeholder label="one" placeholder="two"></label-placeholder>
+
+            <label-placeholder label="two"></label-placeholder>
+            <label-placeholder placeholder="one"></label-placeholder>
+            <label-placeholder label="two" placeholder="one"></label-placeholder>
+
+            <label-placeholder label="Special">Something Special</label-placeholder>
+            <label-placeholder label="Ordinary" placeholder="Special">Something Else</label-placeholder>
+            <label-placeholder placeholder="Special">Something Ordinary</label-placeholder>
         `;
     }
 }

vaadin-testbench-integration-tests-junit5/src/main/java/com/vaadin/testUI/LabelPlaceholder.java

@@ -0,0 +1,20 @@
+package com.vaadin.testUI;
+
+import com.vaadin.flow.component.HasLabel;
+import com.vaadin.flow.component.HasPlaceholder;
+import com.vaadin.flow.component.HasText;
+import com.vaadin.flow.component.Tag;
+import com.vaadin.flow.component.dependency.JsModule;
+import com.vaadin.flow.component.littemplate.LitTemplate;
+
+@Tag(LabelPlaceholder.TAG)
+@JsModule(LabelPlaceholder.JS_MODULE)
+public class LabelPlaceholder extends LitTemplate
+        implements HasLabel, HasPlaceholder, HasText {
+    public static final String TAG = "label-placeholder";
+    public static final String JS_MODULE = "./" + TAG + ".ts";
+
+    public LabelPlaceholder() {
+        //
+    }
+}

vaadin-testbench-integration-tests-junit5/src/main/java/com/vaadin/testUI/TemplateView.java

@@ -8,6 +8,7 @@
  */
 package com.vaadin.testUI;
 
+import com.vaadin.flow.component.Component;
 import com.vaadin.flow.component.Tag;
 import com.vaadin.flow.component.dependency.JsModule;
 import com.vaadin.flow.component.html.Div;
@@ -27,7 +28,7 @@ public TemplateView() {
             button.getElement().setAttribute("theme", "light-theme");
             button.addClassName("button");
             button.addClassName("button-" + i);
-            getElement().appendChild(new Div(button).getElement());
+            add(new Div(button));
         }
 
         NativeButton slottedButton = new NativeButton(
@@ -37,6 +38,20 @@ public TemplateView() {
         slottedButton.getElement().setAttribute("theme", "light-theme");
         slottedButton.addClassName("button");
         slottedButton.addClassName("button-special-slot");
-        getElement().appendChild(slottedButton.getElement());
+        add(slottedButton);
+
+        LabelPlaceholder oneLabelPlaceholder = new LabelPlaceholder();
+        oneLabelPlaceholder.setLabel("one");
+        oneLabelPlaceholder.setPlaceholder("two");
+        add(oneLabelPlaceholder);
+
+        LabelPlaceholder flowLabelPlaceholder = new LabelPlaceholder();
+        flowLabelPlaceholder.setLabel("Flow");
+        flowLabelPlaceholder.setPlaceholder("flow component");
+        add(flowLabelPlaceholder);
+    }
+
+    private void add(Component component) {
+        getElement().appendChild(component.getElement());
     }
 }