Skip to content

Commit 81ed862

Browse files
bjowesbjowes
committedNov 3, 2020
first commit
1 parent 36b0f2b commit 81ed862

File tree

9 files changed

+1991
-0
lines changed

9 files changed

+1991
-0
lines changed
 

‎.travis.yml

+21
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,21 @@
1+
language: node_js
2+
os:
3+
- "windows"
4+
node_js:
5+
- "lts/*"
6+
7+
addons:
8+
apt:
9+
packages:
10+
# Ubuntu 16+ does not install this dependency by default, so we need to install it ourselves
11+
- libgconf-2-4
12+
cache:
13+
# Caches $HOME/.npm when npm ci is default script command
14+
# Caches node_modules in all other cases
15+
npm: true
16+
directories:
17+
# we also need to cache folder with Cypress binary
18+
- ~/.cache
19+
- $HOME/AppData/Local/Cypress/Cache
20+
install:
21+
- npm ci

‎cypress.json

+4
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,4 @@
1+
{
2+
"video": false
3+
}
4+

‎cypress/fixtures/example.json

+5
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
{
2+
"name": "Using fixtures to represent data",
3+
"email": "hello@cypress.io",
4+
"body": "Fixtures are a great way to mock data for responses to routes"
5+
}

‎cypress/integration/examples/actions.spec.js

