Skip to content

Commit d69d641

Browse files
austintackaberryaustintackaberry
committed
Install and open cypress
1 parent d8d7bf8 commit d69d641

26 files changed

+2630
-4
lines changed

‎cypress.json

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
{}

‎cypress/fixtures/example.json

Lines changed: 5 additions & 0 deletions
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

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

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

Lines changed: 46 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,46 @@
1+
/// <reference types="Cypress" />
2+
3+
context('Aliasing', () => {
4+
beforeEach(() => {
5+
cy.visit('https://example.cypress.io/commands/aliasing');
6+
});
7+
8+
it('.as() - alias a DOM element for later use', () => {
9+
// https://on.cypress.io/as
10+
11+
// Alias a DOM element for use later
12+
// We don't have to traverse to the element
13+
// later in our code, we reference it with @
14+
15+
cy.get('.as-table')
16+
.find('tbody>tr')
17+
.first()
18+
.find('td')
19+
.first()
20+
.find('button')
21+
.as('firstBtn');
22+
23+
// when we reference the alias, we place an
24+
// @ in front of its name
25+
cy.get('@firstBtn').click();
26+
27+
cy.get('@firstBtn')
28+
.should('have.class', 'btn-success')
29+
.and('contain', 'Changed');
30+
});
31+
32+
it('.as() - alias a route for later use', () => {
33+
// Alias the route to wait for its response
34+
cy.server();
35+
cy.route('GET', 'comments/*').as('getComment');
36+
37+
// we have code that gets a comment when
38+
// the button is clicked in scripts.js
39+
cy.get('.network-btn').click();
40+
41+
// https://on.cypress.io/wait
42+
cy.wait('@getComment')
43+
.its('status')
44+
.should('eq', 200);
45+
});
46+
});

0 commit comments

Comments
 (0)