Function toBeHorizontallyAlignedWith

toBeHorizontallyAlignedWith(
    element: Locator,
    container: Locator,
    alignment: HorizontalAlignment,
    options?: Tolerance,
): Promise<MatcherReturnType>

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

Left alignment (alignment = HorizontalAlignment.Left):

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

Center alignment (alignment = HorizontalAlignment.Center):

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

Right alignment (alignment = HorizontalAlignment.Right):

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

Parameters

element: Locator
The element as a Locator to check for horizontal alignment.
container: Locator
The container element as a Locator relative to which horizontal alignment is checked.
alignment: HorizontalAlignment
The type of horizontal alignment to check (left, center, or right).
options: Tolerance = {}
Optional alignment options.

Returns Promise<MatcherReturnType>

A Promise that resolves with the matcher result.

Example

// Assert that a button is left-aligned with its card container, allowing 3% horizontal tolerance
await expect(buttonLocator).toBeHorizontallyAlignedWith(parentLocator, HorizontalAlignment.Left, {
  tolerance: 3, toleranceUnit: ToleranceUnit.Percent
});

Example

// Assert that a button is horizontally centered with its card container (default options)
await expect(buttonLocator).toBeHorizontallyAlignedWith(parentLocator, HorizontalAlignment.Center);