npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

@shellygo/cypress-test-utils

v4.1.10

Published

Cypress Test Automation Utilities

Downloads

1,312

Readme

cypress-test-utils

cypress-test-utils NPM MIT typescript Known Vulnerabilities

Cypress helpers to control your UI components that work in all test levels. From component tests, through integration tests to e2e tests, for all frameworks: angular, lit, react. Making TDD fun in the modular UI area.

CypressHelper makes it saner to write UI testing. It enables creating component drivers that will work on all testing levels (component, integration, e2e).

Installation

This library provides an API to interact with UI elements - CypressHelper that combines the common features. To add it to your repo use

npm i -D @shellygo/cypress-test-utils cypress

or

yarn add -D @shellygo/cypress-test-utils cypress

Concept

Cypress Helpers can help you develop tests faster CypressHelper is designed to be used in any test level, and holds common methods used in Cypress tests image

CypressComponent helpers are designed to be used in component tests and are NOT framework agnostic, their sole purpose is to mount components into the browser.

Component Drivers

Testing UI is hard. There are many reasons for that, but a big one relies in the fact that unlike functions or services, where the API is clearly defined, when dealing with graphical user interfaces, it's up for the developer to transform it into an "API" for testing purposes. Back in the days, PageObjects helped mitigate this fact, but once the world moved to modular components, our test code quality degraded and became bloated with repetition and lack of abstraction.
Component drivers are just like page objects, but for your components. Just like page objects, this is merely a pattern, and is not coupled to a specific implementation. However, using CypressHelper as the basis for your component drivers will help you leverage years of trial and error and be able to fully re-use your drivers across testing levels. This allows you to confidently write tests that use your actual implementation and keep focusing on the "what" and not the "how"

image

Component Drivers can be used as building blocks for integration and E2E test driver, using Driver Composition image

Philosophy

CypressHelper aims to provide a framework agnostic (angular, lit, react) API for what a manual tester can do. This means that the API will not focus on implementation, but on the actual action a user would take. For example, a user doesn't mouseUp, he/she hovers.

Documentation

Examples

In the examples repo you can find 3 small apps; an angular app, a lit app and a react app. Each app contains a driver that uses helpers, component tests, integration tests and e2e tests. As you can see, all test levels use the same driver, meaning that if the feature's implementation changes, you'll need to change the driver alone, not the tests.

Framework Spesific Information

Using Shadow DOM

When using elements with shadow dom, some things may not be where you expect them, fo example the text of this button is not directly inside the slot containing it. image CypressHelper will look for the assignedNode to retrieve the text, given that the selector of the slot has a '-slot' suffix. You may change this behaviour by overriding the default values when creating CypressHelper.

Angular

When mounting an angular component, autoSpyOutputs is set to true, meaning all event emitters are automatically spied on and may be accessed during a test using helper.get.spy("<EventEmitterName>")

Developing

  1. Set up the repo - yarn
  2. Build the project - npm run build
  3. Running tests - npm run cy:run