Cypress scrollBehavior supports per-axis alignment
Introduced 2026-08-04 · score 0.95
HOW TO USE IT
When an action must place an element predictably in independently positioned horizontal and vertical content, set `scrollBehavior` to an object with the desired `block` and `inline` alignments. For example, use `{ block: 'start', inline: 'nearest' }` to align the vertical axis to the start and the horizontal axis to the nearest position.
const { defineConfig } = require('cypress')
module.exports = defineConfig({
scrollBehavior: { block: 'start', inline: 'nearest' },
})WHY THIS HELPS
Configure an element’s alignment before a Cypress action when editing or testing a page with independently positioned horizontal and vertical content.
REQUIREMENTS AND LIMITATIONS
- Version: 15.20.0
- scrollBehavior: Configuration option for the viewport position before action commands; accepts a single alignment, an object with axis alignments, or `false`.
- scrollBehavior.block: Vertical axis alignment; allowed values: `'start'`, `'end'`, `'center'`, `'nearest'`.
- scrollBehavior.inline: Horizontal axis alignment; allowed values: `'start'`, `'end'`, `'center'`, `'nearest'`. `block` and `inline` independently control their axes; neither is documented as mutually exclusive with the other.
- scrollBehavior` (single alignment): A single value applies to both axes; `'start'` and `'end'` are supported, along with `'top'`, `'bottom'`, `'center'`, and `'nearest'`.
- The per-axis form accepts the same values as native `scrollIntoView`: `'start'`, `'end'`, `'center'`, and `'nearest'`.
- A single value accepts the new `'start'` and `'end'` alignments.
FIRST-PARTY EVIDENCE
- https://docs.cypress.io/app/references/changelog#15-20-0
- https://docs.cypress.io/app/core-concepts/interacting-with-elements
- https://docs.cypress.io/app/references/configuration
Check the installed version and the source before using it. Entry JSON