CardElement

Playwright element wrapper for Vaadin Card component

CardElement

Playwright element wrapper for <vaadin-card> exposing slot-aware accessors for title, subtitle, header/footer, media, and content areas.

Component Tag

vaadin-card

Implements

• HasThemeElement - Theme variant support
• HasStyleElement - CSS class and style management

Constructor

locator · Locator · required

Playwright locator for the <vaadin-card> element

Static Factory Methods

getByTitle

Get a card by its title text.

CardElement.getByTitle(Page page, String title)
CardElement.getByTitle(Locator locator, String title)

page · Page

Playwright page

locator · Locator

Scope to search within

title · String

Card’s title text (matches slot=“title” content)

Slot Locators

getTitleLocator

Locator for the title slot (slot="title").

Locator getTitleLocator()

getSubtitleLocator

Locator for the subtitle slot (slot="subtitle").

Locator getSubtitleLocator()

getHeaderLocator

Locator for the header slot (slot="header").

Locator getHeaderLocator()

getHeaderPrefixLocator

Locator for the header prefix slot (slot="header-prefix").

Locator getHeaderPrefixLocator()

getHeaderSuffixLocator

Locator for the header suffix slot (slot="header-suffix").

Locator getHeaderSuffixLocator()

getMediaLocator

Locator for the media slot (slot="media").

Locator getMediaLocator()

getFooterLocator

Locator for the footer slot (slot="footer").

Locator getFooterLocator()

getContentLocator

Locator for the default content slot (non-slotted first child).

Locator getContentLocator()

Assertion Methods

assertTitle

Assert the card title text, or absence when null.

void assertTitle(String title)

title · String

Expected title text, or null to assert absence

assertSubtitle

Assert the card subtitle text, or absence when null.

void assertSubtitle(String subtitle)

subtitle · String

Expected subtitle text, or null to assert absence

Usage Examples

Access Card Slots

CardElement card = CardElement.getByTitle(page, "Lapland");
card.assertVisible();
card.assertTheme("outlined");
card.assertCssClass("lapland-card");
card.assertTitle("Lapland");
card.assertSubtitle("The Exotic North");

assertThat(card.getHeaderPrefixLocator()).hasText("Lapland prefix");
assertThat(card.getHeaderSuffixLocator()).hasText("Arctic");
assertThat(card.getMediaLocator()).hasText("Aurora media");
assertThat(card.getContentLocator())
    .containsText("Lapland is the northern-most region of Finland");

Working with Footer Actions

CardElement card = CardElement.getByTitle(page, "Booking Card");
card.assertTheme("elevated");

// Click button in footer
ButtonElement footerButton = new ButtonElement(
    card.getFooterLocator().filter(
        new Locator.FilterOptions().setHasText("Book now")
    )
);
footerButton.click();

Find Nested Components

CardElement card = CardElement.getByTitle(page, "Action Card");

// Find button within card content
ButtonElement bookButton = ButtonElement.getByText(card.getLocator(), "Book now");
bookButton.click();

ButtonElement resetButton = ButtonElement.getByText(card.getLocator(), "Reset");
resetButton.click();