Function toBeRightOf

toBeRightOf(
    element: Locator,
    reference: Locator,
    options?: Tolerance,
): Promise<MatcherReturnType>

Asserts that an element is positioned to the right of another element.

The element passes if its left edge is at or to the right of the right edge of the reference, within the specified tolerance.

Strictly to the right:

┌───────────────┐         ┌───────────────┐
│   reference   │         │    element    │
└───────────────┘         └───────────────┘
        |                         |
        ←─────────────────────────→

Touching:

┌───────────────┐┌───────────────┐
│   reference   ││    element    │
└───────────────┘└───────────────┘

Parameters

element: Locator
The element as a Locator that should be to the right.
reference: Locator
The element as a Locator that should be to the left.
options: Tolerance = {}
Optional alignment options.

Returns Promise<MatcherReturnType>

A Promise that resolves with the matcher result.

Example

// Element is strictly to the right of reference (no overlap, no tolerance)
await expect(content).toBeRightOf(sidebar);

Example

// Element can overlap reference by up to 10px
await expect(text).toBeRightOf(icon, { tolerance: 10, toleranceUnit: ToleranceUnit.Pixels });

Example

// Element can overlap reference by up to 5% of reference width
await expect(input).toBeRightOf(label, {
  tolerance: 5,
  toleranceUnit: ToleranceUnit.Percent
});