cypress-dragndrop-kit 1.0.4 → 1.0.5
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +23 -14
- package/package.json +1 -1
package/README.md
CHANGED
|
@@ -3,46 +3,55 @@
|
|
|
3
3
|
A lightweight, Cypress-native plugin that simplifies drag‑and‑drop and movement interactions in end-to-end tests. Perfect for testing sortable lists, draggable elements, and custom UI components.
|
|
4
4
|
|
|
5
5
|
|
|
6
|
+
<br/>
|
|
7
|
+
|
|
8
|
+
|
|
6
9
|
## 🚀 Installation
|
|
7
10
|
|
|
8
11
|
```bash
|
|
9
12
|
npm install --save-dev cypress-dragndrop-kit
|
|
10
13
|
```
|
|
14
|
+
<br/>
|
|
11
15
|
|
|
12
16
|
## 🛠 Usage
|
|
13
17
|
|
|
14
18
|
In order to start using the package, all you need to do is import it within you `./cypress/support/e2e.ts` file:
|
|
15
19
|
|
|
16
20
|
```typescript
|
|
17
|
-
|
|
18
|
-
|
|
21
|
+
// Location: cypress/support/e2e.ts
|
|
22
|
+
import 'cypress-dragndrop-kit';
|
|
19
23
|
```
|
|
24
|
+
<br/>
|
|
20
25
|
|
|
21
26
|
### ✨ Available commands
|
|
22
27
|
|
|
23
28
|
- `dragTo(targetElementLocator)`: Custom child command for dragging and dropping a chained element to a specified element location
|
|
24
29
|
- `dragAndDrop(sourceElementLocator, targetElementLocator)`: Custom command for dragging and dropping from one element location to another
|
|
25
30
|
|
|
31
|
+
<br/>
|
|
32
|
+
|
|
26
33
|
### ⚙️ Examples
|
|
27
34
|
|
|
28
35
|
```typescript
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
36
|
+
// Usage of "dragTo(target)"
|
|
37
|
+
it('should be able to drag and drop an item by using "dragTo()"', () => {
|
|
38
|
+
cy.get('[data-id="3"]').dragTo('[data-id="47"]');
|
|
32
39
|
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
40
|
+
cy.get('[data-id="47"]').should('have.attr', 'data-index', 46);
|
|
41
|
+
cy.get('[data-id="3"]').should('have.attr', 'data-index', 47);
|
|
42
|
+
})
|
|
36
43
|
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
44
|
+
// Usage of "dragAndDrop(source, target)"
|
|
45
|
+
it('should be able to drag and drop an item by using "dragAndDrop()"', () => {
|
|
46
|
+
cy.dragAndDrop('[data-id="47"]', '[data-id="3"]');
|
|
40
47
|
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
48
|
+
cy.get('[data-id="47"]').should('have.attr', 'data-index', 3);
|
|
49
|
+
cy.get('[data-id="3"]').should('have.attr', 'data-index', 4);
|
|
50
|
+
})
|
|
44
51
|
```
|
|
45
52
|
|
|
53
|
+
<br/>
|
|
54
|
+
|
|
46
55
|
## 🤝 Contributing
|
|
47
56
|
|
|
48
57
|
Contributions are welcome! If you have ideas, bugs, or feature requests—feel free to open an issue or submit a pull request.
|