cypress-layout-inspector

---

Table of Contents

• Installation
• Usage
• Configuration
• Assertions
  • Alignment
  • Dimensions
  • Positioning
  • Styling
• Contributors ✨

Installation

This module is distributed via npm which is bundled with node and should be installed as one of your project's devDependencies:

npm install --save-dev cypress-layout-inspector

This has been tested thoroughly with the Cypress.io E2E test runner v4.0.0+

Usage

cypress-layout-inspector extends the chai assertion library.

Add this line to your project's cypress/support/e2e.js:

import "cypress-layout-inspector/add-support";

You can now use all of cypress-layout-inspector's assertions.

To show some examples (from cypress/e2e/position.spec.js):

it("block-2 should be positioned right of block-1", () => {
  cy.get(".block-2").should("be.rightOf", ".block-1", 50);
});

it("block-3 should be positioned left of block-4", () => {
  cy.get(".block-3").should("be.leftOf", ".block-4", 50);
});

Configuration

To configure cypress-layout-inspector, use the following custom command:

cy.configureLayoutInspector(config);

cypress-layout-inspector uses getBoundingClientRect() behind the scenes which returns size equal to an elements (width/height + padding + border-width) in the case that the standard box model is being used, or (width/height) only if box-sizing: border-box has been set on it.

If you would like to use the standard box model but exclude padding in the total you can achieve this by doing the following:

before(() => {
  cy.configureLayoutInspector({
    excludePadding: true,
    threshold: 5,
  });
});

Assertions

Alignment

horizontallyAligned(element[, edge])

argument	type	options	default
element	string	-	-
edge	string	'top', 'bottom', 'centered', 'all'	'all'

verticallyAligned(element[, edge])

argument	type	options	default
element	string	-	-
edge	string	'left', 'right', 'centered', 'all'	'all'

overflowing([, direction])

argument	type	options	default
direction	string	'vertically', 'horizontally', 'any'	'any'

overlapping(element)

argument	type	options	default
element	string	-	-

Dimensions

The following width and height assertions are chain-able and can be used with the .gt, .within and .lt methods

width(measure)

height(measure)

argument	type	options	default
measure	number	-	-

Positioning

The following assertions will check an elements distance is >= 0 if no distance is set

rightOf(element[, distance])

leftOf(element[, distance])

above(element[, distance])

below(element[, distance])

argument	type	options	default
element	string	-	-
distance	number	-	-

inside(element[, distances { top, left, bottom, right }])

argument	type	options	default
element	string	-	-
distances	object	-	-

Styling

style(property, value)

argument	type	options	default
property	string	-	-
value	string	-	-

Contributors ✨

Thanks goes to these wonderful people (emoji key):

Matt Simpson 💻 📖 🤔 ⚠️

Satu 💻 📖 🤔

david-boydell 🤔

This project follows the all-contributors specification. Contributions of any kind welcome!