https://github.com/abramenal/cypress-shadow-dom

Extend Cypress commands with shadow DOM support
https://github.com/abramenal/cypress-shadow-dom

cypress cypress-io cypress-plugin cypress-shadow-dom cypressio cypressjs shadow-dom

Last synced: 3 months ago
JSON representation

Extend Cypress commands with shadow DOM support

Host: GitHub
URL: https://github.com/abramenal/cypress-shadow-dom
Owner: abramenal
License: mit
Created: 2019-05-24T13:40:44.000Z (almost 6 years ago)
Default Branch: master
Last Pushed: 2021-01-17T19:12:20.000Z (over 4 years ago)
Last Synced: 2024-12-29T19:08:02.993Z (4 months ago)
Topics: cypress, cypress-io, cypress-plugin, cypress-shadow-dom, cypressio, cypressjs, shadow-dom
Language: JavaScript
Homepage: https://npm.im/cypress-shadow-dom
Size: 180 KB
Stars: 49
Watchers: 5
Forks: 8
Open Issues: 8
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- Contributing: CONTRIBUTING.md
- Funding: .github/FUNDING.yml
- License: LICENSE

Awesome Lists containing this project

README

        # (deprecated) cypress-shadow-dom

[![GitHub license](https://img.shields.io/badge/license-MIT-blue.svg)](https://github.com/abramenal/cypress-shadow-dom/blob/master/LICENSE) [![npm version](https://img.shields.io/npm/v/cypress-shadow-dom.svg?style=flat&color=important)](https://www.npmjs.com/package/cypress-shadow-dom) [![All Contributors](https://img.shields.io/badge/all_contributors-3-orange.svg?style=flat-square)](#contributors)

Extend Cypress commands with shadow DOM support

This package adds a custom [Cypress][cypress] command that allows you to make an abstraction on how exactly you upload files through you HTML controls and focus on testing the functionality.

Project reached its dead end because of [recent feature introduced by @43081j](https://github.com/cypress-io/cypress/pull/7469)

(and reference issue [cypress/issues/144](https://github.com/cypress-io/cypress/issues/144)).

Please consider using this experimental built-in feature as well as submitting issues and code contributions there.

Warmest thanks for all the contributors that helped this project evolve!

## Table of Contents

- [Installation](#installation)

- [Usage](#usage)

- [API](#api)

  - [shadowGet](#shadowGet)

  - [shadowFind](#shadowFind)

  - [shadowEq](#shadowEq)

  - [shadowFirst](#shadowFirst)

  - [shadowLast](#shadowLast)

  - [shadowContains](#shadowContains)

  - [shadowTrigger](#shadowTrigger)

  - [shadowClick](#shadowTrigger)

  - [shadowType](#shadowType)

- [Contributors](#contributors)

- [License](#license)

## Installation

The package is distributed via [npm][npm] should be installed as one of your project's `devDependencies`:

```bash

npm install --save-dev cypress-shadow-dom

```

## Usage

`cypress-shadow-dom` extends Cypress' `cy` command.

Add this line to your project's `cypress/support/commands.js`:

```javascript

import 'cypress-shadow-dom';

```

Here is a basic example:

```javascript

cy.shadowGet('todo-list')

  .shadowFind('todo-list-item')

  .its('length')

  .should('eq', 4);

```

See more usage guidelines in [example](./example). It also contains all the available commands in their natural use case.

## API

Here's a set of available commands:

### shadowGet

Querying shadow DOM elements is made with:

```javascript

cy.shadowGet(selector, options);

```

- `{String} selector` – a single selector which usually represents root shadow DOM elements you want to start with

- `{Object?} options` – (optional) contains following properties:

  - `{Number?} timeout` – (optional) time, in milliseconds, to wait until most DOM based commands are considered timed out (defaults to 4000)

This command returns `shadowSubject` that is a valid subject to execute any command below.

### shadowFind

Additional querying within found shadow DOM elements:

```javascript

shadowSubject.shadowFind(selector, options);

```

- `{String} selector` – a single selector which helps to get nested shadow DOM element under the root element

- `{Object?} options` – (optional) contains following properties:

  - `{Number?} timeout` – (optional) time, in milliseconds, to wait until most DOM based commands are considered timed out (defaults to 4000)

Example:

```javascript

cy.shadowGet('todo-list').shadowFind('todo-form');

```

This command returns `shadowSubject` that is a valid subject to execute any command below.

In order to set a custom timeout for dynamically loaded elements that appear later than 4 seconds after render, use custom timeout:

```javascript

cy.shadowGet('todo-list').shadowFind('todo-form', { timeout: 8500 });

```

### shadowEq

To take the nth element from found shadow DOM collection:

```javascript

shadowSubject.shadowEq(index, options);

```

- `{Number} index` – a positive or negative number within given collection range

- `{Object?} options` – (optional) contains following properties:

  - `{Number?} timeout` – (optional) time, in milliseconds, to wait until most DOM based commands are considered timed out (defaults to 4000)

### shadowFirst

To take the first element from found shadow DOM collection:

```javascript

shadowSubject.shadowFirst(options);

```

- `{Object?} options` – (optional) contains following properties:

  - `{Number?} timeout` – (optional) time, in milliseconds, to wait until most DOM based commands are considered timed out (defaults to 4000)

So, simply:

```javascript

cy.shadowGet('todo-list')

  .shadowFind('todo-form')

  .shadowFirst();

```

### shadowLast

To take the last element from found shadow DOM collection:

```javascript

shadowSubject.shadowLast(options);

```

- `{Object?} options` – (optional) contains following properties:

  - `{Number?} timeout` – (optional) time, in milliseconds, to wait until most DOM based commands are considered timed out (defaults to 4000)

### shadowContains

To validate some element's text content:

```javascript

shadowSubject.shadowContains(content, options);

```

- `{String} content` – a string containing any text for lookup

- `{Object?} options` – (optional) contains following properties:

  - `{Number?} timeout` – (optional) time, in milliseconds, to wait until most DOM based commands are considered timed out (defaults to 4000)

### shadowTrigger

To trigger any event:

```javascript

shadowSubject.shadowTrigger(eventName, options);

```

- `{String} eventName` – a string containing any text for lookup

- `{Object?} options` – (optional) contains following properties:

  - `{Boolean?} force`

  - `{Boolean?} bubbles`

  - `{Boolean?} cancelable`

  - `{Boolean?} composed`

### shadowClick

A shorthand to trigger a click event:

```javascript

shadowSubject.shadowClick(options);

```

- `{Object?} options` – (optional) contains following properties:

  - `{Boolean?} force`

  - `{Boolean?} bubbles`

  - `{Boolean?} cancelable`

  - `{Boolean?} composed`

### shadowType

Types some text content inside given shadow DOM input control:

```javascript

shadowSubject.shadowType(content, options);

```

- `{String} content` – a string containing any text

- `{Object?} options` – (optional) contains following properties:

  - `{Number?} delay` – (optional) time, in milliseconds, between adding each letter/char (defaults to 10)

## Contributors

Thanks goes to these wonderful people ([emoji key](https://allcontributors.org/docs/en/emoji-key)):

  

    
_tst
🐛

    
_{Joshua de Lange}
🐛

    
_{Lucas Schnüriger}
💻

    
_{Milan Andric}
📖 🤔

    
_{Ryan Wheale}
🤔 💻

  

This project follows the [all-contributors](https://github.com/all-contributors/all-contributors) specification. Contributions of any kind welcome!

## License

[MIT][mit]

[cypress]: https://cypress.io/

[npm]: https://www.npmjs.com/

[mit]: https://opensource.org/licenses/MIT

ecosyste.ms

Data

Tools

Indexes

Applications

Experiments

Awesome

https://github.com/abramenal/cypress-shadow-dom

Awesome Lists containing this project

README