🎁 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