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):

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