Skip to main content

​
Overview

HasClearButtonElement provides methods for interacting with the clear button that appears in Vaadin input components. The clear button allows users to quickly remove all input from a field, and this interface enables testing of that functionality. Interface Location: org.vaadin.addons.dramafinder.element.shared.HasClearButtonElement

​
Methods

​
getClearButtonLocator()

default Locator getClearButtonLocator()
Returns a locator for the clear button element using the part~="clear-button" selector. Returns: Locator - Locator for the clear button part

​
clickClearButton()

default void clickClearButton()
Clicks the clear button to remove the field’s value.

​
isClearButtonVisible()

default boolean isClearButtonVisible()
Checks whether the clear button is currently visible. The clear button is typically only visible when the field has a value. Returns: boolean - true if the clear button is visible, false otherwise

​
assertClearButtonVisible()

default void assertClearButtonVisible()
Asserts that the clear button is visible. Throws: AssertionError if the clear button is not visible

​
assertClearButtonNotVisible()

default void assertClearButtonNotVisible()
Asserts that the clear button is not visible. Throws: AssertionError if the clear button is visible

​
Implementing Classes

The following element classes implement HasClearButtonElement:
  • TextFieldElement (and all subclasses: TextAreaElement, PasswordFieldElement, EmailFieldElement)
  • AbstractNumberFieldElement (and its subclasses: NumberFieldElement, IntegerFieldElement, BigDecimalFieldElement)
  • All text input components that support the clear button feature

​
Usage Example

import org.vaadin.addons.dramafinder.element.TextFieldElement;
import com.microsoft.playwright.Page;

public class ClearButtonTest {
    void testClearButton(Page page) {
        TextFieldElement searchField = TextFieldElement.getByLabel(page, "Search");
        
        // Initially empty - clear button not visible
        searchField.assertClearButtonNotVisible();
        
        // Enter text - clear button appears
        searchField.setValue("test query");
        searchField.assertClearButtonVisible();
        
        // Click clear button
        searchField.clickClearButton();
        
        // Field is now empty
        searchField.assertValue("");
        searchField.assertClearButtonNotVisible();
    }
}

​
Implementation Details

​
Part Selector

The clear button is located using Vaadin’s part attribute system, which allows targeting internal parts of a shadow DOM component: 
getLocator().locator("[part~=\"clear-button\"]")
The ~= attribute selector matches when part contains the word “clear-button” in its space-separated list of values.

​
Clear Button Behavior

In Vaadin components:
  • The clear button is automatically hidden when the field is empty
  • It appears when the field has any value
  • Clicking it clears the field and hides the button again
  • The clear button can be disabled via the clear-button-visible property

​
Testing Patterns

​
Test Clear Button Visibility

TextFieldElement field = TextFieldElement.getByLabel(page, "Name");

// Empty field - no clear button
field.assertValue("");
field.assertClearButtonNotVisible();

// Field with value - clear button appears
field.setValue("John");
field.assertClearButtonVisible();

​
Test Clear Functionality

TextFieldElement email = TextFieldElement.getByLabel(page, "Email");

email.setValue("[email protected]");
email.assertValue("[email protected]");

// Use clear button instead of programmatic clear
email.clickClearButton();

email.assertValue("");
email.assertClearButtonNotVisible();

​
Test Clear Button in Search Flow

TextFieldElement search = TextFieldElement.getByLabel(page, "Search");

// Enter search term
search.setValue("widgets");
page.waitForSelector(".search-result");

// Clear search
search.clickClearButton();

// Verify results are cleared or reset
assertThat(page.locator(".search-result")).not().isVisible();

​
Test Clear Button with Validation

TextFieldElement required = TextFieldElement.getByLabel(page, "Required Field");

required.setValue("test");
required.assertValid();

// Clearing via button should trigger validation
required.clickClearButton();
required.assertInvalid();
required.assertErrorMessage("This field is required");

​
Test Clear Button Accessibility

TextFieldElement field = TextFieldElement.getByLabel(page, "Input");

field.setValue("test");

// Verify clear button can be focused and activated with keyboard
Locator clearButton = field.getClearButtonLocator();
clearButton.focus();
assertThat(clearButton).isFocused();

// Press Enter to activate
page.keyboard().press("Enter");
field.assertValue("");

​
Best Practices

​
Use Clear Button for User Simulation

When testing user workflows, prefer using clickClearButton() over programmatic clear() to better simulate real user interaction: 
// Better: Simulates user clicking clear button
field.clickClearButton();

// Less realistic: Direct programmatic clear
field.clear();

​
Check Visibility Before Clicking

Always verify the clear button is visible before attempting to click it: 
if (field.isClearButtonVisible()) {
    field.clickClearButton();
}
Or use assertions: 
field.assertClearButtonVisible();
field.clickClearButton();

​
Test Clear Button Disabled State

Some implementations may allow disabling the clear button. Test this if applicable: 
// When clear-button-visible is set to false
field.setValue("test");
field.assertClearButtonNotVisible();

Build docs developers (and LLMs) love

Get started for freeTalk to us