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 supportHasStyleElement - CSS class and style management
Constructor
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)
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()
slot="header").
Locator getHeaderLocator()
slot="header-prefix").
Locator getHeaderPrefixLocator()
slot="header-suffix").
Locator getHeaderSuffixLocator()
slot="media").
Locator getMediaLocator()
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)
Expected title text, or null to assert absence
assertSubtitle
Assert the card subtitle text, or absence when null.
void assertSubtitle(String subtitle)
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");
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();