+299
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,299 @@
1+
/// <reference types="cypress" />
2+
3+
context('Actions', () => {
4+
beforeEach(() => {
5+
cy.visit('https://example.cypress.io/commands/actions')
6+
})
7+
8+
// https://on.cypress.io/interacting-with-elements
9+
10+
it('.type() - type into a DOM element', () => {
11+
// https://on.cypress.io/type
12+
cy.get('.action-email')
13+
.type('fake@email.com').should('have.value', 'fake@email.com')
14+
15+
// .type() with special character sequences
16+
.type('{leftarrow}{rightarrow}{uparrow}{downarrow}')
17+
.type('{del}{selectall}{backspace}')
18+
19+
// .type() with key modifiers
20+
.type('{alt}{option}') //these are equivalent
21+
.type('{ctrl}{control}') //these are equivalent
22+
.type('{meta}{command}{cmd}') //these are equivalent
23+
.type('{shift}')
24+
25+
// Delay each keypress by 0.1 sec
26+
.type('slow.typing@email.com', { delay: 100 })
27+
.should('have.value', 'slow.typing@email.com')
28+
29+
cy.get('.action-disabled')
30+
// Ignore error checking prior to type
31+
// like whether the input is visible or disabled
32+
.type('disabled error checking', { force: true })
33+
.should('have.value', 'disabled error checking')
34+
})
35+
36+
it('.focus() - focus on a DOM element', () => {
37+
// https://on.cypress.io/focus
38+
cy.get('.action-focus').focus()
39+
.should('have.class', 'focus')
40+
.prev().should('have.attr', 'style', 'color: orange;')
41+
})
42+
43+
it('.blur() - blur off a DOM element', () => {
44+
// https://on.cypress.io/blur
45+
cy.get('.action-blur').type('About to blur').blur()
46+
.should('have.class', 'error')
47+
.prev().should('have.attr', 'style', 'color: red;')
48+
})
49+
50+
it('.clear() - clears an input or textarea element', () => {
51+
// https://on.cypress.io/clear
52+
cy.get('.action-clear').type('Clear this text')
53+
.should('have.value', 'Clear this text')
54+
.clear()
55+
.should('have.value', '')
56+
})
57+
58+
it('.submit() - submit a form', () => {
59+
// https://on.cypress.io/submit
60+
cy.get('.action-form')
61+
.find('[type="text"]').type('HALFOFF')
62+
63+
cy.get('.action-form').submit()
64+
.next().should('contain', 'Your form has been submitted!')
65+
})
66+
67+
it('.click() - click on a DOM element', () => {
68+
// https://on.cypress.io/click
69+
cy.get('.action-btn').click()
70+
71+
// You can click on 9 specific positions of an element:
72+
// -----------------------------------
73+
// | topLeft top topRight |
74+
// | |
75+
// | |
76+
// | |
77+
// | left center right |
78+
// | |
79+
// | |
80+
// | |
81+
// | bottomLeft bottom bottomRight |
82+
// -----------------------------------
83+
84+
// clicking in the center of the element is the default
85+
cy.get('#action-canvas').click()
86+
87+
cy.get('#action-canvas').click('topLeft')
88+
cy.get('#action-canvas').click('top')
89+
cy.get('#action-canvas').click('topRight')
90+
cy.get('#action-canvas').click('left')
91+
cy.get('#action-canvas').click('right')
92+
cy.get('#action-canvas').click('bottomLeft')
93+
cy.get('#action-canvas').click('bottom')
94+
cy.get('#action-canvas').click('bottomRight')
95+
96+
// .click() accepts an x and y coordinate
97+
// that controls where the click occurs :)
98+
99+
cy.get('#action-canvas')
100+
.click(80, 75) // click 80px on x coord and 75px on y coord
101+
.click(170, 75)
102+
.click(80, 165)
103+
.click(100, 185)
104+
.click(125, 190)
105+
.click(150, 185)
106+
.click(170, 165)
107+
108+
// click multiple elements by passing multiple: true
109+
cy.get('.action-labels>.label').click({ multiple: true })
110+
111+
// Ignore error checking prior to clicking
112+
cy.get('.action-opacity>.btn').click({ force: true })
113+
})
114+
115+
it('.dblclick() - double click on a DOM element', () => {
116+
// https://on.cypress.io/dblclick
117+
118+
// Our app has a listener on 'dblclick' event in our 'scripts.js'
119+
// that hides the div and shows an input on double click
120+
cy.get('.action-div').dblclick().should('not.be.visible')
121+
cy.get('.action-input-hidden').should('be.visible')
122+
})
123+
124+
it('.rightclick() - right click on a DOM element', () => {
125+
// https://on.cypress.io/rightclick
126+
127+
// Our app has a listener on 'contextmenu' event in our 'scripts.js'
128+
// that hides the div and shows an input on right click
129+
cy.get('.rightclick-action-div').rightclick().should('not.be.visible')
130+
cy.get('.rightclick-action-input-hidden').should('be.visible')
131+
})
132+
133+
it('.check() - check a checkbox or radio element', () => {
134+
// https://on.cypress.io/check
135+
136+
// By default, .check() will check all
137+
// matching checkbox or radio elements in succession, one after another
138+
cy.get('.action-checkboxes [type="checkbox"]').not('[disabled]')
139+
.check().should('be.checked')
140+
141+
cy.get('.action-radios [type="radio"]').not('[disabled]')
142+
.check().should('be.checked')
143+
144+
// .check() accepts a value argument
145+
cy.get('.action-radios [type="radio"]')
146+
.check('radio1').should('be.checked')
147+
148+
// .check() accepts an array of values
149+
cy.get('.action-multiple-checkboxes [type="checkbox"]')
150+
.check(['checkbox1', 'checkbox2']).should('be.checked')
151+
152+
// Ignore error checking prior to checking
153+
cy.get('.action-checkboxes [disabled]')
154+
.check({ force: true }).should('be.checked')
155+
156+
cy.get('.action-radios [type="radio"]')
157+
.check('radio3', { force: true }).should('be.checked')
158+
})
159+
160+
it('.uncheck() - uncheck a checkbox element', () => {
161+
// https://on.cypress.io/uncheck
162+
163+
// By default, .uncheck() will uncheck all matching
164+
// checkbox elements in succession, one after another
165+
cy.get('.action-check [type="checkbox"]')
166+
.not('[disabled]')
167+
.uncheck().should('not.be.checked')
168+
169+
// .uncheck() accepts a value argument
170+
cy.get('.action-check [type="checkbox"]')
171+
.check('checkbox1')
172+
.uncheck('checkbox1').should('not.be.checked')
173+
174+
// .uncheck() accepts an array of values
175+
cy.get('.action-check [type="checkbox"]')
176+
.check(['checkbox1', 'checkbox3'])
177+
.uncheck(['checkbox1', 'checkbox3']).should('not.be.checked')
178+
179+
// Ignore error checking prior to unchecking
180+
cy.get('.action-check [disabled]')
181+
.uncheck({ force: true }).should('not.be.checked')
182+
})
183+
184+
it('.select() - select an option in a <select> element', () => {
185+
// https://on.cypress.io/select
186+
187+
// at first, no option should be selected
188+
cy.get('.action-select')
189+
.should('have.value', '--Select a fruit--')
190+
191+
// Select option(s) with matching text content
192+
cy.get('.action-select').select('apples')
193+
// confirm the apples were selected
194+
// note that each value starts with "fr-" in our HTML
195+
cy.get('.action-select').should('have.value', 'fr-apples')
196+
197+
cy.get('.action-select-multiple')
198+
.select(['apples', 'oranges', 'bananas'])
199+
// when getting multiple values, invoke "val" method first
200+
.invoke('val')
201+
.should('deep.equal', ['fr-apples', 'fr-oranges', 'fr-bananas'])
202+
203+
// Select option(s) with matching value
204+
cy.get('.action-select').select('fr-bananas')
205+
// can attach an assertion right away to the element
206+
.should('have.value', 'fr-bananas')
207+
208+
cy.get('.action-select-multiple')
209+
.select(['fr-apples', 'fr-oranges', 'fr-bananas'])
210+
.invoke('val')
211+
.should('deep.equal', ['fr-apples', 'fr-oranges', 'fr-bananas'])
212+
213+
// assert the selected values include oranges
214+
cy.get('.action-select-multiple')
215+
.invoke('val').should('include', 'fr-oranges')
216+
})
217+
218+
it('.scrollIntoView() - scroll an element into view', () => {
219+
// https://on.cypress.io/scrollintoview
220+
221+
// normally all of these buttons are hidden,
222+
// because they're not within
223+
// the viewable area of their parent
224+
// (we need to scroll to see them)
225+
cy.get('#scroll-horizontal button')
226+
.should('not.be.visible')
227+
228+
// scroll the button into view, as if the user had scrolled
229+
cy.get('#scroll-horizontal button').scrollIntoView()
230+
.should('be.visible')
231+
232+
cy.get('#scroll-vertical button')
233+
.should('not.be.visible')
234+
235+
// Cypress handles the scroll direction needed
236+
cy.get('#scroll-vertical button').scrollIntoView()
237+
.should('be.visible')
238+
239+
cy.get('#scroll-both button')
240+
.should('not.be.visible')
241+
242+
// Cypress knows to scroll to the right and down
243+
cy.get('#scroll-both button').scrollIntoView()
244+
.should('be.visible')
245+
})
246+
247+
it('.trigger() - trigger an event on a DOM element', () => {
248+
// https://on.cypress.io/trigger
249+
250+
// To interact with a range input (slider)
251+
// we need to set its value & trigger the
252+
// event to signal it changed
253+
254+
// Here, we invoke jQuery's val() method to set
255+
// the value and trigger the 'change' event
256+
cy.get('.trigger-input-range')
257+
.invoke('val', 25)
258+
.trigger('change')
259+
.get('input[type=range]').siblings('p')
260+
.should('have.text', '25')
261+
})
262+
263+
it('cy.scrollTo() - scroll the window or element to a position', () => {
264+
// https://on.cypress.io/scrollTo
265+
266+
// You can scroll to 9 specific positions of an element:
267+
// -----------------------------------
268+
// | topLeft top topRight |
269+
// | |
270+
// | |
271+
// | |
272+
// | left center right |
273+
// | |
274+
// | |
275+
// | |
276+
// | bottomLeft bottom bottomRight |
277+
// -----------------------------------
278+
279+
// if you chain .scrollTo() off of cy, we will
280+
// scroll the entire window
281+
cy.scrollTo('bottom')
282+
283+
cy.get('#scrollable-horizontal').scrollTo('right')
284+
285+
// or you can scroll to a specific coordinate:
286+
// (x axis, y axis) in pixels
287+
cy.get('#scrollable-vertical').scrollTo(250, 250)
288+
289+
// or you can scroll to a specific percentage
290+
// of the (width, height) of the element
291+
cy.get('#scrollable-both').scrollTo('75%', '25%')
292+
293+
// control the easing of the scroll (default is 'swing')
294+
cy.get('#scrollable-vertical').scrollTo('center', { easing: 'linear' })
295+
296+
// control the duration of the scroll (in ms)
297+
cy.get('#scrollable-both').scrollTo('center', { duration: 2000 })
298+
})
299+
})

