CtrlK
BlogDocsLog inGet started
Tessl Logo

dramafinder/vaadin-playwright-test

Generate Playwright integration tests for Vaadin 25 views using the DramaFinder library. Use when the user wants to write IT tests for a Vaadin view, mentions DramaFinder, or asks about Playwright testing in a Vaadin project.

73

Quality

92%

Does it follow best practices?

Run evals on this skill

Adds up to 20 points to the overall score

View guide

SecuritybySnyk

Passed

No findings from the security scan

Overview
Quality
Evals
Security
Files

VaadinElement.mddocs/specifications/

VaadinElement Specification

For the authoritative method list and signatures, see the auto-generated api-reference.md. This file focuses on behaviour and usage that signatures alone don't convey.

Overview

VaadinElement is the abstract base class for all typed Playwright wrappers around Vaadin components. It exposes common helpers such as clicking, visibility assertions, text retrieval and generic DOM property access. Concrete components add component-specific APIs on top of this.

Class Hierarchy

VaadinElement (abstract)
    ├── AbstractNumberFieldElement
    ├── AccordionElement
    ├── AccordionPanelElement
    ├── BigDecimalFieldElement
    ├── ButtonElement
    ├── CardElement
    ├── CheckboxElement
    ├── ComboBoxElement
    ├── ContextMenuElement
    ├── DatePickerElement
    ├── DateTimePickerElement
    ├── DetailsElement
    ├── DialogElement
    ├── ListBoxElement
    ├── MenuBarElement
    ├── MenuElement
    ├── MenuItemElement
    ├── NotificationElement
    ├── PopoverElement
    ├── ProgressBarElement
    ├── RadioButtonElement
    ├── RadioButtonGroupElement
    ├── SelectElement
    ├── SideNavigationElement
    ├── SideNavigationItemElement
    ├── TabElement
    ├── TabSheetElement
    ├── TextFieldElement
    ├── TimePickerElement
    └── UploadElement

Implemented Interfaces

InterfaceDescription
HasLocatorElementProvides access to underlying Playwright locator

API Methods

Constructor

VaadinElement(Locator locator)

Creates a new VaadinElement wrapper from a Playwright locator.

Basic Actions

MethodDescription
click()Click the component root
getText()Get textual content of component

Locator Access

MethodDescription
getLocator()Get the underlying Playwright Locator

Property Access

MethodDescription
setProperty(String name, Object value)Set a DOM property
getProperty(String name)Get a DOM property value

Visibility

MethodDescription
isVisible()Whether component is visible
isHidden()Whether component is hidden
assertVisible()Assert component is visible
assertHidden()Assert component is hidden

Usage Examples

Basic Usage

// All element classes extend VaadinElement
ButtonElement button = ButtonElement.getByText(page, "Save");

// Common methods available
button.click();
String text = button.getText();

Visibility Checks

DialogElement dialog = new DialogElement(page);

// Check visibility
if (dialog.isVisible()) {
    dialog.click();
}

// Assert visibility
dialog.assertVisible();
dialog.assertHidden();

Property Access

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

// Set DOM property
field.setProperty("value", "John");

// Get DOM property
Object disabled = field.getProperty("disabled");

Locator Access

CardElement card = CardElement.getByTitle(page, "Product");

// Get underlying locator for custom operations
Locator locator = card.getLocator();
locator.screenshot();
locator.evaluate("el => el.scrollIntoView()");

Extending VaadinElement

To create a new element wrapper:

@PlaywrightElement(MyElement.FIELD_TAG_NAME)
public class MyElement extends VaadinElement {

    public static final String FIELD_TAG_NAME = "my-component";

    public MyElement(Locator locator) {
        super(locator);
    }

    // Add component-specific methods
    public void doSomething() {
        getLocator().locator(".internal").click();
    }
}

Related Interfaces

  • HasLocatorElement - Base locator interface
  • HasInputFieldElement - Input field operations
  • HasValidationPropertiesElement - Validation support
  • FocusableElement - Focus operations
  • HasEnabledElement - Enabled/disabled state
  • HasThemeElement - Theme variants

docs

specifications

ComboBoxElement.md

DatePickerElement.md

DateTimePickerElement.md

GridElement.md

MessageInputElement.md

NotificationElement.md

RadioButtonElement.md

TextAreaElement.md

TimePickerElement.md

TreeGridElement.md

UploadElement.md

VaadinElement.md

VirtualListElement.md

.mcp.json

llms.txt

PLAN.md

README.md

tile.json

TODO.md

tsconfig.json