{"id":18739814,"url":"https://github.com/shellydcms/cypress-test-utils","last_synced_at":"2025-10-08T07:42:15.560Z","repository":{"id":177208084,"uuid":"660071383","full_name":"ShellyDCMS/cypress-test-utils","owner":"ShellyDCMS","description":"Cypress test utilities","archived":false,"fork":false,"pushed_at":"2025-04-12T03:41:57.000Z","size":3481,"stargazers_count":2,"open_issues_count":0,"forks_count":1,"subscribers_count":2,"default_branch":"main","last_synced_at":"2025-04-12T20:03:17.982Z","etag":null,"topics":["cypress","framework-agnostic","hacktoberfest","testing","typescript","utilities"],"latest_commit_sha":null,"homepage":"","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/ShellyDCMS.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2023-06-29T07:22:04.000Z","updated_at":"2025-04-11T02:48:37.000Z","dependencies_parsed_at":null,"dependency_job_id":"b5819f6e-6b85-472a-b0a4-1c7893847946","html_url":"https://github.com/ShellyDCMS/cypress-test-utils","commit_stats":null,"previous_names":["shellydcms/dell-cypress-test-utils","shellydcms/cypress-test-utils"],"tags_count":5,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ShellyDCMS%2Fcypress-test-utils","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ShellyDCMS%2Fcypress-test-utils/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ShellyDCMS%2Fcypress-test-utils/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ShellyDCMS%2Fcypress-test-utils/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/ShellyDCMS","download_url":"https://codeload.github.com/ShellyDCMS/cypress-test-utils/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248625493,"owners_count":21135513,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["cypress","framework-agnostic","hacktoberfest","testing","typescript","utilities"],"created_at":"2024-11-07T15:37:31.445Z","updated_at":"2025-10-08T07:42:10.540Z","avatar_url":"https://github.com/ShellyDCMS.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# cypress-test-utils\n\n![cypress-test-utils](https://github.com/ShellyDCMS/cypress-test-utils/actions/workflows/npm-publish.yml/badge.svg)\n[![NPM](https://img.shields.io/npm/v/@shellygo/cypress-test-utils)](https://www.npmjs.com/package/@shellygo/cypress-test-utils)\n[![MIT](https://img.shields.io/badge/License-MIT-yellow.svg)](https://raw.githubusercontent.com/ShellyDCMS/cypress-test-utils/main/LICENSE)\n![typescript](https://img.shields.io/badge/%3C%2F%3E-TypeScript-%230074c1.svg)\n![Known Vulnerabilities](https://snyk.io/test/github/{ShellyDCMS}/{cypress-test-utils}/badge.svg)\n\nCypress 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.\nMaking TDD fun in the modular UI area.\n\nCypressHelper makes it saner to write UI testing. It enables creating component drivers that will work on all testing levels (component, integration, e2e).\n\n## Installation\n\nThis library provides an API to interact with UI elements - `CypressHelper` that combines the common features.\nTo add it to your repo use\n\n`npm i -D @shellygo/cypress-test-utils cypress`\n\nor\n\n`yarn add -D @shellygo/cypress-test-utils cypress`\n\n## Concept\n\nCypress Helpers can help you develop tests faster\nCypressHelper is designed to be used in any test level, and holds common methods used in Cypress tests\n![image](https://github.com/ShellyDCMS/cypress-test-utils/assets/60476837/d9aa07d8-2c05-4968-970a-be8445a113c3)\n\nCypressComponent helpers are designed to be used in component tests and are NOT framework agnostic, their sole purpose is to mount components into the browser.\n\n## Component Drivers\n\nTesting 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,\nwhen dealing with graphical user interfaces, it's up for the developer to transform it into an \"API\" for testing purposes.\nBack in the days, [PageObjects](https://martinfowler.com/bliki/PageObject.html) helped mitigate this fact, but once the world moved to modular components,\nour test code quality degraded and became bloated with repetition and lack of abstraction.  \nComponent drivers are just like page objects, but for your components.\nJust like page objects, this is merely a pattern, and is not coupled to a specific implementation.\nHowever, 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.\nThis allows you to confidently write tests that use your actual implementation and keep focusing on the _\"what\"_ and not the _\"how\"_\n\n![image](https://github.com/ShellyDCMS/cypress-test-utils/assets/60476837/dc972638-e80c-4516-85be-4c3f657fc6ec)\n\nComponent Drivers can be used as building blocks for integration and E2E test driver, using Driver Composition\n![image](https://github.com/ShellyDCMS/cypress-test-utils/assets/60476837/17175620-ad91-4e4a-af63-6d83665de794)\n\n## Philosophy\n\nCypressHelper aims to provide a framework agnostic (angular, lit, react) API for what a manual tester can do.\nThis means that the API will not focus on implementation, but on the actual action a user would take.\nFor example, a user doesn't mouseUp, he/she hovers.\n\n## [Documentation](https://shellydcms.github.io/cypress-test-utils)\n\n## Examples\n\nIn the [examples](https://github.com/ShellyDCMS/cypress-test-utils-examples/tree/main) repo you can find 3 small apps; an angular app, a lit app and a react app.\nEach app contains a driver that uses helpers, component tests, integration tests and e2e tests.\nAs 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.\n\n## Framework Spesific Information\n\n### Using Shadow DOM\n\nWhen using \u003cslot\u003e 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.\n![image](https://github.com/ShellyDCMS/cypress-test-utils/assets/60476837/c14b0877-4c9a-4f37-ba18-0220b9192b0f)\nCypressHelper will look for the assignedNode to retrieve the text, given that the selector of the slot has a '-slot' suffix.\nYou may change this behaviour by overriding the default values when creating CypressHelper.\n\n### Angular\n\nWhen 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(\"\u003cEventEmitterName\u003e\")`\n\n## Developing\n\n1. Set up the repo - `yarn`\n2. Build the project - `npm run build`\n3. Running tests - `npm run cy:run`\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fshellydcms%2Fcypress-test-utils","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fshellydcms%2Fcypress-test-utils","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fshellydcms%2Fcypress-test-utils/lists"}