‎cypress/plugins/index.js

+21
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,21 @@
1+
/// <reference types="cypress" />
2+
// ***********************************************************
3+
// This example plugins/index.js can be used to load plugins
4+
//
5+
// You can change the location of this file or turn off loading
6+
// the plugins file with the 'pluginsFile' configuration option.
7+
//
8+
// You can read more here:
9+
// https://on.cypress.io/plugins-guide
10+
// ***********************************************************
11+
12+
// This function is called when a project is opened or re-opened (e.g. due to
13+
// the project's config changing)
14+
15+
/**
16+
* @type {Cypress.PluginConfig}
17+
*/
18+
module.exports = (on, config) => {
19+
// `on` is used to hook into various events Cypress emits
20+
// `config` is the resolved Cypress config
21+
}

‎cypress/support/commands.js

+25
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,25 @@
1+
// ***********************************************
2+
// This example commands.js shows you how to
3+
// create various custom commands and overwrite
4+
// existing commands.
5+
//
6+
// For more comprehensive examples of custom
7+
// commands please read more here:
8+
// https://on.cypress.io/custom-commands
9+
// ***********************************************
10+
//
11+
//
12+
// -- This is a parent command --
13+
// Cypress.Commands.add("login", (email, password) => { ... })
14+
//
15+
//
16+
// -- This is a child command --
17+
// Cypress.Commands.add("drag", { prevSubject: 'element'}, (subject, options) => { ... })
18+
//
19+
//
20+
// -- This is a dual command --
21+
// Cypress.Commands.add("dismiss", { prevSubject: 'optional'}, (subject, options) => { ... })
22+
//
23+
//
24+
// -- This will overwrite an existing command --
25+
// Cypress.Commands.overwrite("visit", (originalFn, url, options) => { ... })

