Skip to content

msmps/cypress-layout-inspector

master
Switch branches/tags
Code

Latest commit

 

Git stats

Files

Permalink
Failed to load latest commit information.
Type
Name
Latest commit message
Commit time
 
 
 
 
 
 
 
 
 
 
src
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

cypress-layout-inspector

detective

Build Status Downloads per month version Semantic Release

Watch on GitHub Star on GitHub Tweet

Table of Contents

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/commands.js:

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

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

To show some examples (from cypress/integration/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!

About

Simple utility to provide layout testing functionality to Cypress

Resources

License

Stars

Watchers

Forks

Packages

No packages published

Contributors 4

  •  
  •  
  •  
  •