Function toBeLeftOf

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

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

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

Strictly to the left:

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

Touching:

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

Parameters

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

Returns Promise<MatcherReturnType>

A Promise that resolves with the matcher result.

Example

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

Example

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

Example

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