‎cypress/support/index.js

+20
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,20 @@
1+
// ***********************************************************
2+
// This example support/index.js is processed and
3+
// loaded automatically before your test files.
4+
//
5+
// This is a great place to put global configuration and
6+
// behavior that modifies Cypress.
7+
//
8+
// You can change the location of this file or turn off
9+
// automatically serving support files with the
10+
// 'supportFile' configuration option.
11+
//
12+
// You can read more here:
13+
// https://on.cypress.io/configuration
14+
// ***********************************************************
15+
16+
// Import commands.js using ES2015 syntax:
17+
import './commands'
18+
19+
// Alternatively you can use CommonJS syntax:
20+
// require('./commands')

‎package-lock.json

+1,573
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎package.json

+23
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,23 @@
1+
{
2+
"name": "cypress-4625-repro",
3+
"version": "1.0.0",
4+
"description": "This is a repro for issue #4625 for cypress",
5+
"main": "index.js",
6+
"scripts": {
7+
"test": "npx cypress run",
8+
"test-that-works": "npm i cypress && npx cypress run"
9+
},
10+
"repository": {
11+
"type": "git",
12+
"url": "git+https://github.com/bjowes/cypress-4625-repro.git"
13+
},
14+
"author": "Björn Weström",
15+
"license": "MIT",
16+
"bugs": {
17+
"url": "https://github.com/bjowes/cypress-4625-repro/issues"
18+
},
19+
"homepage": "https://github.com/bjowes/cypress-4625-repro#readme",
20+
"dependencies": {
21+
"cypress": "^5.5.0"
22+
}
23+
}

0 commit comments

Comments
 (0)
Please sign in to comment.