element.
76 | // Once we get that element, we can assert that it has the completed class.
77 | cy.contains('Pay electric bill')
78 | .parents('li')
79 | .should('have.class', 'completed')
80 | })
81 |
82 | context('with a checked task', () => {
83 | beforeEach(() => {
84 | // We'll take the command we used above to check off an element
85 | // Since we want to perform multiple tests that start with checking
86 | // one element, we put it in the beforeEach hook
87 | // so that it runs at the start of every test.
88 | cy.contains('Pay electric bill')
89 | .parent()
90 | .find('input[type=checkbox]')
91 | .check()
92 | })
93 |
94 | it('can filter for uncompleted tasks', () => {
95 | // We'll click on the "active" button in order to
96 | // display only incomplete items
97 | cy.contains('Active').click()
98 |
99 | // After filtering, we can assert that there is only the one
100 | // incomplete item in the list.
101 | cy.get('.todo-list li')
102 | .should('have.length', 1)
103 | .first()
104 | .should('have.text', 'Walk the dog')
105 |
106 | // For good measure, let's also assert that the task we checked off
107 | // does not exist on the page.
108 | cy.contains('Pay electric bill').should('not.exist')
109 | })
110 |
111 | it('can filter for completed tasks', () => {
112 | // We can perform similar steps as the test above to ensure
113 | // that only completed tasks are shown
114 | cy.contains('Completed').click()
115 |
116 | cy.get('.todo-list li')
117 | .should('have.length', 1)
118 | .first()
119 | .should('have.text', 'Pay electric bill')
120 |
121 | cy.contains('Walk the dog').should('not.exist')
122 | })
123 |
124 | it('can delete all completed tasks', () => {
125 | // First, let's click the "Clear completed" button
126 | // `contains` is actually serving two purposes here.
127 | // First, it's ensuring that the button exists within the dom.
128 | // This button only appears when at least one task is checked
129 | // so this command is implicitly verifying that it does exist.
130 | // Second, it selects the button so we can click it.
131 | cy.contains('Clear completed').click()
132 |
133 | // Then we can make sure that there is only one element
134 | // in the list and our element does not exist
135 | cy.get('.todo-list li')
136 | .should('have.length', 1)
137 | .should('not.have.text', 'Pay electric bill')
138 |
139 | // Finally, make sure that the clear button no longer exists.
140 | cy.contains('Clear completed').should('not.exist')
141 | })
142 | })
143 | })
144 |
--------------------------------------------------------------------------------
/cypress/e2e/2-advanced-examples/aliasing.cy.js:
--------------------------------------------------------------------------------
1 | ///
2 |
3 | context('Aliasing', () => {
4 | beforeEach(() => {
5 | cy.visit('http://localhost:8080/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').find('tbody>tr')
16 | .first().find('td').first()
17 | .find('button').as('firstBtn')
18 |
19 | // when we reference the alias, we place an
20 | // @ in front of its name
21 | cy.get('@firstBtn').click()
22 |
23 | cy.get('@firstBtn')
24 | .should('have.class', 'btn-success')
25 | .and('contain', 'Changed')
26 | })
27 |
28 | it('.as() - alias a route for later use', () => {
29 | // Alias the route to wait for its response
30 | cy.intercept('GET', '**/comments/*').as('getComment')
31 |
32 | // we have code that gets a comment when
33 | // the button is clicked in scripts.js
34 | cy.get('.network-btn').click()
35 |
36 | // https://on.cypress.io/wait
37 | cy.wait('@getComment').its('response.statusCode').should('eq', 200)
38 | })
39 | })
40 |
--------------------------------------------------------------------------------
/cypress/e2e/2-advanced-examples/assertions.cy.js:
--------------------------------------------------------------------------------
1 | ///
2 |
3 | context('Assertions', () => {
4 | beforeEach(() => {
5 | cy.visit('http://localhost:8080/commands/assertions')
6 | })
7 |
8 | describe('Implicit Assertions', () => {
9 | it('.should() - make an assertion about the current subject', () => {
10 | // https://on.cypress.io/should
11 | cy.get('.assertion-table')
12 | .find('tbody tr:last')
13 | .should('have.class', 'success')
14 | .find('td')
15 | .first()
16 | // checking the text of the | element in various ways
17 | .should('have.text', 'Column content')
18 | .should('contain', 'Column content')
19 | .should('have.html', 'Column content')
20 | // chai-jquery uses "is()" to check if element matches selector
21 | .should('match', 'td')
22 | // to match text content against a regular expression
23 | // first need to invoke jQuery method text()
24 | // and then match using regular expression
25 | .invoke('text')
26 | .should('match', /column content/i)
27 |
28 | // a better way to check element's text content against a regular expression
29 | // is to use "cy.contains"
30 | // https://on.cypress.io/contains
31 | cy.get('.assertion-table')
32 | .find('tbody tr:last')
33 | // finds first | element with text content matching regular expression
34 | .contains('td', /column content/i)
35 | .should('be.visible')
36 |
37 | // for more information about asserting element's text
38 | // see https://on.cypress.io/using-cypress-faq#How-do-I-get-an-element’s-text-contents
39 | })
40 |
41 | it('.and() - chain multiple assertions together', () => {
42 | // https://on.cypress.io/and
43 | cy.get('.assertions-link')
44 | .should('have.class', 'active')
45 | .and('have.attr', 'href')
46 | .and('include', 'cypress.io')
47 | })
48 | })
49 |
50 | describe('Explicit Assertions', () => {
51 | // https://on.cypress.io/assertions
52 | it('expect - make an assertion about a specified subject', () => {
53 | // We can use Chai's BDD style assertions
54 | expect(true).to.be.true
55 | const o = { foo: 'bar' }
56 |
57 | expect(o).to.equal(o)
58 | expect(o).to.deep.equal({ foo: 'bar' })
59 | // matching text using regular expression
60 | expect('FooBar').to.match(/bar$/i)
61 | })
62 |
63 | it('pass your own callback function to should()', () => {
64 | // Pass a function to should that can have any number
65 | // of explicit assertions within it.
66 | // The ".should(cb)" function will be retried
67 | // automatically until it passes all your explicit assertions or times out.
68 | cy.get('.assertions-p')
69 | .find('p')
70 | .should(($p) => {
71 | // https://on.cypress.io/$
72 | // return an array of texts from all of the p's
73 | const texts = $p.map((i, el) => Cypress.$(el).text())
74 |
75 | // jquery map returns jquery object
76 | // and .get() convert this to simple array
77 | const paragraphs = texts.get()
78 |
79 | // array should have length of 3
80 | expect(paragraphs, 'has 3 paragraphs').to.have.length(3)
81 |
82 | // use second argument to expect(...) to provide clear
83 | // message with each assertion
84 | expect(paragraphs, 'has expected text in each paragraph').to.deep.eq([
85 | 'Some text from first p',
86 | 'More text from second p',
87 | 'And even more text from third p',
88 | ])
89 | })
90 | })
91 |
92 | it('finds element by class name regex', () => {
93 | cy.get('.docs-header')
94 | .find('div')
95 | // .should(cb) callback function will be retried
96 | .should(($div) => {
97 | expect($div).to.have.length(1)
98 |
99 | const className = $div[0].className
100 |
101 | expect(className).to.match(/heading-/)
102 | })
103 | // .then(cb) callback is not retried,
104 | // it either passes or fails
105 | .then(($div) => {
106 | expect($div, 'text content').to.have.text('Introduction')
107 | })
108 | })
109 |
110 | it('can throw any error', () => {
111 | cy.get('.docs-header')
112 | .find('div')
113 | .should(($div) => {
114 | if ($div.length !== 1) {
115 | // you can throw your own errors
116 | throw new Error('Did not find 1 element')
117 | }
118 |
119 | const className = $div[0].className
120 |
121 | if (!className.match(/heading-/)) {
122 | throw new Error(`Could not find class "heading-" in ${className}`)
123 | }
124 | })
125 | })
126 |
127 | it('matches unknown text between two elements', () => {
128 | /**
129 | * Text from the first element.
130 | * @type {string}
131 | */
132 | let text
133 |
134 | /**
135 | * Normalizes passed text,
136 | * useful before comparing text with spaces and different capitalization.
137 | * @param {string} s Text to normalize
138 | */
139 | const normalizeText = (s) => s.replace(/\s/g, '').toLowerCase()
140 |
141 | cy.get('.two-elements')
142 | .find('.first')
143 | .then(($first) => {
144 | // save text from the first element
145 | text = normalizeText($first.text())
146 | })
147 |
148 | cy.get('.two-elements')
149 | .find('.second')
150 | .should(($div) => {
151 | // we can massage text before comparing
152 | const secondText = normalizeText($div.text())
153 |
154 | expect(secondText, 'second text').to.equal(text)
155 | })
156 | })
157 |
158 | it('assert - assert shape of an object', () => {
159 | const person = {
160 | name: 'Joe',
161 | age: 20,
162 | }
163 |
164 | assert.isObject(person, 'value is object')
165 | })
166 |
167 | it('retries the should callback until assertions pass', () => {
168 | cy.get('#random-number')
169 | .should(($div) => {
170 | const n = parseFloat($div.text())
171 |
172 | expect(n).to.be.gte(1).and.be.lte(10)
173 | })
174 | })
175 | })
176 | })
177 |
--------------------------------------------------------------------------------
/cypress/e2e/2-advanced-examples/connectors.cy.js:
--------------------------------------------------------------------------------
1 | ///
2 |
3 | context('Connectors', () => {
4 | beforeEach(() => {
5 | cy.visit('http://localhost:8080/commands/connectors')
6 | })
7 |
8 | it('.each() - iterate over an array of elements', () => {
9 | // https://on.cypress.io/each
10 | cy.get('.connectors-each-ul>li')
11 | .each(($el, index, $list) => {
12 | console.log($el, index, $list)
13 | })
14 | })
15 |
16 | it('.its() - get properties on the current subject', () => {
17 | // https://on.cypress.io/its
18 | cy.get('.connectors-its-ul>li')
19 | // calls the 'length' property yielding that value
20 | .its('length')
21 | .should('be.gt', 2)
22 | })
23 |
24 | it('.invoke() - invoke a function on the current subject', () => {
25 | // our div is hidden in our script.js
26 | // $('.connectors-div').hide()
27 | cy.get('.connectors-div').should('be.hidden')
28 |
29 | // https://on.cypress.io/invoke
30 | // call the jquery method 'show' on the 'div.container'
31 | cy.get('.connectors-div').invoke('show')
32 |
33 | cy.get('.connectors-div').should('be.visible')
34 | })
35 |
36 | it('.spread() - spread an array as individual args to callback function', () => {
37 | // https://on.cypress.io/spread
38 | const arr = ['foo', 'bar', 'baz']
39 |
40 | cy.wrap(arr).spread((foo, bar, baz) => {
41 | expect(foo).to.eq('foo')
42 | expect(bar).to.eq('bar')
43 | expect(baz).to.eq('baz')
44 | })
45 | })
46 |
47 | describe('.then()', () => {
48 | it('invokes a callback function with the current subject', () => {
49 | // https://on.cypress.io/then
50 | cy.get('.connectors-list > li')
51 | .then(($lis) => {
52 | expect($lis, '3 items').to.have.length(3)
53 | expect($lis.eq(0), 'first item').to.contain('Walk the dog')
54 | expect($lis.eq(1), 'second item').to.contain('Feed the cat')
55 | expect($lis.eq(2), 'third item').to.contain('Write JavaScript')
56 | })
57 | })
58 |
59 | it('yields the returned value to the next command', () => {
60 | cy.wrap(1)
61 | .then((num) => {
62 | expect(num).to.equal(1)
63 |
64 | return 2
65 | })
66 | .then((num) => {
67 | expect(num).to.equal(2)
68 | })
69 | })
70 |
71 | it('yields the original subject without return', () => {
72 | cy.wrap(1)
73 | .then((num) => {
74 | expect(num).to.equal(1)
75 | // note that nothing is returned from this callback
76 | })
77 | .then((num) => {
78 | // this callback receives the original unchanged value 1
79 | expect(num).to.equal(1)
80 | })
81 | })
82 |
83 | it('yields the value yielded by the last Cypress command inside', () => {
84 | cy.wrap(1)
85 | .then((num) => {
86 | expect(num).to.equal(1)
87 | // note how we run a Cypress command
88 | // the result yielded by this Cypress command
89 | // will be passed to the second ".then"
90 | cy.wrap(2)
91 | })
92 | .then((num) => {
93 | // this callback receives the value yielded by "cy.wrap(2)"
94 | expect(num).to.equal(2)
95 | })
96 | })
97 | })
98 | })
99 |
--------------------------------------------------------------------------------
/cypress/e2e/2-advanced-examples/cookies.cy.js:
--------------------------------------------------------------------------------
1 | ///
2 |
3 | context('Cookies', () => {
4 | beforeEach(() => {
5 | Cypress.Cookies.debug(true)
6 |
7 | cy.visit('http://localhost:8080/commands/cookies')
8 |
9 | // clear cookies again after visiting to remove
10 | // any 3rd party cookies picked up such as cloudflare
11 | cy.clearCookies()
12 | })
13 |
14 | it('cy.getCookie() - get a browser cookie', () => {
15 | // https://on.cypress.io/getcookie
16 | cy.get('#getCookie .set-a-cookie').click()
17 |
18 | // cy.getCookie() yields a cookie object
19 | cy.getCookie('token').should('have.property', 'value', '123ABC')
20 | })
21 |
22 | it('cy.getCookies() - get browser cookies for the current domain', () => {
23 | // https://on.cypress.io/getcookies
24 | cy.getCookies().should('be.empty')
25 |
26 | cy.get('#getCookies .set-a-cookie').click()
27 |
28 | // cy.getCookies() yields an array of cookies
29 | cy.getCookies().should('have.length', 1).should((cookies) => {
30 | // each cookie has these properties
31 | expect(cookies[0]).to.have.property('name', 'token')
32 | expect(cookies[0]).to.have.property('value', '123ABC')
33 | expect(cookies[0]).to.have.property('httpOnly', false)
34 | expect(cookies[0]).to.have.property('secure', false)
35 | expect(cookies[0]).to.have.property('domain')
36 | expect(cookies[0]).to.have.property('path')
37 | })
38 | })
39 |
40 | it('cy.getAllCookies() - get all browser cookies', () => {
41 | // https://on.cypress.io/getallcookies
42 | cy.getAllCookies().should('be.empty')
43 |
44 | cy.setCookie('key', 'value')
45 | cy.setCookie('key', 'value', { domain: '.example.com' })
46 |
47 | // cy.getAllCookies() yields an array of cookies
48 | cy.getAllCookies().should('have.length', 2).should((cookies) => {
49 | // each cookie has these properties
50 | expect(cookies[0]).to.have.property('name', 'key')
51 | expect(cookies[0]).to.have.property('value', 'value')
52 | expect(cookies[0]).to.have.property('httpOnly', false)
53 | expect(cookies[0]).to.have.property('secure', false)
54 | expect(cookies[0]).to.have.property('domain')
55 | expect(cookies[0]).to.have.property('path')
56 |
57 | expect(cookies[1]).to.have.property('name', 'key')
58 | expect(cookies[1]).to.have.property('value', 'value')
59 | expect(cookies[1]).to.have.property('httpOnly', false)
60 | expect(cookies[1]).to.have.property('secure', false)
61 | expect(cookies[1]).to.have.property('domain', '.example.com')
62 | expect(cookies[1]).to.have.property('path')
63 | })
64 | })
65 |
66 | it('cy.setCookie() - set a browser cookie', () => {
67 | // https://on.cypress.io/setcookie
68 | cy.getCookies().should('be.empty')
69 |
70 | cy.setCookie('foo', 'bar')
71 |
72 | // cy.getCookie() yields a cookie object
73 | cy.getCookie('foo').should('have.property', 'value', 'bar')
74 | })
75 |
76 | it('cy.clearCookie() - clear a browser cookie', () => {
77 | // https://on.cypress.io/clearcookie
78 | cy.getCookie('token').should('be.null')
79 |
80 | cy.get('#clearCookie .set-a-cookie').click()
81 |
82 | cy.getCookie('token').should('have.property', 'value', '123ABC')
83 |
84 | // cy.clearCookies() yields null
85 | cy.clearCookie('token')
86 |
87 | cy.getCookie('token').should('be.null')
88 | })
89 |
90 | it('cy.clearCookies() - clear browser cookies for the current domain', () => {
91 | // https://on.cypress.io/clearcookies
92 | cy.getCookies().should('be.empty')
93 |
94 | cy.get('#clearCookies .set-a-cookie').click()
95 |
96 | cy.getCookies().should('have.length', 1)
97 |
98 | // cy.clearCookies() yields null
99 | cy.clearCookies()
100 |
101 | cy.getCookies().should('be.empty')
102 | })
103 |
104 | it('cy.clearAllCookies() - clear all browser cookies', () => {
105 | // https://on.cypress.io/clearallcookies
106 | cy.getAllCookies().should('be.empty')
107 |
108 | cy.setCookie('key', 'value')
109 | cy.setCookie('key', 'value', { domain: '.example.com' })
110 |
111 | cy.getAllCookies().should('have.length', 2)
112 |
113 | // cy.clearAllCookies() yields null
114 | cy.clearAllCookies()
115 |
116 | cy.getAllCookies().should('be.empty')
117 | })
118 | })
119 |
--------------------------------------------------------------------------------
/cypress/e2e/2-advanced-examples/cypress_api.cy.js:
--------------------------------------------------------------------------------
1 | ///
2 |
3 | context('Cypress APIs', () => {
4 | context('Cypress.Commands', () => {
5 | beforeEach(() => {
6 | cy.visit('http://localhost:8080/cypress-api')
7 | })
8 |
9 | // https://on.cypress.io/custom-commands
10 |
11 | it('.add() - create a custom command', () => {
12 | Cypress.Commands.add('console', {
13 | prevSubject: true,
14 | }, (subject, method) => {
15 | // the previous subject is automatically received
16 | // and the commands arguments are shifted
17 |
18 | // allow us to change the console method used
19 | method = method || 'log'
20 |
21 | // log the subject to the console
22 | console[method]('The subject is', subject)
23 |
24 | // whatever we return becomes the new subject
25 | // we don't want to change the subject so
26 | // we return whatever was passed in
27 | return subject
28 | })
29 |
30 | // eslint-disable-next-line no-unused-vars
31 | cy.get('button').console('info').then(($button) => {
32 | // subject is still $button
33 | })
34 | })
35 | })
36 |
37 | context('Cypress.Cookies', () => {
38 | beforeEach(() => {
39 | cy.visit('http://localhost:8080/cypress-api')
40 | })
41 |
42 | // https://on.cypress.io/cookies
43 | it('.debug() - enable or disable debugging', () => {
44 | Cypress.Cookies.debug(true)
45 |
46 | // Cypress will now log in the console when
47 | // cookies are set or cleared
48 | cy.setCookie('fakeCookie', '123ABC')
49 | cy.clearCookie('fakeCookie')
50 | cy.setCookie('fakeCookie', '123ABC')
51 | cy.clearCookie('fakeCookie')
52 | cy.setCookie('fakeCookie', '123ABC')
53 | })
54 | })
55 |
56 | context('Cypress.arch', () => {
57 | beforeEach(() => {
58 | cy.visit('http://localhost:8080/cypress-api')
59 | })
60 |
61 | it('Get CPU architecture name of underlying OS', () => {
62 | // https://on.cypress.io/arch
63 | expect(Cypress.arch).to.exist
64 | })
65 | })
66 |
67 | context('Cypress.config()', () => {
68 | beforeEach(() => {
69 | cy.visit('http://localhost:8080/cypress-api')
70 | })
71 |
72 | it('Get and set configuration options', () => {
73 | // https://on.cypress.io/config
74 | let myConfig = Cypress.config()
75 |
76 | expect(myConfig).to.have.property('animationDistanceThreshold', 5)
77 | expect(myConfig).to.have.property('baseUrl', null)
78 | expect(myConfig).to.have.property('defaultCommandTimeout', 4000)
79 | expect(myConfig).to.have.property('requestTimeout', 5000)
80 | expect(myConfig).to.have.property('responseTimeout', 30000)
81 | expect(myConfig).to.have.property('viewportHeight', 660)
82 | expect(myConfig).to.have.property('viewportWidth', 1000)
83 | expect(myConfig).to.have.property('pageLoadTimeout', 60000)
84 | expect(myConfig).to.have.property('waitForAnimations', true)
85 |
86 | expect(Cypress.config('pageLoadTimeout')).to.eq(60000)
87 |
88 | // this will change the config for the rest of your tests!
89 | Cypress.config('pageLoadTimeout', 20000)
90 |
91 | expect(Cypress.config('pageLoadTimeout')).to.eq(20000)
92 |
93 | Cypress.config('pageLoadTimeout', 60000)
94 | })
95 | })
96 |
97 | context('Cypress.dom', () => {
98 | beforeEach(() => {
99 | cy.visit('http://localhost:8080/cypress-api')
100 | })
101 |
102 | // https://on.cypress.io/dom
103 | it('.isHidden() - determine if a DOM element is hidden', () => {
104 | let hiddenP = Cypress.$('.dom-p p.hidden').get(0)
105 | let visibleP = Cypress.$('.dom-p p.visible').get(0)
106 |
107 | // our first paragraph has css class 'hidden'
108 | expect(Cypress.dom.isHidden(hiddenP)).to.be.true
109 | expect(Cypress.dom.isHidden(visibleP)).to.be.false
110 | })
111 | })
112 |
113 | context('Cypress.env()', () => {
114 | beforeEach(() => {
115 | cy.visit('http://localhost:8080/cypress-api')
116 | })
117 |
118 | // We can set environment variables for highly dynamic values
119 |
120 | // https://on.cypress.io/environment-variables
121 | it('Get environment variables', () => {
122 | // https://on.cypress.io/env
123 | // set multiple environment variables
124 | Cypress.env({
125 | host: 'veronica.dev.local',
126 | api_server: 'http://localhost:8888/v1/',
127 | })
128 |
129 | // get environment variable
130 | expect(Cypress.env('host')).to.eq('veronica.dev.local')
131 |
132 | // set environment variable
133 | Cypress.env('api_server', 'http://localhost:8888/v2/')
134 | expect(Cypress.env('api_server')).to.eq('http://localhost:8888/v2/')
135 |
136 | // get all environment variable
137 | expect(Cypress.env()).to.have.property('host', 'veronica.dev.local')
138 | expect(Cypress.env()).to.have.property('api_server', 'http://localhost:8888/v2/')
139 | })
140 | })
141 |
142 | context('Cypress.log', () => {
143 | beforeEach(() => {
144 | cy.visit('http://localhost:8080/cypress-api')
145 | })
146 |
147 | it('Control what is printed to the Command Log', () => {
148 | // https://on.cypress.io/cypress-log
149 | })
150 | })
151 |
152 | context('Cypress.platform', () => {
153 | beforeEach(() => {
154 | cy.visit('http://localhost:8080/cypress-api')
155 | })
156 |
157 | it('Get underlying OS name', () => {
158 | // https://on.cypress.io/platform
159 | expect(Cypress.platform).to.be.exist
160 | })
161 | })
162 |
163 | context('Cypress.version', () => {
164 | beforeEach(() => {
165 | cy.visit('http://localhost:8080/cypress-api')
166 | })
167 |
168 | it('Get current version of Cypress being run', () => {
169 | // https://on.cypress.io/version
170 | expect(Cypress.version).to.be.exist
171 | })
172 | })
173 |
174 | context('Cypress.spec', () => {
175 | beforeEach(() => {
176 | cy.visit('http://localhost:8080/cypress-api')
177 | })
178 |
179 | it('Get current spec information', () => {
180 | // https://on.cypress.io/spec
181 | // wrap the object so we can inspect it easily by clicking in the command log
182 | cy.wrap(Cypress.spec).should('include.keys', ['name', 'relative', 'absolute'])
183 | })
184 | })
185 | })
186 |
--------------------------------------------------------------------------------
/cypress/e2e/2-advanced-examples/files.cy.js:
--------------------------------------------------------------------------------
1 | ///
2 |
3 | /// JSON fixture file can be loaded directly using
4 | // the built-in JavaScript bundler
5 | const requiredExample = require('../../fixtures/example')
6 |
7 | context('Files', () => {
8 | beforeEach(() => {
9 | cy.visit('http://localhost:8080/commands/files')
10 |
11 | // load example.json fixture file and store
12 | // in the test context object
13 | cy.fixture('example.json').as('example')
14 | })
15 |
16 | it('cy.fixture() - load a fixture', () => {
17 | // https://on.cypress.io/fixture
18 |
19 | // Instead of writing a response inline you can
20 | // use a fixture file's content.
21 |
22 | // when application makes an Ajax request matching "GET **/comments/*"
23 | // Cypress will intercept it and reply with the object in `example.json` fixture
24 | cy.intercept('GET', '**/comments/*', { fixture: 'example.json' }).as('getComment')
25 |
26 | // we have code that gets a comment when
27 | // the button is clicked in scripts.js
28 | cy.get('.fixture-btn').click()
29 |
30 | cy.wait('@getComment').its('response.body')
31 | .should('have.property', 'name')
32 | .and('include', 'Using fixtures to represent data')
33 | })
34 |
35 | it('cy.fixture() or require - load a fixture', function () {
36 | // we are inside the "function () { ... }"
37 | // callback and can use test context object "this"
38 | // "this.example" was loaded in "beforeEach" function callback
39 | expect(this.example, 'fixture in the test context')
40 | .to.deep.equal(requiredExample)
41 |
42 | // or use "cy.wrap" and "should('deep.equal', ...)" assertion
43 | cy.wrap(this.example)
44 | .should('deep.equal', requiredExample)
45 | })
46 |
47 | it('cy.readFile() - read file contents', () => {
48 | // https://on.cypress.io/readfile
49 |
50 | // You can read a file and yield its contents
51 | // The filePath is relative to your project's root.
52 | cy.readFile(Cypress.config('configFile')).then((config) => {
53 | expect(config).to.be.an('string')
54 | })
55 | })
56 |
57 | it('cy.writeFile() - write to a file', () => {
58 | // https://on.cypress.io/writefile
59 |
60 | // You can write to a file
61 |
62 | // Use a response from a request to automatically
63 | // generate a fixture file for use later
64 | cy.request('https://jsonplaceholder.cypress.io/users')
65 | .then((response) => {
66 | cy.writeFile('cypress/fixtures/users.json', response.body)
67 | })
68 |
69 | cy.fixture('users').should((users) => {
70 | expect(users[0].name).to.exist
71 | })
72 |
73 | // JavaScript arrays and objects are stringified
74 | // and formatted into text.
75 | cy.writeFile('cypress/fixtures/profile.json', {
76 | id: 8739,
77 | name: 'Jane',
78 | email: 'jane@example.com',
79 | })
80 |
81 | cy.fixture('profile').should((profile) => {
82 | expect(profile.name).to.eq('Jane')
83 | })
84 | })
85 | })
86 |
--------------------------------------------------------------------------------
/cypress/e2e/2-advanced-examples/location.cy.js:
--------------------------------------------------------------------------------
1 | ///
2 |
3 | context('Location', () => {
4 | beforeEach(() => {
5 | cy.visit('http://localhost:8080/commands/location')
6 | })
7 |
8 | it('cy.hash() - get the current URL hash', () => {
9 | // https://on.cypress.io/hash
10 | cy.hash().should('be.empty')
11 | })
12 |
13 | it('cy.location() - get window.location', () => {
14 | // https://on.cypress.io/location
15 | cy.location().should((location) => {
16 | expect(location.hash).to.be.empty
17 | expect(location.href).to.eq('http://localhost:8080/commands/location')
18 | expect(location.host).to.eq('localhost:8080')
19 | expect(location.hostname).to.eq('localhost')
20 | expect(location.origin).to.eq('http://localhost:8080')
21 | expect(location.pathname).to.eq('/commands/location')
22 | expect(location.port).to.eq('8080')
23 | expect(location.protocol).to.eq('http:')
24 | expect(location.search).to.be.empty
25 | })
26 | })
27 |
28 | it('cy.url() - get the current URL', () => {
29 | // https://on.cypress.io/url
30 | cy.url().should('eq', 'http://localhost:8080/commands/location')
31 | })
32 | })
33 |
--------------------------------------------------------------------------------
/cypress/e2e/2-advanced-examples/misc.cy.js:
--------------------------------------------------------------------------------
1 | ///
2 |
3 | context('Misc', () => {
4 | beforeEach(() => {
5 | cy.visit('http://localhost:8080/commands/misc')
6 | })
7 |
8 | it('cy.exec() - execute a system command', () => {
9 | // execute a system command.
10 | // so you can take actions necessary for
11 | // your test outside the scope of Cypress.
12 | // https://on.cypress.io/exec
13 |
14 | // we can use Cypress.platform string to
15 | // select appropriate command
16 | // https://on.cypress/io/platform
17 | cy.log(`Platform ${Cypress.platform} architecture ${Cypress.arch}`)
18 |
19 | // on CircleCI Windows build machines we have a failure to run bash shell
20 | // https://github.com/cypress-io/cypress/issues/5169
21 | // so skip some of the tests by passing flag "--env circle=true"
22 | const isCircleOnWindows = Cypress.platform === 'win32' && Cypress.env('circle')
23 |
24 | if (isCircleOnWindows) {
25 | cy.log('Skipping test on CircleCI')
26 |
27 | return
28 | }
29 |
30 | // cy.exec problem on Shippable CI
31 | // https://github.com/cypress-io/cypress/issues/6718
32 | const isShippable = Cypress.platform === 'linux' && Cypress.env('shippable')
33 |
34 | if (isShippable) {
35 | cy.log('Skipping test on ShippableCI')
36 |
37 | return
38 | }
39 |
40 | cy.exec('echo Jane Lane')
41 | .its('stdout').should('contain', 'Jane Lane')
42 |
43 | if (Cypress.platform === 'win32') {
44 | cy.exec(`print ${Cypress.config('configFile')}`)
45 | .its('stderr').should('be.empty')
46 | }
47 | else {
48 | cy.exec(`cat ${Cypress.config('configFile')}`)
49 | .its('stderr').should('be.empty')
50 |
51 | cy.exec('pwd')
52 | .its('code').should('eq', 0)
53 | }
54 | })
55 |
56 | it('cy.focused() - get the DOM element that has focus', () => {
57 | // https://on.cypress.io/focused
58 | cy.get('.misc-form').find('#name').click()
59 | cy.focused().should('have.id', 'name')
60 |
61 | cy.get('.misc-form').find('#description').click()
62 | cy.focused().should('have.id', 'description')
63 | })
64 |
65 | context('Cypress.Screenshot', function () {
66 | it('cy.screenshot() - take a screenshot', () => {
67 | // https://on.cypress.io/screenshot
68 | cy.screenshot('my-image')
69 | })
70 |
71 | it('Cypress.Screenshot.defaults() - change default config of screenshots', function () {
72 | Cypress.Screenshot.defaults({
73 | blackout: ['.foo'],
74 | capture: 'viewport',
75 | clip: { x: 0, y: 0, width: 200, height: 200 },
76 | scale: false,
77 | disableTimersAndAnimations: true,
78 | screenshotOnRunFailure: true,
79 | onBeforeScreenshot () { },
80 | onAfterScreenshot () { },
81 | })
82 | })
83 | })
84 |
85 | it('cy.wrap() - wrap an object', () => {
86 | // https://on.cypress.io/wrap
87 | cy.wrap({ foo: 'bar' })
88 | .should('have.property', 'foo')
89 | .and('include', 'bar')
90 | })
91 | })
92 |
--------------------------------------------------------------------------------
/cypress/e2e/2-advanced-examples/navigation.cy.js:
--------------------------------------------------------------------------------
1 | ///
2 |
3 | context('Navigation', () => {
4 | beforeEach(() => {
5 | cy.visit('http://localhost:8080')
6 | cy.get('.navbar-nav').contains('Commands').click()
7 | cy.get('.dropdown-menu').contains('Navigation').click()
8 | })
9 |
10 | it('cy.go() - go back or forward in the browser\'s history', () => {
11 | // https://on.cypress.io/go
12 |
13 | cy.location('pathname').should('include', 'navigation')
14 |
15 | cy.go('back')
16 | cy.location('pathname').should('not.include', 'navigation')
17 |
18 | cy.go('forward')
19 | cy.location('pathname').should('include', 'navigation')
20 |
21 | // clicking back
22 | cy.go(-1)
23 | cy.location('pathname').should('not.include', 'navigation')
24 |
25 | // clicking forward
26 | cy.go(1)
27 | cy.location('pathname').should('include', 'navigation')
28 | })
29 |
30 | it('cy.reload() - reload the page', () => {
31 | // https://on.cypress.io/reload
32 | cy.reload()
33 |
34 | // reload the page without using the cache
35 | cy.reload(true)
36 | })
37 |
38 | it('cy.visit() - visit a remote url', () => {
39 | // https://on.cypress.io/visit
40 |
41 | // Visit any sub-domain of your current domain
42 | // Pass options to the visit
43 | cy.visit('http://localhost:8080/commands/navigation', {
44 | timeout: 50000, // increase total time for the visit to resolve
45 | onBeforeLoad (contentWindow) {
46 | // contentWindow is the remote page's window object
47 | expect(typeof contentWindow === 'object').to.be.true
48 | },
49 | onLoad (contentWindow) {
50 | // contentWindow is the remote page's window object
51 | expect(typeof contentWindow === 'object').to.be.true
52 | },
53 | })
54 | })
55 | })
56 |
--------------------------------------------------------------------------------
/cypress/e2e/2-advanced-examples/network_requests.cy.js:
--------------------------------------------------------------------------------
1 | ///
2 |
3 | context('Network Requests', () => {
4 | beforeEach(() => {
5 | cy.visit('http://localhost:8080/commands/network-requests')
6 | })
7 |
8 | // Manage HTTP requests in your app
9 |
10 | it('cy.request() - make an XHR request', () => {
11 | // https://on.cypress.io/request
12 | cy.request('https://jsonplaceholder.cypress.io/comments')
13 | .should((response) => {
14 | expect(response.status).to.eq(200)
15 | // the server sometimes gets an extra comment posted from another machine
16 | // which gets returned as 1 extra object
17 | expect(response.body).to.have.property('length').and.be.oneOf([500, 501])
18 | expect(response).to.have.property('headers')
19 | expect(response).to.have.property('duration')
20 | })
21 | })
22 |
23 | it('cy.request() - verify response using BDD syntax', () => {
24 | cy.request('https://jsonplaceholder.cypress.io/comments')
25 | .then((response) => {
26 | // https://on.cypress.io/assertions
27 | expect(response).property('status').to.equal(200)
28 | expect(response).property('body').to.have.property('length').and.be.oneOf([500, 501])
29 | expect(response).to.include.keys('headers', 'duration')
30 | })
31 | })
32 |
33 | it('cy.request() with query parameters', () => {
34 | // will execute request
35 | // https://jsonplaceholder.cypress.io/comments?postId=1&id=3
36 | cy.request({
37 | url: 'https://jsonplaceholder.cypress.io/comments',
38 | qs: {
39 | postId: 1,
40 | id: 3,
41 | },
42 | })
43 | .its('body')
44 | .should('be.an', 'array')
45 | .and('have.length', 1)
46 | .its('0') // yields first element of the array
47 | .should('contain', {
48 | postId: 1,
49 | id: 3,
50 | })
51 | })
52 |
53 | it('cy.request() - pass result to the second request', () => {
54 | // first, let's find out the userId of the first user we have
55 | cy.request('https://jsonplaceholder.cypress.io/users?_limit=1')
56 | .its('body') // yields the response object
57 | .its('0') // yields the first element of the returned list
58 | // the above two commands its('body').its('0')
59 | // can be written as its('body.0')
60 | // if you do not care about TypeScript checks
61 | .then((user) => {
62 | expect(user).property('id').to.be.a('number')
63 | // make a new post on behalf of the user
64 | cy.request('POST', 'https://jsonplaceholder.cypress.io/posts', {
65 | userId: user.id,
66 | title: 'Cypress Test Runner',
67 | body: 'Fast, easy and reliable testing for anything that runs in a browser.',
68 | })
69 | })
70 | // note that the value here is the returned value of the 2nd request
71 | // which is the new post object
72 | .then((response) => {
73 | expect(response).property('status').to.equal(201) // new entity created
74 | expect(response).property('body').to.contain({
75 | title: 'Cypress Test Runner',
76 | })
77 |
78 | // we don't know the exact post id - only that it will be > 100
79 | // since JSONPlaceholder has built-in 100 posts
80 | expect(response.body).property('id').to.be.a('number')
81 | .and.to.be.gt(100)
82 |
83 | // we don't know the user id here - since it was in above closure
84 | // so in this test just confirm that the property is there
85 | expect(response.body).property('userId').to.be.a('number')
86 | })
87 | })
88 |
89 | it('cy.request() - save response in the shared test context', () => {
90 | // https://on.cypress.io/variables-and-aliases
91 | cy.request('https://jsonplaceholder.cypress.io/users?_limit=1')
92 | .its('body').its('0') // yields the first element of the returned list
93 | .as('user') // saves the object in the test context
94 | .then(function () {
95 | // NOTE 👀
96 | // By the time this callback runs the "as('user')" command
97 | // has saved the user object in the test context.
98 | // To access the test context we need to use
99 | // the "function () { ... }" callback form,
100 | // otherwise "this" points at a wrong or undefined object!
101 | cy.request('POST', 'https://jsonplaceholder.cypress.io/posts', {
102 | userId: this.user.id,
103 | title: 'Cypress Test Runner',
104 | body: 'Fast, easy and reliable testing for anything that runs in a browser.',
105 | })
106 | .its('body').as('post') // save the new post from the response
107 | })
108 | .then(function () {
109 | // When this callback runs, both "cy.request" API commands have finished
110 | // and the test context has "user" and "post" objects set.
111 | // Let's verify them.
112 | expect(this.post, 'post has the right user id').property('userId').to.equal(this.user.id)
113 | })
114 | })
115 |
116 | it('cy.intercept() - route responses to matching requests', () => {
117 | // https://on.cypress.io/intercept
118 |
119 | let message = 'whoa, this comment does not exist'
120 |
121 | // Listen to GET to comments/1
122 | cy.intercept('GET', '**/comments/*').as('getComment')
123 |
124 | // we have code that gets a comment when
125 | // the button is clicked in scripts.js
126 | cy.get('.network-btn').click()
127 |
128 | // https://on.cypress.io/wait
129 | cy.wait('@getComment').its('response.statusCode').should('be.oneOf', [200, 304])
130 |
131 | // Listen to POST to comments
132 | cy.intercept('POST', '**/comments').as('postComment')
133 |
134 | // we have code that posts a comment when
135 | // the button is clicked in scripts.js
136 | cy.get('.network-post').click()
137 | cy.wait('@postComment').should(({ request, response }) => {
138 | expect(request.body).to.include('email')
139 | expect(request.headers).to.have.property('content-type')
140 | expect(response && response.body).to.have.property('name', 'Using POST in cy.intercept()')
141 | })
142 |
143 | // Stub a response to PUT comments/ ****
144 | cy.intercept({
145 | method: 'PUT',
146 | url: '**/comments/*',
147 | }, {
148 | statusCode: 404,
149 | body: { error: message },
150 | headers: { 'access-control-allow-origin': '*' },
151 | delayMs: 500,
152 | }).as('putComment')
153 |
154 | // we have code that puts a comment when
155 | // the button is clicked in scripts.js
156 | cy.get('.network-put').click()
157 |
158 | cy.wait('@putComment')
159 |
160 | // our 404 statusCode logic in scripts.js executed
161 | cy.get('.network-put-comment').should('contain', message)
162 | })
163 | })
164 |
--------------------------------------------------------------------------------
/cypress/e2e/2-advanced-examples/querying.cy.js:
--------------------------------------------------------------------------------
1 | ///
2 |
3 | context('Querying', () => {
4 | beforeEach(() => {
5 | cy.visit('http://localhost:8080/commands/querying')
6 | })
7 |
8 | // The most commonly used query is 'cy.get()', you can
9 | // think of this like the '$' in jQuery
10 |
11 | it('cy.get() - query DOM elements', () => {
12 | // https://on.cypress.io/get
13 |
14 | cy.get('#query-btn').should('contain', 'Button')
15 |
16 | cy.get('.query-btn').should('contain', 'Button')
17 |
18 | cy.get('#querying .well>button:first').should('contain', 'Button')
19 | // ↲
20 | // Use CSS selectors just like jQuery
21 |
22 | cy.get('[data-test-id="test-example"]').should('have.class', 'example')
23 |
24 | // 'cy.get()' yields jQuery object, you can get its attribute
25 | // by invoking `.attr()` method
26 | cy.get('[data-test-id="test-example"]')
27 | .invoke('attr', 'data-test-id')
28 | .should('equal', 'test-example')
29 |
30 | // or you can get element's CSS property
31 | cy.get('[data-test-id="test-example"]')
32 | .invoke('css', 'position')
33 | .should('equal', 'static')
34 |
35 | // or use assertions directly during 'cy.get()'
36 | // https://on.cypress.io/assertions
37 | cy.get('[data-test-id="test-example"]')
38 | .should('have.attr', 'data-test-id', 'test-example')
39 | .and('have.css', 'position', 'static')
40 | })
41 |
42 | it('cy.contains() - query DOM elements with matching content', () => {
43 | // https://on.cypress.io/contains
44 | cy.get('.query-list')
45 | .contains('bananas')
46 | .should('have.class', 'third')
47 |
48 | // we can pass a regexp to `.contains()`
49 | cy.get('.query-list')
50 | .contains(/^b\w+/)
51 | .should('have.class', 'third')
52 |
53 | cy.get('.query-list')
54 | .contains('apples')
55 | .should('have.class', 'first')
56 |
57 | // passing a selector to contains will
58 | // yield the selector containing the text
59 | cy.get('#querying')
60 | .contains('ul', 'oranges')
61 | .should('have.class', 'query-list')
62 |
63 | cy.get('.query-button')
64 | .contains('Save Form')
65 | .should('have.class', 'btn')
66 | })
67 |
68 | it('.within() - query DOM elements within a specific element', () => {
69 | // https://on.cypress.io/within
70 | cy.get('.query-form').within(() => {
71 | cy.get('input:first').should('have.attr', 'placeholder', 'Email')
72 | cy.get('input:last').should('have.attr', 'placeholder', 'Password')
73 | })
74 | })
75 |
76 | it('cy.root() - query the root DOM element', () => {
77 | // https://on.cypress.io/root
78 |
79 | // By default, root is the document
80 | cy.root().should('match', 'html')
81 |
82 | cy.get('.query-ul').within(() => {
83 | // In this within, the root is now the ul DOM element
84 | cy.root().should('have.class', 'query-ul')
85 | })
86 | })
87 |
88 | it('best practices - selecting elements', () => {
89 | // https://on.cypress.io/best-practices#Selecting-Elements
90 | cy.get('[data-cy=best-practices-selecting-elements]').within(() => {
91 | // Worst - too generic, no context
92 | cy.get('button').click()
93 |
94 | // Bad. Coupled to styling. Highly subject to change.
95 | cy.get('.btn.btn-large').click()
96 |
97 | // Average. Coupled to the `name` attribute which has HTML semantics.
98 | cy.get('[name=submission]').click()
99 |
100 | // Better. But still coupled to styling or JS event listeners.
101 | cy.get('#main').click()
102 |
103 | // Slightly better. Uses an ID but also ensures the element
104 | // has an ARIA role attribute
105 | cy.get('#main[role=button]').click()
106 |
107 | // Much better. But still coupled to text content that may change.
108 | cy.contains('Submit').click()
109 |
110 | // Best. Insulated from all changes.
111 | cy.get('[data-cy=submit]').click()
112 | })
113 | })
114 | })
115 |
--------------------------------------------------------------------------------
/cypress/e2e/2-advanced-examples/spies_stubs_clocks.cy.js:
--------------------------------------------------------------------------------
1 | ///
2 |
3 | context('Spies, Stubs, and Clock', () => {
4 | it('cy.spy() - wrap a method in a spy', () => {
5 | // https://on.cypress.io/spy
6 | cy.visit('http://localhost:8080/commands/spies-stubs-clocks')
7 |
8 | const obj = {
9 | foo () {},
10 | }
11 |
12 | const spy = cy.spy(obj, 'foo').as('anyArgs')
13 |
14 | obj.foo()
15 |
16 | expect(spy).to.be.called
17 | })
18 |
19 | it('cy.spy() retries until assertions pass', () => {
20 | cy.visit('http://localhost:8080/commands/spies-stubs-clocks')
21 |
22 | const obj = {
23 | /**
24 | * Prints the argument passed
25 | * @param x {any}
26 | */
27 | foo (x) {
28 | console.log('obj.foo called with', x)
29 | },
30 | }
31 |
32 | cy.spy(obj, 'foo').as('foo')
33 |
34 | setTimeout(() => {
35 | obj.foo('first')
36 | }, 500)
37 |
38 | setTimeout(() => {
39 | obj.foo('second')
40 | }, 2500)
41 |
42 | cy.get('@foo').should('have.been.calledTwice')
43 | })
44 |
45 | it('cy.stub() - create a stub and/or replace a function with stub', () => {
46 | // https://on.cypress.io/stub
47 | cy.visit('http://localhost:8080/commands/spies-stubs-clocks')
48 |
49 | const obj = {
50 | /**
51 | * prints both arguments to the console
52 | * @param a {string}
53 | * @param b {string}
54 | */
55 | foo (a, b) {
56 | console.log('a', a, 'b', b)
57 | },
58 | }
59 |
60 | const stub = cy.stub(obj, 'foo').as('foo')
61 |
62 | obj.foo('foo', 'bar')
63 |
64 | expect(stub).to.be.called
65 | })
66 |
67 | it('cy.clock() - control time in the browser', () => {
68 | // https://on.cypress.io/clock
69 |
70 | // create the date in UTC so it's always the same
71 | // no matter what local timezone the browser is running in
72 | const now = new Date(Date.UTC(2017, 2, 14)).getTime()
73 |
74 | cy.clock(now)
75 | cy.visit('http://localhost:8080/commands/spies-stubs-clocks')
76 | cy.get('#clock-div').click()
77 | cy.get('#clock-div')
78 | .should('have.text', '1489449600')
79 | })
80 |
81 | it('cy.tick() - move time in the browser', () => {
82 | // https://on.cypress.io/tick
83 |
84 | // create the date in UTC so it's always the same
85 | // no matter what local timezone the browser is running in
86 | const now = new Date(Date.UTC(2017, 2, 14)).getTime()
87 |
88 | cy.clock(now)
89 | cy.visit('http://localhost:8080/commands/spies-stubs-clocks')
90 | cy.get('#tick-div').click()
91 | cy.get('#tick-div')
92 | .should('have.text', '1489449600')
93 |
94 | cy.tick(10000) // 10 seconds passed
95 | cy.get('#tick-div').click()
96 | cy.get('#tick-div')
97 | .should('have.text', '1489449610')
98 | })
99 |
100 | it('cy.stub() matches depending on arguments', () => {
101 | // see all possible matchers at
102 | // https://sinonjs.org/releases/latest/matchers/
103 | const greeter = {
104 | /**
105 | * Greets a person
106 | * @param {string} name
107 | */
108 | greet (name) {
109 | return `Hello, ${name}!`
110 | },
111 | }
112 |
113 | cy.stub(greeter, 'greet')
114 | .callThrough() // if you want non-matched calls to call the real method
115 | .withArgs(Cypress.sinon.match.string).returns('Hi')
116 | .withArgs(Cypress.sinon.match.number).throws(new Error('Invalid name'))
117 |
118 | expect(greeter.greet('World')).to.equal('Hi')
119 | expect(() => greeter.greet(42)).to.throw('Invalid name')
120 | expect(greeter.greet).to.have.been.calledTwice
121 |
122 | // non-matched calls goes the actual method
123 | expect(greeter.greet()).to.equal('Hello, undefined!')
124 | })
125 |
126 | it('matches call arguments using Sinon matchers', () => {
127 | // see all possible matchers at
128 | // https://sinonjs.org/releases/latest/matchers/
129 | const calculator = {
130 | /**
131 | * returns the sum of two arguments
132 | * @param a {number}
133 | * @param b {number}
134 | */
135 | add (a, b) {
136 | return a + b
137 | },
138 | }
139 |
140 | const spy = cy.spy(calculator, 'add').as('add')
141 |
142 | expect(calculator.add(2, 3)).to.equal(5)
143 |
144 | // if we want to assert the exact values used during the call
145 | expect(spy).to.be.calledWith(2, 3)
146 |
147 | // let's confirm "add" method was called with two numbers
148 | expect(spy).to.be.calledWith(Cypress.sinon.match.number, Cypress.sinon.match.number)
149 |
150 | // alternatively, provide the value to match
151 | expect(spy).to.be.calledWith(Cypress.sinon.match(2), Cypress.sinon.match(3))
152 |
153 | // match any value
154 | expect(spy).to.be.calledWith(Cypress.sinon.match.any, 3)
155 |
156 | // match any value from a list
157 | expect(spy).to.be.calledWith(Cypress.sinon.match.in([1, 2, 3]), 3)
158 |
159 | /**
160 | * Returns true if the given number is even
161 | * @param {number} x
162 | */
163 | const isEven = (x) => x % 2 === 0
164 |
165 | // expect the value to pass a custom predicate function
166 | // the second argument to "sinon.match(predicate, message)" is
167 | // shown if the predicate does not pass and assertion fails
168 | expect(spy).to.be.calledWith(Cypress.sinon.match(isEven, 'isEven'), 3)
169 |
170 | /**
171 | * Returns a function that checks if a given number is larger than the limit
172 | * @param {number} limit
173 | * @returns {(x: number) => boolean}
174 | */
175 | const isGreaterThan = (limit) => (x) => x > limit
176 |
177 | /**
178 | * Returns a function that checks if a given number is less than the limit
179 | * @param {number} limit
180 | * @returns {(x: number) => boolean}
181 | */
182 | const isLessThan = (limit) => (x) => x < limit
183 |
184 | // you can combine several matchers using "and", "or"
185 | expect(spy).to.be.calledWith(
186 | Cypress.sinon.match.number,
187 | Cypress.sinon.match(isGreaterThan(2), '> 2').and(Cypress.sinon.match(isLessThan(4), '< 4')),
188 | )
189 |
190 | expect(spy).to.be.calledWith(
191 | Cypress.sinon.match.number,
192 | Cypress.sinon.match(isGreaterThan(200), '> 200').or(Cypress.sinon.match(3)),
193 | )
194 |
195 | // matchers can be used from BDD assertions
196 | cy.get('@add').should('have.been.calledWith',
197 | Cypress.sinon.match.number, Cypress.sinon.match(3))
198 |
199 | // you can alias matchers for shorter test code
200 | const { match: M } = Cypress.sinon
201 |
202 | cy.get('@add').should('have.been.calledWith', M.number, M(3))
203 | })
204 | })
205 |
--------------------------------------------------------------------------------
/cypress/e2e/2-advanced-examples/storage.cy.js:
--------------------------------------------------------------------------------
1 | ///
2 |
3 | context('Local Storage / Session Storage', () => {
4 | beforeEach(() => {
5 | cy.visit('http://localhost:8080/commands/storage')
6 | })
7 | // Although localStorage is automatically cleared
8 | // in between tests to maintain a clean state
9 | // sometimes we need to clear localStorage manually
10 |
11 | it('cy.clearLocalStorage() - clear all data in localStorage for the current origin', () => {
12 | // https://on.cypress.io/clearlocalstorage
13 | cy.get('.ls-btn').click()
14 | cy.get('.ls-btn').should(() => {
15 | expect(localStorage.getItem('prop1')).to.eq('red')
16 | expect(localStorage.getItem('prop2')).to.eq('blue')
17 | expect(localStorage.getItem('prop3')).to.eq('magenta')
18 | })
19 |
20 | cy.clearLocalStorage()
21 | cy.getAllLocalStorage().should(() => {
22 | expect(localStorage.getItem('prop1')).to.be.null
23 | expect(localStorage.getItem('prop2')).to.be.null
24 | expect(localStorage.getItem('prop3')).to.be.null
25 | })
26 |
27 | cy.get('.ls-btn').click()
28 | cy.get('.ls-btn').should(() => {
29 | expect(localStorage.getItem('prop1')).to.eq('red')
30 | expect(localStorage.getItem('prop2')).to.eq('blue')
31 | expect(localStorage.getItem('prop3')).to.eq('magenta')
32 | })
33 |
34 | // Clear key matching string in localStorage
35 | cy.clearLocalStorage('prop1')
36 | cy.getAllLocalStorage().should(() => {
37 | expect(localStorage.getItem('prop1')).to.be.null
38 | expect(localStorage.getItem('prop2')).to.eq('blue')
39 | expect(localStorage.getItem('prop3')).to.eq('magenta')
40 | })
41 |
42 | cy.get('.ls-btn').click()
43 | cy.get('.ls-btn').should(() => {
44 | expect(localStorage.getItem('prop1')).to.eq('red')
45 | expect(localStorage.getItem('prop2')).to.eq('blue')
46 | expect(localStorage.getItem('prop3')).to.eq('magenta')
47 | })
48 |
49 | // Clear keys matching regex in localStorage
50 | cy.clearLocalStorage(/prop1|2/)
51 | cy.getAllLocalStorage().should(() => {
52 | expect(localStorage.getItem('prop1')).to.be.null
53 | expect(localStorage.getItem('prop2')).to.be.null
54 | expect(localStorage.getItem('prop3')).to.eq('magenta')
55 | })
56 | })
57 |
58 | it('cy.getAllLocalStorage() - get all data in localStorage for all origins', () => {
59 | // https://on.cypress.io/getalllocalstorage
60 | cy.get('.ls-btn').click()
61 |
62 | // getAllLocalStorage() yields a map of origins to localStorage values
63 | cy.getAllLocalStorage().should((storageMap) => {
64 | expect(storageMap).to.deep.equal({
65 | // other origins will also be present if localStorage is set on them
66 | 'http://localhost:8080': {
67 | prop1: 'red',
68 | prop2: 'blue',
69 | prop3: 'magenta',
70 | },
71 | })
72 | })
73 | })
74 |
75 | it('cy.clearAllLocalStorage() - clear all data in localStorage for all origins', () => {
76 | // https://on.cypress.io/clearalllocalstorage
77 | cy.get('.ls-btn').click()
78 |
79 | // clearAllLocalStorage() yields null
80 | cy.clearAllLocalStorage()
81 | cy.getAllLocalStorage().should(() => {
82 | expect(localStorage.getItem('prop1')).to.be.null
83 | expect(localStorage.getItem('prop2')).to.be.null
84 | expect(localStorage.getItem('prop3')).to.be.null
85 | })
86 | })
87 |
88 | it('cy.getAllSessionStorage() - get all data in sessionStorage for all origins', () => {
89 | // https://on.cypress.io/getallsessionstorage
90 | cy.get('.ls-btn').click()
91 |
92 | // getAllSessionStorage() yields a map of origins to sessionStorage values
93 | cy.getAllSessionStorage().should((storageMap) => {
94 | expect(storageMap).to.deep.equal({
95 | // other origins will also be present if sessionStorage is set on them
96 | 'http://localhost:8080': {
97 | prop4: 'cyan',
98 | prop5: 'yellow',
99 | prop6: 'black',
100 | },
101 | })
102 | })
103 | })
104 |
105 | it('cy.clearAllSessionStorage() - clear all data in sessionStorage for all origins', () => {
106 | // https://on.cypress.io/clearallsessionstorage
107 | cy.get('.ls-btn').click()
108 |
109 | // clearAllSessionStorage() yields null
110 | cy.clearAllSessionStorage()
111 | cy.getAllSessionStorage().should(() => {
112 | expect(sessionStorage.getItem('prop4')).to.be.null
113 | expect(sessionStorage.getItem('prop5')).to.be.null
114 | expect(sessionStorage.getItem('prop6')).to.be.null
115 | })
116 | })
117 | })
118 |
--------------------------------------------------------------------------------
/cypress/e2e/2-advanced-examples/traversal.cy.js:
--------------------------------------------------------------------------------
1 | ///
2 |
3 | context('Traversal', () => {
4 | beforeEach(() => {
5 | cy.visit('http://localhost:8080/commands/traversal')
6 | })
7 |
8 | it('.children() - get child DOM elements', () => {
9 | // https://on.cypress.io/children
10 | cy.get('.traversal-breadcrumb')
11 | .children('.active')
12 | .should('contain', 'Data')
13 | })
14 |
15 | it('.closest() - get closest ancestor DOM element', () => {
16 | // https://on.cypress.io/closest
17 | cy.get('.traversal-badge')
18 | .closest('ul')
19 | .should('have.class', 'list-group')
20 | })
21 |
22 | it('.eq() - get a DOM element at a specific index', () => {
23 | // https://on.cypress.io/eq
24 | cy.get('.traversal-list>li')
25 | .eq(1).should('contain', 'siamese')
26 | })
27 |
28 | it('.filter() - get DOM elements that match the selector', () => {
29 | // https://on.cypress.io/filter
30 | cy.get('.traversal-nav>li')
31 | .filter('.active').should('contain', 'About')
32 | })
33 |
34 | it('.find() - get descendant DOM elements of the selector', () => {
35 | // https://on.cypress.io/find
36 | cy.get('.traversal-pagination')
37 | .find('li').find('a')
38 | .should('have.length', 7)
39 | })
40 |
41 | it('.first() - get first DOM element', () => {
42 | // https://on.cypress.io/first
43 | cy.get('.traversal-table td')
44 | .first().should('contain', '1')
45 | })
46 |
47 | it('.last() - get last DOM element', () => {
48 | // https://on.cypress.io/last
49 | cy.get('.traversal-buttons .btn')
50 | .last().should('contain', 'Submit')
51 | })
52 |
53 | it('.next() - get next sibling DOM element', () => {
54 | // https://on.cypress.io/next
55 | cy.get('.traversal-ul')
56 | .contains('apples').next().should('contain', 'oranges')
57 | })
58 |
59 | it('.nextAll() - get all next sibling DOM elements', () => {
60 | // https://on.cypress.io/nextall
61 | cy.get('.traversal-next-all')
62 | .contains('oranges')
63 | .nextAll().should('have.length', 3)
64 | })
65 |
66 | it('.nextUntil() - get next sibling DOM elements until next el', () => {
67 | // https://on.cypress.io/nextuntil
68 | cy.get('#veggies')
69 | .nextUntil('#nuts').should('have.length', 3)
70 | })
71 |
72 | it('.not() - remove DOM elements from set of DOM elements', () => {
73 | // https://on.cypress.io/not
74 | cy.get('.traversal-disabled .btn')
75 | .not('[disabled]').should('not.contain', 'Disabled')
76 | })
77 |
78 | it('.parent() - get parent DOM element from DOM elements', () => {
79 | // https://on.cypress.io/parent
80 | cy.get('.traversal-mark')
81 | .parent().should('contain', 'Morbi leo risus')
82 | })
83 |
84 | it('.parents() - get parent DOM elements from DOM elements', () => {
85 | // https://on.cypress.io/parents
86 | cy.get('.traversal-cite')
87 | .parents().should('match', 'blockquote')
88 | })
89 |
90 | it('.parentsUntil() - get parent DOM elements from DOM elements until el', () => {
91 | // https://on.cypress.io/parentsuntil
92 | cy.get('.clothes-nav')
93 | .find('.active')
94 | .parentsUntil('.clothes-nav')
95 | .should('have.length', 2)
96 | })
97 |
98 | it('.prev() - get previous sibling DOM element', () => {
99 | // https://on.cypress.io/prev
100 | cy.get('.birds').find('.active')
101 | .prev().should('contain', 'Lorikeets')
102 | })
103 |
104 | it('.prevAll() - get all previous sibling DOM elements', () => {
105 | // https://on.cypress.io/prevall
106 | cy.get('.fruits-list').find('.third')
107 | .prevAll().should('have.length', 2)
108 | })
109 |
110 | it('.prevUntil() - get all previous sibling DOM elements until el', () => {
111 | // https://on.cypress.io/prevuntil
112 | cy.get('.foods-list').find('#nuts')
113 | .prevUntil('#veggies').should('have.length', 3)
114 | })
115 |
116 | it('.siblings() - get all sibling DOM elements', () => {
117 | // https://on.cypress.io/siblings
118 | cy.get('.traversal-pills .active')
119 | .siblings().should('have.length', 2)
120 | })
121 | })
122 |
--------------------------------------------------------------------------------
/cypress/e2e/2-advanced-examples/utilities.cy.js:
--------------------------------------------------------------------------------
1 | ///
2 |
3 | context('Utilities', () => {
4 | beforeEach(() => {
5 | cy.visit('http://localhost:8080/utilities')
6 | })
7 |
8 | it('Cypress._ - call a lodash method', () => {
9 | // https://on.cypress.io/_
10 | cy.request('https://jsonplaceholder.cypress.io/users')
11 | .then((response) => {
12 | let ids = Cypress._.chain(response.body).map('id').take(3).value()
13 |
14 | expect(ids).to.deep.eq([1, 2, 3])
15 | })
16 | })
17 |
18 | it('Cypress.$ - call a jQuery method', () => {
19 | // https://on.cypress.io/$
20 | let $li = Cypress.$('.utility-jquery li:first')
21 |
22 | cy.wrap($li).should('not.have.class', 'active')
23 | cy.wrap($li).click()
24 | cy.wrap($li).should('have.class', 'active')
25 | })
26 |
27 | it('Cypress.Blob - blob utilities and base64 string conversion', () => {
28 | // https://on.cypress.io/blob
29 | cy.get('.utility-blob').then(($div) => {
30 | // https://github.com/nolanlawson/blob-util#imgSrcToDataURL
31 | // get the dataUrl string for the javascript-logo
32 | return Cypress.Blob.imgSrcToDataURL('/assets/img/javascript-logo.png', undefined, 'anonymous')
33 | .then((dataUrl) => {
34 | // create an ![]() element and set its src to the dataUrl
35 | let img = Cypress.$('![]() ', { src: dataUrl })
36 |
37 | // need to explicitly return cy here since we are initially returning
38 | // the Cypress.Blob.imgSrcToDataURL promise to our test
39 | // append the image
40 | $div.append(img)
41 |
42 | cy.get('.utility-blob img').click()
43 | cy.get('.utility-blob img').should('have.attr', 'src', dataUrl)
44 | })
45 | })
46 | })
47 |
48 | it('Cypress.minimatch - test out glob patterns against strings', () => {
49 | // https://on.cypress.io/minimatch
50 | let matching = Cypress.minimatch('/users/1/comments', '/users/*/comments', {
51 | matchBase: true,
52 | })
53 |
54 | expect(matching, 'matching wildcard').to.be.true
55 |
56 | matching = Cypress.minimatch('/users/1/comments/2', '/users/*/comments', {
57 | matchBase: true,
58 | })
59 |
60 | expect(matching, 'comments').to.be.false
61 |
62 | // ** matches against all downstream path segments
63 | matching = Cypress.minimatch('/foo/bar/baz/123/quux?a=b&c=2', '/foo/**', {
64 | matchBase: true,
65 | })
66 |
67 | expect(matching, 'comments').to.be.true
68 |
69 | // whereas * matches only the next path segment
70 |
71 | matching = Cypress.minimatch('/foo/bar/baz/123/quux?a=b&c=2', '/foo/*', {
72 | matchBase: false,
73 | })
74 |
75 | expect(matching, 'comments').to.be.false
76 | })
77 |
78 | it('Cypress.Promise - instantiate a bluebird promise', () => {
79 | // https://on.cypress.io/promise
80 | let waited = false
81 |
82 | /**
83 | * @return Bluebird
84 | */
85 | function waitOneSecond () {
86 | // return a promise that resolves after 1 second
87 | // eslint-disable-next-line no-unused-vars
88 | return new Cypress.Promise((resolve, reject) => {
89 | setTimeout(() => {
90 | // set waited to true
91 | waited = true
92 |
93 | // resolve with 'foo' string
94 | resolve('foo')
95 | }, 1000)
96 | })
97 | }
98 |
99 | cy.then(() => {
100 | // return a promise to cy.then() that
101 | // is awaited until it resolves
102 | return waitOneSecond().then((str) => {
103 | expect(str).to.eq('foo')
104 | expect(waited).to.be.true
105 | })
106 | })
107 | })
108 | })
109 |
--------------------------------------------------------------------------------
/cypress/e2e/2-advanced-examples/viewport.cy.js:
--------------------------------------------------------------------------------
1 | ///
2 | /* eslint-disable cypress/no-unnecessary-waiting */
3 |
4 | context('Viewport', () => {
5 | beforeEach(() => {
6 | cy.visit('http://localhost:8080/commands/viewport')
7 | })
8 |
9 | it('cy.viewport() - set the viewport size and dimension', () => {
10 | // https://on.cypress.io/viewport
11 |
12 | cy.get('#navbar').should('be.visible')
13 | cy.viewport(320, 480)
14 |
15 | // the navbar should have collapse since our screen is smaller
16 | cy.get('#navbar').should('not.be.visible')
17 | cy.get('.navbar-toggle').should('be.visible').click()
18 | cy.get('.nav').find('a').should('be.visible')
19 |
20 | // lets see what our app looks like on a super large screen
21 | cy.viewport(2999, 2999)
22 |
23 | // cy.viewport() accepts a set of preset sizes
24 | // to easily set the screen to a device's width and height
25 |
26 | // We added a cy.wait() between each viewport change so you can see
27 | // the change otherwise it is a little too fast to see :)
28 |
29 | cy.viewport('macbook-15')
30 | cy.wait(200)
31 | cy.viewport('macbook-13')
32 | cy.wait(200)
33 | cy.viewport('macbook-11')
34 | cy.wait(200)
35 | cy.viewport('ipad-2')
36 | cy.wait(200)
37 | cy.viewport('ipad-mini')
38 | cy.wait(200)
39 | cy.viewport('iphone-6+')
40 | cy.wait(200)
41 | cy.viewport('iphone-6')
42 | cy.wait(200)
43 | cy.viewport('iphone-5')
44 | cy.wait(200)
45 | cy.viewport('iphone-4')
46 | cy.wait(200)
47 | cy.viewport('iphone-3')
48 | cy.wait(200)
49 |
50 | // cy.viewport() accepts an orientation for all presets
51 | // the default orientation is 'portrait'
52 | cy.viewport('ipad-2', 'portrait')
53 | cy.wait(200)
54 | cy.viewport('iphone-4', 'landscape')
55 | cy.wait(200)
56 |
57 | // The viewport will be reset back to the default dimensions
58 | // in between tests (the default can be set in cypress.config.{js|ts})
59 | })
60 | })
61 |
--------------------------------------------------------------------------------
/cypress/e2e/2-advanced-examples/waiting.cy.js:
--------------------------------------------------------------------------------
1 | ///
2 | /* eslint-disable cypress/no-unnecessary-waiting */
3 |
4 | context('Waiting', () => {
5 | beforeEach(() => {
6 | cy.visit('http://localhost:8080/commands/waiting')
7 | })
8 | // BE CAREFUL of adding unnecessary wait times.
9 | // https://on.cypress.io/best-practices#Unnecessary-Waiting
10 |
11 | // https://on.cypress.io/wait
12 | it('cy.wait() - wait for a specific amount of time', () => {
13 | cy.get('.wait-input1').type('Wait 1000ms after typing')
14 | cy.wait(1000)
15 | cy.get('.wait-input2').type('Wait 1000ms after typing')
16 | cy.wait(1000)
17 | cy.get('.wait-input3').type('Wait 1000ms after typing')
18 | cy.wait(1000)
19 | })
20 |
21 | it('cy.wait() - wait for a specific route', () => {
22 | // Listen to GET to comments/1
23 | cy.intercept('GET', '**/comments/*').as('getComment')
24 |
25 | // we have code that gets a comment when
26 | // the button is clicked in scripts.js
27 | cy.get('.network-btn').click()
28 |
29 | // wait for GET comments/1
30 | cy.wait('@getComment').its('response.statusCode').should('be.oneOf', [200, 304])
31 | })
32 | })
33 |
--------------------------------------------------------------------------------
/cypress/e2e/2-advanced-examples/window.cy.js:
--------------------------------------------------------------------------------
1 | ///
2 |
3 | context('Window', () => {
4 | beforeEach(() => {
5 | cy.visit('http://localhost:8080/commands/window')
6 | })
7 |
8 | it('cy.window() - get the global window object', () => {
9 | // https://on.cypress.io/window
10 | cy.window().should('have.property', 'top')
11 | })
12 |
13 | it('cy.document() - get the document object', () => {
14 | // https://on.cypress.io/document
15 | cy.document().should('have.property', 'charset').and('eq', 'UTF-8')
16 | })
17 |
18 | it('cy.title() - get the title', () => {
19 | // https://on.cypress.io/title
20 | cy.title().should('include', 'Kitchen Sink')
21 | })
22 | })
23 |
--------------------------------------------------------------------------------
/cypress/fixtures/example.json:
--------------------------------------------------------------------------------
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 | }
6 |
--------------------------------------------------------------------------------
/cypress/support/commands.js:
--------------------------------------------------------------------------------
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) => { ... })
26 |
--------------------------------------------------------------------------------
/cypress/support/e2e.js:
--------------------------------------------------------------------------------
1 | // ***********************************************************
2 | // This example support/e2e.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 |
--------------------------------------------------------------------------------
/env.encrypted:
--------------------------------------------------------------------------------
1 | codeship:v2
2 | VYpDY5q344GUgI3Ru7veAHzt1MfF6zJMK+enZ97jhwXXBlmPfwfnkPYyHdnOyp7AIgmPpqzQ2QJoSbYAH9girO3AuJOgVpTQ/fg6pFwb1FAshuIH1wJ501qSVXtWDuaAXDfZ9VbxGg==
--------------------------------------------------------------------------------
/eslint.config.mjs:
--------------------------------------------------------------------------------
1 | import globals from 'globals'
2 | import pluginJs from '@eslint/js'
3 | import eslintPluginJsonc from 'eslint-plugin-jsonc'
4 | import stylistic from '@stylistic/eslint-plugin'
5 | import mochaPlugin from 'eslint-plugin-mocha'
6 | import pluginCypress from 'eslint-plugin-cypress'
7 |
8 | export default [
9 | pluginJs.configs.recommended,
10 | ...eslintPluginJsonc.configs['flat/recommended-with-json'],
11 | mochaPlugin.configs.recommended,
12 | pluginCypress.configs.recommended,
13 | stylistic.configs.recommended,
14 | {
15 | ignores: ['app/assets/js/{vendor,todo}/'],
16 | },
17 | {
18 | rules: {
19 | '@stylistic/arrow-parens': ['error', 'always'],
20 | '@stylistic/comma-dangle': ['error', 'always-multiline'],
21 | '@stylistic/indent': ['error', 2, { SwitchCase: 1, MemberExpression: 'off' }],
22 | '@stylistic/quotes': ['error', 'single'],
23 | '@stylistic/semi': ['error', 'never'],
24 | '@stylistic/space-before-function-paren': ['error', 'always'],
25 | 'mocha/no-exclusive-tests': 'error',
26 | 'mocha/no-pending-tests': 'error',
27 | 'mocha/no-mocha-arrows': 'off',
28 | },
29 | languageOptions: {
30 | globals: {
31 | ...globals.node,
32 | },
33 | },
34 | },
35 | ]
36 |
--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "cypress-example-kitchensink",
3 | "version": "0.0.0-development",
4 | "description": "This is an example app used to showcase Cypress.io End-to-End (E2E) testing. For a full reference of our documentation, go to https://docs.cypress.io",
5 | "main": "index.js",
6 | "files": [
7 | "app",
8 | "cypress"
9 | ],
10 | "scripts": {
11 | "build": "npm run lint",
12 | "start": "node ./scripts/start.js",
13 | "dev": "npm start",
14 | "test": "npm start & cypress run",
15 | "pretest": "npm run lint",
16 | "print-env": "print-env",
17 | "lint": "eslint --fix cypress app/assets/js/scripts.js",
18 | "lint:yaml": "yamllint '*.yml' '.buildkite/*.yml' '.circleci/*.yml' '.github/workflows/*.yml' '.semaphore/*.yml' 'basic/**/*.yml' ",
19 | "colon:names": "colon-names",
20 | "e2e": "cypress run",
21 | "e2e:chrome": "cypress run --browser chrome",
22 | "e2e:edge": "cypress run --browser edge",
23 | "e2e:firefox": "cypress run --browser firefox",
24 | "e2e:record": "cypress run --record",
25 | "e2e:record:chrome": "cypress run --record --browser chrome",
26 | "e2e:record:edge": "cypress run --record --browser edge",
27 | "e2e:record:firefox": "cypress run --record --browser firefox",
28 | "e2e:record:parallel": "cypress run --record --parallel",
29 | "test:ci": "run-p --race start e2e",
30 | "test:ci:chrome": "run-p --race start e2e:chrome",
31 | "test:ci:edge": "run-p --race start e2e:edge",
32 | "test:ci:firefox": "run-p --race start e2e:firefox",
33 | "test:ci:record": "run-p --race start e2e:record",
34 | "test:ci:record:chrome": "run-p --race start e2e:record:chrome",
35 | "test:ci:record:edge": "run-p --race start e2e:record:edge",
36 | "test:ci:record:firefox": "run-p --race start e2e:record:firefox",
37 | "test:ci:record:parallel": "run-p --race start e2e:record:parallel",
38 | "cy:verify": "cypress verify",
39 | "cy:info": "cypress info",
40 | "cy:version": "cypress version",
41 | "cy:cache:list": "cypress cache list",
42 | "cy:run": "cypress run",
43 | "cy:run:record": "cypress run --record",
44 | "cy:open": "cypress open",
45 | "local:open": "start-test 8080 cy:open",
46 | "local:run": "start-test 8080 cy:run",
47 | "local:run:record": "start-test 8080 cy:run:record",
48 | "ci:set-port": "node ./scripts/set-port",
49 | "semantic-release": "semantic-release",
50 | "prepare": "node .husky/install.mjs"
51 | },
52 | "repository": {
53 | "type": "git",
54 | "url": "git+https://github.com/cypress-io/cypress-example-kitchensink.git"
55 | },
56 | "author": "Cypress-io",
57 | "license": "MIT",
58 | "bugs": {
59 | "url": "https://github.com/cypress-io/cypress-example-kitchensink/issues"
60 | },
61 | "homepage": "https://github.com/cypress-io/cypress-example-kitchensink#readme",
62 | "dependencies": {
63 | "npm-run-all2": "7.0.2",
64 | "serve": "14.2.4"
65 | },
66 | "devDependencies": {
67 | "@bahmutov/print-env": "1.3.0",
68 | "@stylistic/eslint-plugin": "4.4.0",
69 | "cypress": "14.4.0",
70 | "eslint": "9.27.0",
71 | "eslint-plugin-cypress": "5.0.0",
72 | "eslint-plugin-jsonc": "2.20.1",
73 | "eslint-plugin-mocha": "11.1.0",
74 | "globby": "11.1.0",
75 | "husky": "9.0.6",
76 | "semantic-release": "24.2.3",
77 | "start-server-and-test": "2.0.11",
78 | "yaml-lint": "1.7.0"
79 | },
80 | "engines": {
81 | "node": "^20.0.0 || >=22.0.0"
82 | }
83 | }
84 |
--------------------------------------------------------------------------------
/renovate.json:
--------------------------------------------------------------------------------
1 | {
2 | "extends": [
3 | "config:base"
4 | ],
5 | "automerge": true,
6 | "commitMessage": "{{semanticPrefix}}Update {{depName}} to {{newVersion}} 🌟",
7 | "prTitle": "{{semanticPrefix}}{{#if isPin}}Pin{{else}}Update{{/if}} dependency {{depName}} to version {{newVersion}} 🌟",
8 | "major": {
9 | "automerge": false
10 | },
11 | "minor": {
12 | "automerge": false
13 | },
14 | "prConcurrentLimit": 3,
15 | "prHourlyLimit": 2,
16 | "schedule": [
17 | "after 2am and before 3am on saturday"
18 | ],
19 | "updateNotScheduled": false,
20 | "timezone": "America/New_York",
21 | "lockFileMaintenance": {
22 | "enabled": true
23 | },
24 | "separatePatchReleases": true,
25 | "separateMultipleMajor": true,
26 | "masterIssue": true,
27 | "labels": [
28 | "type: dependencies",
29 | "renovate"
30 | ],
31 | "packageRules": [
32 | {
33 | "packageNames": ["cypress"],
34 | "groupName": "cypress",
35 | "schedule": "before 2am"
36 | },
37 | {
38 | "packagePatterns": "^eslint",
39 | "groupName": "eslint"
40 | }
41 | ]
42 | }
43 |
--------------------------------------------------------------------------------
/scripts/set-port.js:
--------------------------------------------------------------------------------
1 | /* eslint-env node */
2 |
3 | const { readFileSync, writeFileSync } = require('fs')
4 |
5 | // On some CIs like Heroku CI the host assigns random PORT and
6 | // does not allow using default port 8080.
7 | // So we need to replace hardcoded port 8080 with process.env.PORT
8 | // in all our example specs and then run the tests
9 |
10 | // if doing it locally, you can change back to the original port
11 | // with "git restore ." command
12 |
13 | if (!process.env.PORT) {
14 | console.log('PORT environment variable is not set, nothing to do')
15 | process.exit(0)
16 | }
17 |
18 | // replace both url and port if used in assertions, like
19 | // expect(location.port).to.eq('8080')
20 | const defaultPort = 8080
21 | const input = `localhost:${defaultPort}`
22 | const portRegex = new RegExp(`'${defaultPort}'`, 'g')
23 | const urlRegex = new RegExp(input, 'g')
24 | const newPort = `'${process.env.PORT}'`
25 | const newUrl = `localhost:${process.env.PORT}`
26 |
27 | console.log('replacing "%s" with "%s" in all spec files', input, newUrl)
28 |
29 | const getSpecFilenames = () => {
30 | const globby = require('globby')
31 |
32 | return globby(['cypress/e2e/**/*.cy.js'])
33 | }
34 |
35 | const replacePort = (filename) => {
36 | const text = readFileSync(filename, 'utf8')
37 | const replaced = text.replace(urlRegex, newUrl).replace(portRegex, newPort)
38 |
39 | writeFileSync(filename, replaced, 'utf8')
40 | }
41 |
42 | getSpecFilenames()
43 | .then((filenames) => {
44 | filenames.map(replacePort)
45 | })
46 | .catch((e) => {
47 | console.error(e.message)
48 | process.exit(1)
49 | })
50 |
--------------------------------------------------------------------------------
/scripts/start.js:
--------------------------------------------------------------------------------
1 | const { execSync } = require('child_process')
2 |
3 | const port = process.env.PORT || 8080
4 | let cmd = `serve --listen ${port} --no-request-logging`
5 |
6 | if (process.env.CI) cmd += ' --no-clipboard'
7 |
8 | if (process.argv.length > 2) cmd += ` ${process.argv.slice(2).join(' ')}`
9 |
10 | console.log(`Running "${cmd}"...`)
11 |
12 | execSync(cmd, { stdio: 'inherit' })
13 |
--------------------------------------------------------------------------------
/serve.json:
--------------------------------------------------------------------------------
1 | {
2 | "public": "app",
3 | "headers": [{
4 | "source": "**/*",
5 | "headers": [{
6 | "key": "Cache-Control",
7 | "value": "no-cache"
8 | }]
9 | }]
10 | }
11 |
--------------------------------------------------------------------------------
|