cypress-element v0.2.0

🎁 cypress-element

Composition api for cypress

cypress-element – Simple, Composable, Customisable, Reusable, Friendly for developer library written on TypeScript for writing tests on Cypress

Main concept

• ✨Simple: Everything is an element
• 🌳Composable: element can be organized by composition of elements hierarchy
• 🛠Customisable: You can create own elements
• ⏳Reusable: You can save elements hierarchy
• ✌Friendly: TypeScript first, autocomplete, auto type

Installing

npm i -D cypress-element
# or
yarn add -D cypress-element

Usage

Then, in your test, you can write

import { el } from "cypress-element";
// or
// import el from 'cypress-element';

// ...

const page = el("div", {
  button: el("button"),
});

it("test", () => {
  page.visit("/test.html");
  page.button.click();
});

Additional information

Read more in documentation;

Motivation

Today real app usually work on one of frameworks: React, Vue, Agular. All popular frontend framework base on two concepts: composition structures and idea of everything is a component. We can use same ideas in tests for real app, and take benefits of this.

Examples

You found examples of usage in test folder