|
| 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 | + cy.get('.action-form').submit() |
| 63 | + .next().should('contain', 'Your form has been submitted!') |
| 64 | + }) |
| 65 | + |
| 66 | + it('.click() - click on a DOM element', () => { |
| 67 | + // https://on.cypress.io/click |
| 68 | + cy.get('.action-btn').click() |
| 69 | + |
| 70 | + // You can click on 9 specific positions of an element: |
| 71 | + // ----------------------------------- |
| 72 | + // | topLeft top topRight | |
| 73 | + // | | |
| 74 | + // | | |
| 75 | + // | | |
| 76 | + // | left center right | |
| 77 | + // | | |
| 78 | + // | | |
| 79 | + // | | |
| 80 | + // | bottomLeft bottom bottomRight | |
| 81 | + // ----------------------------------- |
| 82 | + |
| 83 | + // clicking in the center of the element is the default |
| 84 | + cy.get('#action-canvas').click() |
| 85 | + |
| 86 | + cy.get('#action-canvas').click('topLeft') |
| 87 | + cy.get('#action-canvas').click('top') |
| 88 | + cy.get('#action-canvas').click('topRight') |
| 89 | + cy.get('#action-canvas').click('left') |
| 90 | + cy.get('#action-canvas').click('right') |
| 91 | + cy.get('#action-canvas').click('bottomLeft') |
| 92 | + cy.get('#action-canvas').click('bottom') |
| 93 | + cy.get('#action-canvas').click('bottomRight') |
| 94 | + |
| 95 | + // .click() accepts an x and y coordinate |
| 96 | + // that controls where the click occurs :) |
| 97 | + |
| 98 | + cy.get('#action-canvas') |
| 99 | + .click(80, 75) // click 80px on x coord and 75px on y coord |
| 100 | + .click(170, 75) |
| 101 | + .click(80, 165) |
| 102 | + .click(100, 185) |
| 103 | + .click(125, 190) |
| 104 | + .click(150, 185) |
| 105 | + .click(170, 165) |
| 106 | + |
| 107 | + // click multiple elements by passing multiple: true |
| 108 | + cy.get('.action-labels>.label').click({ multiple: true }) |
| 109 | + |
| 110 | + // Ignore error checking prior to clicking |
| 111 | + cy.get('.action-opacity>.btn').click({ force: true }) |
| 112 | + }) |
| 113 | + |
| 114 | + it('.dblclick() - double click on a DOM element', () => { |
| 115 | + // https://on.cypress.io/dblclick |
| 116 | + |
| 117 | + // Our app has a listener on 'dblclick' event in our 'scripts.js' |
| 118 | + // that hides the div and shows an input on double click |
| 119 | + cy.get('.action-div').dblclick().should('not.be.visible') |
| 120 | + cy.get('.action-input-hidden').should('be.visible') |
| 121 | + }) |
| 122 | + |
| 123 | + it('.rightclick() - right click on a DOM element', () => { |
| 124 | + // https://on.cypress.io/rightclick |
| 125 | + |
| 126 | + // Our app has a listener on 'contextmenu' event in our 'scripts.js' |
| 127 | + // that hides the div and shows an input on right click |
| 128 | + cy.get('.rightclick-action-div').rightclick().should('not.be.visible') |
| 129 | + cy.get('.rightclick-action-input-hidden').should('be.visible') |
| 130 | + }) |
| 131 | + |
| 132 | + it('.check() - check a checkbox or radio element', () => { |
| 133 | + // https://on.cypress.io/check |
| 134 | + |
| 135 | + // By default, .check() will check all |
| 136 | + // matching checkbox or radio elements in succession, one after another |
| 137 | + cy.get('.action-checkboxes [type="checkbox"]').not('[disabled]') |
| 138 | + .check().should('be.checked') |
| 139 | + |
| 140 | + cy.get('.action-radios [type="radio"]').not('[disabled]') |
| 141 | + .check().should('be.checked') |
| 142 | + |
| 143 | + // .check() accepts a value argument |
| 144 | + cy.get('.action-radios [type="radio"]') |
| 145 | + .check('radio1').should('be.checked') |
| 146 | + |
| 147 | + // .check() accepts an array of values |
| 148 | + cy.get('.action-multiple-checkboxes [type="checkbox"]') |
| 149 | + .check(['checkbox1', 'checkbox2']).should('be.checked') |
| 150 | + |
| 151 | + // Ignore error checking prior to checking |
| 152 | + cy.get('.action-checkboxes [disabled]') |
| 153 | + .check({ force: true }).should('be.checked') |
| 154 | + |
| 155 | + cy.get('.action-radios [type="radio"]') |
| 156 | + .check('radio3', { force: true }).should('be.checked') |
| 157 | + }) |
| 158 | + |
| 159 | + it('.uncheck() - uncheck a checkbox element', () => { |
| 160 | + // https://on.cypress.io/uncheck |
| 161 | + |
| 162 | + // By default, .uncheck() will uncheck all matching |
| 163 | + // checkbox elements in succession, one after another |
| 164 | + cy.get('.action-check [type="checkbox"]') |
| 165 | + .not('[disabled]') |
| 166 | + .uncheck().should('not.be.checked') |
| 167 | + |
| 168 | + // .uncheck() accepts a value argument |
| 169 | + cy.get('.action-check [type="checkbox"]') |
| 170 | + .check('checkbox1') |
| 171 | + .uncheck('checkbox1').should('not.be.checked') |
| 172 | + |
| 173 | + // .uncheck() accepts an array of values |
| 174 | + cy.get('.action-check [type="checkbox"]') |
| 175 | + .check(['checkbox1', 'checkbox3']) |
| 176 | + .uncheck(['checkbox1', 'checkbox3']).should('not.be.checked') |
| 177 | + |
| 178 | + // Ignore error checking prior to unchecking |
| 179 | + cy.get('.action-check [disabled]') |
| 180 | + .uncheck({ force: true }).should('not.be.checked') |
| 181 | + }) |
| 182 | + |
| 183 | + it('.select() - select an option in a <select> element', () => { |
| 184 | + // https://on.cypress.io/select |
| 185 | + |
| 186 | + // at first, no option should be selected |
| 187 | + cy.get('.action-select') |
| 188 | + .should('have.value', '--Select a fruit--') |
| 189 | + |
| 190 | + // Select option(s) with matching text content |
| 191 | + cy.get('.action-select').select('apples') |
| 192 | + // confirm the apples were selected |
| 193 | + // note that each value starts with "fr-" in our HTML |
| 194 | + cy.get('.action-select').should('have.value', 'fr-apples') |
| 195 | + |
| 196 | + cy.get('.action-select-multiple') |
| 197 | + .select(['apples', 'oranges', 'bananas']) |
| 198 | + // when getting multiple values, invoke "val" method first |
| 199 | + .invoke('val') |
| 200 | + .should('deep.equal', ['fr-apples', 'fr-oranges', 'fr-bananas']) |
| 201 | + |
| 202 | + // Select option(s) with matching value |
| 203 | + cy.get('.action-select').select('fr-bananas') |
| 204 | + // can attach an assertion right away to the element |
| 205 | + .should('have.value', 'fr-bananas') |
| 206 | + |
| 207 | + cy.get('.action-select-multiple') |
| 208 | + .select(['fr-apples', 'fr-oranges', 'fr-bananas']) |
| 209 | + .invoke('val') |
| 210 | + .should('deep.equal', ['fr-apples', 'fr-oranges', 'fr-bananas']) |
| 211 | + // assert the selected values include oranges |
| 212 | + cy.get('.action-select-multiple') |
| 213 | + .invoke('val').should('include', 'fr-oranges') |
| 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') |
| 224 | + .should('not.be.visible') |
| 225 | + |
| 226 | + // scroll the button into view, as if the user had scrolled |
| 227 | + cy.get('#scroll-horizontal button').scrollIntoView() |
| 228 | + .should('be.visible') |
| 229 | + |
| 230 | + cy.get('#scroll-vertical button') |
| 231 | + .should('not.be.visible') |
| 232 | + |
| 233 | + // Cypress handles the scroll direction needed |
| 234 | + cy.get('#scroll-vertical button').scrollIntoView() |
| 235 | + .should('be.visible') |
| 236 | + |
| 237 | + cy.get('#scroll-both button') |
| 238 | + .should('not.be.visible') |
| 239 | + |
| 240 | + // Cypress knows to scroll to the right and down |
| 241 | + cy.get('#scroll-both button').scrollIntoView() |
| 242 | + .should('be.visible') |
| 243 | + }) |
| 244 | + |
| 245 | + it('.trigger() - trigger an event on a DOM element', () => { |
| 246 | + // https://on.cypress.io/trigger |
| 247 | + |
| 248 | + // To interact with a range input (slider) |
| 249 | + // we need to set its value & trigger the |
| 250 | + // event to signal it changed |
| 251 | + |
| 252 | + // Here, we invoke jQuery's val() method to set |
| 253 | + // the value and trigger the 'change' event |
| 254 | + cy.get('.trigger-input-range') |
| 255 | + .invoke('val', 25) |
| 256 | + .trigger('change') |
| 257 | + .get('input[type=range]').siblings('p') |
| 258 | + .should('have.text', '25') |
| 259 | + }) |
| 260 | + |
| 261 | + it('cy.scrollTo() - scroll the window or element to a position', () => { |
| 262 | + |
| 263 | + // https://on.cypress.io/scrollTo |
| 264 | + |
| 265 | + // You can scroll to 9 specific positions of an element: |
| 266 | + // ----------------------------------- |
| 267 | + // | topLeft top topRight | |
| 268 | + // | | |
| 269 | + // | | |
| 270 | + // | | |
| 271 | + // | left center right | |
| 272 | + // | | |
| 273 | + // | | |
| 274 | + // | | |
| 275 | + // | bottomLeft bottom bottomRight | |
| 276 | + // ----------------------------------- |
| 277 | + |
| 278 | + // if you chain .scrollTo() off of cy, we will |
| 279 | + // scroll the entire window |
| 280 | + cy.scrollTo('bottom') |
| 281 | + |
| 282 | + cy.get('#scrollable-horizontal').scrollTo('right') |
| 283 | + |
| 284 | + // or you can scroll to a specific coordinate: |
| 285 | + // (x axis, y axis) in pixels |
| 286 | + cy.get('#scrollable-vertical').scrollTo(250, 250) |
| 287 | + |
| 288 | + // or you can scroll to a specific percentage |
| 289 | + // of the (width, height) of the element |
| 290 | + cy.get('#scrollable-both').scrollTo('75%', '25%') |
| 291 | + |
| 292 | + // control the easing of the scroll (default is 'swing') |
| 293 | + cy.get('#scrollable-vertical').scrollTo('center', { easing: 'linear' }) |
| 294 | + |
| 295 | + // control the duration of the scroll (in ms) |
| 296 | + cy.get('#scrollable-both').scrollTo('center', { duration: 2000 }) |
| 297 | + }) |
| 298 | +}) |
0 commit comments