Function toBeVerticallyAlignedWith

toBeVerticallyAlignedWith(
    element: Locator,
    container: Locator,
    alignment: VerticalAlignment,
    options?: Tolerance,
): Promise<MatcherReturnType>

Asserts that the target element is vertically aligned with the specified container according to the given alignment type.

Top alignment (alignment = VerticalAlignment.Top):

┌───────────────────────────────┐
│┌─────────┐                    │
││ Element │                    │
│└─────────┘                    │
│                               │
│                               │
│                               │
└───────────────────────────────┘

Center alignment (alignment = VerticalAlignment.Center):

┌───────────────────────────────┐
│                               │
│                               │
│┌─────────┐                    │
││ Element │                    │
│└─────────┘                    │
│                               │
│                               │
└───────────────────────────────┘

Bottom alignment (alignment = VerticalAlignment.Bottom):

┌───────────────────────────────┐
│                               │
│                               │
│                               │
│┌─────────┐                    │
││ Element │                    │
│└─────────┘                    │
└───────────────────────────────┘

Parameters

element: Locator
The element as a Locator to check for vertical alignment.
container: Locator
The container element as a Locator relative to which vertical alignment is checked.
alignment: VerticalAlignment
The type of vertical alignment to check (top, center, or bottom).
options: Tolerance = {}
Optional size comparison options.

Returns Promise<MatcherReturnType>

A Promise that resolves with the matcher result.

Example

// Check that a header is bottom-aligned with its section container, allowing a 2% vertical tolerance
await expect(headerLocator).toBeVerticallyAlignedWith(parentLocator, VerticalAlignment.Bottom, {
  tolerance: 2,
  toleranceUnit: ToleranceUnit.Percent,
});

Example

// Check that a header is vertically centered within its section container (default options)
await expect(headerLocator).toBeVerticallyAlignedWith(parentLocator, VerticalAlignment.Center);