Skip to content

Commit da29676

Browse files
authored
add README to testing-dom examples (#259)
* WIP: add README to testing-dom examples * add README to testing-dom__drag-drop * add readme to testing-dom__form-interactions * add readme to testing-dom__hover-hidden-elements * add readme to testing-dom__tab-handling-links
1 parent e897efd commit da29676

File tree

11 files changed

+70
-7
lines changed

11 files changed

+70
-7
lines changed
Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,10 @@
1+
# drag-n-drop
2+
3+
> Performing Drag & Drop by triggering mouse and drag events
4+
5+
See test file [cypress/integration/drag_n_drop_spec.js](cypress/integration/drag_n_drop_spec.js) that shows how to simulate drag & drop behavior using
6+
7+
- mouse events
8+
- drag events
9+
10+
In both cases, the tests use [`cy.trigger`](https://on.cypress.io/trigger) command.
Lines changed: 17 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,17 @@
1+
// ***********************************************************
2+
// This example plugins/index.js can be used to load plugins
3+
//
4+
// You can change the location of this file or turn off loading
5+
// the plugins file with the 'pluginsFile' configuration option.
6+
//
7+
// You can read more here:
8+
// https://on.cypress.io/plugins-guide
9+
// ***********************************************************
10+
11+
// This function is called when a project is opened or re-opened (e.g. due to
12+
// the project's config changing)
13+
14+
module.exports = (on, config) => {
15+
// `on` is used to hook into various events Cypress emits
16+
// `config` is the resolved Cypress config
17+
}
Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,11 @@
11
{
22
"name": "drag-n-drop",
33
"version": "1.0.0",
4-
"description": "",
4+
"description": "Performing Drag & Drop by triggering mouse and drag events",
55
"scripts": {
66
"cypress:run": "../../node_modules/.bin/cypress run",
77
"cypress:open": "../../node_modules/.bin/cypress open",
8-
"start": "node server.js --port 7071"
8+
"start": "node server.js --port 7071",
9+
"dev": "../../node_modules/.bin/start-test http://localhost:7071/puzzle.html cypress:open"
910
}
1011
}
Lines changed: 12 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,12 @@
1+
# form-interactions
2+
3+
> Shows how to change the value of a range input
4+
5+
The test triggers `change` event on an `<input name="range-input" type="range" value="0" />` form element and asserts the value does get changed.
6+
7+
![range input](images/range-input.png)
8+
9+
## See
10+
11+
- [cypress/integration/form-interactions-spec.js](cypress/integration/form-interactions-spec.js)
12+
- [`cy.trigger`](https://on.cypress.io/trigger)
Loading
Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,11 @@
11
{
22
"name": "form-interactions",
33
"version": "1.0.0",
4-
"description": "",
4+
"description": "Shows how to change the value of a range input",
55
"scripts": {
66
"cypress:run": "../../node_modules/.bin/cypress run",
77
"cypress:open": "../../node_modules/.bin/cypress open",
8-
"start": "node server.js --port 7072"
8+
"start": "node server.js --port 7072",
9+
"dev": "../../node_modules/.bin/start-test 7072 cypress:open"
910
}
1011
}
Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,10 @@
1+
# hover-hidden-elements
2+
> Interact with elements that are hidden by CSS
3+
4+
5+
See [cypress/integration/hover-hidden-elements-spec.js](cypress/integration/hover-hidden-elements-spec.js) to find how to get the lack if `.hover()` command.
6+
7+
- Use [`.invoke()`](https://on.cypress.io/invoke) and [`.trigger()`](https://on.cypress.io/trigger) to simulate hovering.
8+
- Trigger `mouseover`, `mouseout`, `mouseenter`, `mouseleave` events.
9+
10+
![Test runner](images/hidden.png)
Loading
Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,13 +1,14 @@
11
{
22
"name": "hover-hidden-elements",
33
"version": "1.0.0",
4-
"description": "",
4+
"description": "Interact with elements that are hidden by CSS",
55
"scripts": {
66
"cypress:run": "../../node_modules/.bin/cypress run",
77
"cypress:run:chrome": "../../node_modules/.bin/cypress run --browser chrome",
88
"cypress:open": "../../node_modules/.bin/cypress open",
99
"start": "node server.js --port 7073",
1010
"test:ci": "../../node_modules/.bin/start-test 7073 cypress:run",
11-
"test:ci:chrome": "../../node_modules/.bin/start-test 7073 cypress:run:chrome"
11+
"test:ci:chrome": "../../node_modules/.bin/start-test 7073 cypress:run:chrome",
12+
"dev": "../../node_modules/.bin/start-test 7073 cypress:open"
1213
}
1314
}
Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,10 @@
1+
# tab-handling-anchor-links
2+
> How to get around lack of multiple tabs in Cypress
3+
4+
Read [Trade-offs - Multiple tabs](http://on.cypress.io/trade-offs#Multiple-tabs), and see [cypress/integration/tab_handling_anchor_links_spec.js](cypress/integration/tab_handling_anchor_links_spec.js) how to:
5+
6+
- Test anchor links opening in new tabs: `<a target="_blank">`.
7+
- Test anchor links that link to external domains: `<a href="...">`.
8+
- Prevent content from opening in a new tab.
9+
- Request external content that would open in a new tab using [`cy.request()`](https://on.cypress.io/request).
10+
- Speed up tests by reducing loading times.

examples/testing-dom__tab-handling-links/package.json

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -5,6 +5,7 @@
55
"scripts": {
66
"cypress:run": "../../node_modules/.bin/cypress run",
77
"cypress:open": "../../node_modules/.bin/cypress open",
8-
"start": "node server.js --port 7078"
8+
"start": "node server.js --port 7078",
9+
"dev": "../../node_modules/.bin/start-test 7078 cypress:open"
910
}
1011
}

0 commit comments

Comments
 (0)