SplitLayoutElement
Playwright element wrapper for <vaadin-split-layout> providing helpers to read/change orientation, access primary/secondary content, and control splitter position.
Component Tag
vaadin-split-layout
Implements
HasStyleElement - CSS class and style managementHasThemeElement - Theme variant support
Constructor
Playwright locator for the <vaadin-split-layout> element
Static Factory Methods
get
Get the first split layout on the page.
SplitLayoutElement.get(Page page)
Content Locators
getPrimaryLocator
Locator for the primary content (slot="primary").
Locator getPrimaryLocator()
getSecondaryLocator
Locator for the secondary content (slot="secondary").
Locator getSecondaryLocator()
getHandleLocator
Locator for the splitter handle (shadow part="handle").
Locator getHandleLocator()
Methods
dragSplitterBy
Drag the splitter by a delta offset in pixels. Positive X moves right, positive Y moves down.
void dragSplitterBy(double deltaX, double deltaY)
Horizontal offset in pixels (positive = right)
Vertical offset in pixels (positive = down)
Assertion Methods
assertVertical
Assert that the layout orientation is vertical.
assertHorizontal
Assert that the layout orientation is horizontal.
Usage Examples
Access Primary and Secondary Content
SplitLayoutElement splitLayout = SplitLayoutElement.get(page);
Locator primary = splitLayout.getPrimaryLocator();
Locator secondary = splitLayout.getSecondaryLocator();
assertThat(primary).containsText("Left panel content");
assertThat(secondary).containsText("Right panel content");
Verify Orientation
SplitLayoutElement splitLayout = SplitLayoutElement.get(page);
splitLayout.assertHorizontal();
// After changing to vertical
splitLayout.assertVertical();
Drag the Splitter
SplitLayoutElement splitLayout = SplitLayoutElement.get(page);
// Drag splitter 100px to the right
splitLayout.dragSplitterBy(100, 0);
// For vertical layout, drag down
splitLayout.dragSplitterBy(0, 50);
Access Splitter Handle
SplitLayoutElement splitLayout = SplitLayoutElement.get(page);
Locator handle = splitLayout.getHandleLocator();
assertThat(handle).isVisible();
handle.hover(); // Show hover state
Work with Nested Components
SplitLayoutElement splitLayout = SplitLayoutElement.get(page);
// Find button in primary panel
ButtonElement button = ButtonElement.getByText(
splitLayout.getPrimaryLocator(),
"Primary Action"
);
button.click();
// Access grid in secondary panel
GridElement grid = GridElement.get(splitLayout.getSecondaryLocator());
assertEquals(10, grid.getTotalRowCount());