How to use scrollto method in Cypress

Best JavaScript code snippet using cypress

scroll_spec.js

Source:scroll_spec.js Github

copy

Full Screen

1const { $ } = Cypress.$Cypress2const { _ } = Cypress3describe('src/cy/commands/actions/scroll', () => {4 before(() => {5 cy6 .visit('/fixtures/scrolling.html')7 .then(function (win) {8 this.body = win.document.body.outerHTML9 })10 })11 beforeEach(function () {12 const doc = cy.state('document')13 $(doc.body).empty().html(this.body)14 cy.viewport(600, 200)15 })16 context('#scrollTo', () => {17 beforeEach(function () {18 this.win = cy.state('window')19 this.scrollVert = cy.$$('#scroll-to-vertical')20 this.scrollHoriz = cy.$$('#scroll-to-horizontal')21 this.scrollBoth = cy.$$('#scroll-to-both')22 // reset the scrollable containers back23 // to furthest left and top24 this.win.scrollTop = 025 this.win.scrollLeft = 026 this.scrollVert.scrollTop = 027 this.scrollVert.scrollLeft = 028 this.scrollHoriz.scrollTop = 029 this.scrollHoriz.scrollLeft = 030 this.scrollBoth.scrollTop = 031 this.scrollBoth.scrollLeft = 032 })33 describe('subject', () => {34 it('is window by default', () => {35 cy.scrollTo('125px').then(function (win2) {36 expect(this.win).to.eq(win2)37 })38 })39 it('is DOM', () => {40 cy.get('#scroll-to-vertical').scrollTo('125px').then(function ($el) {41 expect($el.get(0)).to.eq(this.scrollVert.get(0))42 })43 })44 it('can use window', () => {45 cy.window().scrollTo('10px').then((win) => {46 expect(win.scrollX).to.eq(10)47 })48 })49 it('can handle window w/length > 1 as a subject', () => {50 cy.visit('/fixtures/dom.html')51 cy.window().should('have.length.gt', 1)52 .scrollTo('10px')53 })54 })55 describe('x axis only', () => {56 it('scrolls x axis to num px', function () {57 expect(this.scrollHoriz.get(0).scrollTop).to.eq(0)58 expect(this.scrollHoriz.get(0).scrollLeft).to.eq(0)59 cy.get('#scroll-to-horizontal').scrollTo(300).then(function () {60 expect(this.scrollHoriz.get(0).scrollTop).to.eq(0)61 expect(this.scrollHoriz.get(0).scrollLeft).to.eq(300)62 })63 })64 it('scrolls x axis to px', function () {65 expect(this.scrollHoriz.get(0).scrollTop).to.eq(0)66 expect(this.scrollHoriz.get(0).scrollLeft).to.eq(0)67 cy.get('#scroll-to-horizontal').scrollTo('125px').then(function () {68 expect(this.scrollHoriz.get(0).scrollTop).to.eq(0)69 expect(this.scrollHoriz.get(0).scrollLeft).to.eq(125)70 })71 })72 it('scrolls x axis by % of scrollable height', function () {73 expect(this.scrollHoriz.get(0).scrollTop).to.eq(0)74 expect(this.scrollHoriz.get(0).scrollLeft).to.eq(0)75 cy.get('#scroll-to-horizontal').scrollTo('50%').then(function () {76 // they don't calculate the height of the container77 // in the percentage of the scroll (since going the height78 // of the container wouldn't scroll at all...)79 expect(this.scrollHoriz.get(0).scrollTop).to.eq(0)80 expect(this.scrollHoriz.get(0).scrollLeft).to.eq((500 - 100) / 2)81 })82 })83 })84 describe('position arguments', () => {85 it('scrolls x/y axis to topLeft', function () {86 expect(this.scrollBoth.get(0).scrollTop).to.eq(0)87 expect(this.scrollBoth.get(0).scrollLeft).to.eq(0)88 cy.get('#scroll-to-both').scrollTo('topLeft').then(function () {89 expect(this.scrollBoth.get(0).scrollTop).to.eq(0)90 expect(this.scrollBoth.get(0).scrollLeft).to.eq(0)91 })92 })93 it('scrolls x/y axis to top', function () {94 expect(this.scrollBoth.get(0).scrollTop).to.eq(0)95 expect(this.scrollBoth.get(0).scrollLeft).to.eq(0)96 cy.get('#scroll-to-both').scrollTo('top').then(function () {97 expect(this.scrollBoth.get(0).scrollTop).to.eq(0)98 expect(this.scrollBoth.get(0).scrollLeft).to.eq((500 - 100) / 2)99 })100 })101 it('scrolls x/y axis to topRight', function () {102 expect(this.scrollBoth.get(0).scrollTop).to.eq(0)103 expect(this.scrollBoth.get(0).scrollLeft).to.eq(0)104 cy.get('#scroll-to-both').scrollTo('topRight').then(function () {105 expect(this.scrollBoth.get(0).scrollTop).to.eq(0)106 expect(this.scrollBoth.get(0).scrollLeft).to.eq((500 - 100))107 })108 })109 it('scrolls x/y axis to left', function () {110 expect(this.scrollBoth.get(0).scrollTop).to.eq(0)111 expect(this.scrollBoth.get(0).scrollLeft).to.eq(0)112 cy.get('#scroll-to-both').scrollTo('left').then(function () {113 expect(this.scrollBoth.get(0).scrollTop).to.eq((500 - 100) / 2)114 expect(this.scrollBoth.get(0).scrollLeft).to.eq(0)115 })116 })117 it('scrolls x/y axis to center', function () {118 expect(this.scrollBoth.get(0).scrollTop).to.eq(0)119 expect(this.scrollBoth.get(0).scrollLeft).to.eq(0)120 cy.get('#scroll-to-both').scrollTo('center').then(function () {121 expect(this.scrollBoth.get(0).scrollTop).to.eq((500 - 100) / 2)122 expect(this.scrollBoth.get(0).scrollLeft).to.eq((500 - 100) / 2)123 })124 })125 it('scrolls x/y axis to right', function () {126 expect(this.scrollBoth.get(0).scrollTop).to.eq(0)127 expect(this.scrollBoth.get(0).scrollLeft).to.eq(0)128 cy.get('#scroll-to-both').scrollTo('right').then(function () {129 expect(this.scrollBoth.get(0).scrollTop).to.eq((500 - 100) / 2)130 expect(this.scrollBoth.get(0).scrollLeft).to.eq((500 - 100))131 })132 })133 it('scrolls x/y axis to bottomLeft', function () {134 expect(this.scrollBoth.get(0).scrollTop).to.eq(0)135 expect(this.scrollBoth.get(0).scrollLeft).to.eq(0)136 cy.get('#scroll-to-both').scrollTo('bottomLeft').then(function () {137 expect(this.scrollBoth.get(0).scrollTop).to.eq((500 - 100))138 expect(this.scrollBoth.get(0).scrollLeft).to.eq(0)139 })140 })141 it('scrolls x/y axis to bottom', function () {142 expect(this.scrollBoth.get(0).scrollTop).to.eq(0)143 expect(this.scrollBoth.get(0).scrollLeft).to.eq(0)144 cy.get('#scroll-to-both').scrollTo('bottom').then(function () {145 expect(this.scrollBoth.get(0).scrollTop).to.eq((500 - 100))146 expect(this.scrollBoth.get(0).scrollLeft).to.eq((500 - 100) / 2)147 })148 })149 it('scrolls x/y axis to bottomRight', function () {150 expect(this.scrollBoth.get(0).scrollTop).to.eq(0)151 expect(this.scrollBoth.get(0).scrollLeft).to.eq(0)152 cy.get('#scroll-to-both').scrollTo('bottomRight').then(function () {153 expect(this.scrollBoth.get(0).scrollTop).to.eq((500 - 100))154 expect(this.scrollBoth.get(0).scrollLeft).to.eq((500 - 100))155 })156 })157 })158 describe('scroll both axis', () => {159 it('scrolls both x and y axis num of px', function () {160 expect(this.scrollBoth.get(0).scrollTop).to.eq(0)161 expect(this.scrollBoth.get(0).scrollLeft).to.eq(0)162 cy.get('#scroll-to-both').scrollTo(300, 150).then(function () {163 expect(this.scrollBoth.get(0).scrollTop).to.eq(150)164 expect(this.scrollBoth.get(0).scrollLeft).to.eq(300)165 })166 })167 it('scrolls x to 0 and y num of px', function () {168 expect(this.scrollBoth.get(0).scrollTop).to.eq(0)169 expect(this.scrollBoth.get(0).scrollLeft).to.eq(0)170 cy.get('#scroll-to-both').scrollTo(0, 150).then(function () {171 expect(this.scrollBoth.get(0).scrollTop).to.eq(150)172 expect(this.scrollBoth.get(0).scrollLeft).to.eq(0)173 })174 })175 it('scrolls x num of px and y to 0 ', function () {176 expect(this.scrollBoth.get(0).scrollTop).to.eq(0)177 expect(this.scrollBoth.get(0).scrollLeft).to.eq(0)178 cy.get('#scroll-to-both').scrollTo(150, 0).then(function () {179 expect(this.scrollBoth.get(0).scrollTop).to.eq(0)180 expect(this.scrollBoth.get(0).scrollLeft).to.eq(150)181 })182 })183 it('scrolls both x and y axis of px', function () {184 expect(this.scrollBoth.get(0).scrollTop).to.eq(0)185 expect(this.scrollBoth.get(0).scrollLeft).to.eq(0)186 cy.get('#scroll-to-both').scrollTo('300px', '150px').then(function () {187 expect(this.scrollBoth.get(0).scrollTop).to.eq(150)188 expect(this.scrollBoth.get(0).scrollLeft).to.eq(300)189 })190 })191 it('scrolls both x and y axis of percentage', function () {192 expect(this.scrollBoth.get(0).scrollTop).to.eq(0)193 expect(this.scrollBoth.get(0).scrollLeft).to.eq(0)194 cy.get('#scroll-to-both').scrollTo('50%', '50%').then(function () {195 expect(this.scrollBoth.get(0).scrollTop).to.eq((500 - 100) / 2)196 expect(this.scrollBoth.get(0).scrollLeft).to.eq((500 - 100) / 2)197 })198 })199 it('scrolls x to 0 and y percentage', function () {200 expect(this.scrollBoth.get(0).scrollTop).to.eq(0)201 expect(this.scrollBoth.get(0).scrollLeft).to.eq(0)202 cy.get('#scroll-to-both').scrollTo('0%', '50%').then(function () {203 expect(this.scrollBoth.get(0).scrollTop).to.eq((500 - 100) / 2)204 expect(this.scrollBoth.get(0).scrollLeft).to.eq(0)205 })206 })207 it('scrolls x to percentage and y to 0', function () {208 expect(this.scrollBoth.get(0).scrollTop).to.eq(0)209 expect(this.scrollBoth.get(0).scrollLeft).to.eq(0)210 cy.get('#scroll-to-both').scrollTo('50%', '0%').then(function () {211 expect(this.scrollBoth.get(0).scrollTop).to.eq(0)212 expect(this.scrollBoth.get(0).scrollLeft).to.eq((500 - 100) / 2)213 })214 })215 })216 describe('scrolls with options', () => {217 it('calls jQuery scroll to', () => {218 const scrollTo = cy.spy($.fn, 'scrollTo')219 cy.get('#scroll-to-both').scrollTo('25px').then(() => {220 expect(scrollTo).to.be.calledWith({ left: '25px', top: 0 })221 })222 })223 it('sets duration to 0 by default', () => {224 const scrollTo = cy.spy($.fn, 'scrollTo')225 cy.get('#scroll-to-both').scrollTo('25px').then(() => {226 expect(scrollTo).to.be.calledWithMatch({}, { duration: 0 })227 })228 })229 it('sets axis to correct xy', () => {230 const scrollTo = cy.spy($.fn, 'scrollTo')231 cy.get('#scroll-to-both').scrollTo('25px', '80px').then(() => {232 expect(scrollTo).to.be.calledWithMatch({}, { axis: 'xy' })233 })234 })235 it('scrolling resolves after a set duration', function () {236 expect(this.scrollHoriz.get(0).scrollTop).to.eq(0)237 expect(this.scrollHoriz.get(0).scrollLeft).to.eq(0)238 const scrollTo = cy.spy($.fn, 'scrollTo')239 cy.get('#scroll-to-horizontal').scrollTo('125px', { duration: 500 }).then(function () {240 expect(scrollTo).to.be.calledWithMatch({}, { duration: 500 })241 expect(this.scrollHoriz.get(0).scrollTop).to.eq(0)242 expect(this.scrollHoriz.get(0).scrollLeft).to.eq(125)243 })244 })245 it('accepts duration string option', () => {246 const scrollTo = cy.spy($.fn, 'scrollTo')247 cy.get('#scroll-to-both').scrollTo('25px', { duration: '500' }).then(() => {248 expect(scrollTo.args[0][1].duration).to.eq('500')249 })250 })251 it('has easing set to swing by default', () => {252 const scrollTo = cy.spy($.fn, 'scrollTo')253 cy.get('#scroll-to-both').scrollTo('25px').then(() => {254 expect(scrollTo.args[0][1].easing).to.eq('swing')255 })256 })257 it('scrolling resolves after easing', function () {258 expect(this.scrollBoth.get(0).scrollTop).to.eq(0)259 expect(this.scrollBoth.get(0).scrollLeft).to.eq(0)260 const scrollTo = cy.spy($.fn, 'scrollTo')261 cy.get('#scroll-to-both').scrollTo('25px', '50px', { easing: 'linear' }).then(function () {262 expect(scrollTo).to.be.calledWithMatch({}, { easing: 'linear' })263 expect(this.scrollBoth.get(0).scrollTop).to.eq(50)264 expect(this.scrollBoth.get(0).scrollLeft).to.eq(25)265 })266 })267 it('retries until element is scrollable', () => {268 const $container = cy.$$('#nonscroll-becomes-scrollable')269 expect($container.get(0).scrollTop).to.eq(0)270 expect($container.get(0).scrollLeft).to.eq(0)271 let retried = false272 cy.on('command:retry', _.after(2, () => {273 $container.css('overflow', 'scroll')274 retried = true275 }))276 cy.get('#nonscroll-becomes-scrollable').scrollTo(500, 300).then(() => {277 expect(retried).to.be.true278 expect($container.get(0).scrollTop).to.eq(300)279 expect($container.get(0).scrollLeft).to.eq(500)280 })281 })282 // https://github.com/cypress-io/cypress/issues/1924283 it('skips scrollability check', () => {284 const scrollTo = cy.spy($.fn, 'scrollTo')285 cy.get('button:first').scrollTo('bottom', { ensureScrollable: false }).then(() => {286 cy.stub(cy, 'ensureScrollability')287 expect(scrollTo).to.be.calledWithMatch({}, { ensureScrollable: false })288 expect(cy.ensureScrollability).not.to.be.called289 })290 })291 })292 describe('assertion verification', () => {293 beforeEach(function () {294 cy.on('log:added', (attrs, log) => {295 if (log.get('name') === 'assert') {296 this.lastLog = log297 }298 })299 return null300 })301 it('eventually passes the assertion', () => {302 cy.on('command:retry', _.after(2, () => {303 cy.$$('#scroll-into-view-horizontal').addClass('scrolled')304 }))305 cy306 .get('#scroll-into-view-horizontal')307 .scrollTo('right')308 .should('have.class', 'scrolled').then(function () {309 const { lastLog } = this310 expect(lastLog.get('name')).to.eq('assert')311 expect(lastLog.get('state')).to.eq('passed')312 expect(lastLog.get('ended')).to.be.true313 })314 })315 it('waits until the subject is scrollable', () => {316 cy.stub(cy, 'ensureScrollability')317 .onFirstCall().throws(new Error())318 cy.on('command:retry', () => {319 return cy.ensureScrollability.returns()320 })321 cy322 .get('#scroll-into-view-horizontal')323 .scrollTo('right').then(() => {324 expect(cy.ensureScrollability).to.be.calledTwice325 })326 })327 })328 describe('errors', {329 defaultCommandTimeout: 50,330 }, () => {331 beforeEach(function () {332 this.logs = []333 cy.on('log:added', (attrs, log) => {334 this.lastLog = log335 this.logs.push(log)336 })337 return null338 })339 it('throws when subject isn\'t scrollable', (done) => {340 cy.on('fail', (err) => {341 expect(err.message).to.include('`cy.scrollTo()` failed because this element is not scrollable:')342 expect(err.message).to.include(`\`<button>button</button>\``)343 expect(err.message).to.include('Make sure you\'re targeting the correct element or use `{ensureScrollable: false}` to disable the scrollable check.')344 expect(err.docsUrl).to.eq('https://on.cypress.io/scrollto')345 done()346 })347 cy.get('button:first').scrollTo('bottom')348 })349 context('subject errors', () => {350 it('throws when not passed DOM element as subject', (done) => {351 cy.on('fail', (err) => {352 expect(err.message).to.include('`cy.scrollTo()` failed because it requires a DOM element.')353 expect(err.message).to.include('{foo: bar}')354 expect(err.message).to.include('> `cy.noop()`')355 done()356 })357 cy.noop({ foo: 'bar' }).scrollTo('250px')358 })359 it('throws if scrollable container is multiple elements', (done) => {360 cy.on('fail', (err) => {361 expect(err.message).to.include('`cy.scrollTo()` can only be used to scroll 1 element, you tried to scroll 2 elements.')362 expect(err.docsUrl).to.eq('https://on.cypress.io/scrollto')363 done()364 })365 cy.get('button').scrollTo('500px')366 })367 })368 context('argument errors', () => {369 it('throws if no args passed', (done) => {370 cy.on('fail', (err) => {371 expect(err.message).to.include('`cy.scrollTo()` must be called with a valid `position`. It can be a string, number or object.')372 expect(err.docsUrl).to.eq('https://on.cypress.io/scrollto')373 done()374 })375 cy.scrollTo()376 })377 it('throws if NaN', (done) => {378 cy.on('fail', (err) => {379 expect(err.message).to.include('`cy.scrollTo()` must be called with a valid `position`. It can be a string, number or object. Your position was: `25, NaN`')380 expect(err.docsUrl).to.eq('https://on.cypress.io/scrollto')381 done()382 })383 cy.get('#scroll-to-both').scrollTo(25, 0 / 0)384 })385 it('throws if Infinity', (done) => {386 cy.on('fail', (err) => {387 expect(err.message).to.include('`cy.scrollTo()` must be called with a valid `position`. It can be a string, number or object. Your position was: `25, Infinity`')388 expect(err.docsUrl).to.eq('https://on.cypress.io/scrollto')389 done()390 })391 cy.get('#scroll-to-both').scrollTo(25, 10 / 0)392 })393 it('throws if unrecognized position', (done) => {394 cy.on('fail', (err) => {395 expect(err.message).to.include('Invalid position argument: `botom`. Position may only be topLeft, top, topRight, left, center, right, bottomLeft, bottom, bottomRight.')396 done()397 })398 cy.get('#scroll-to-both').scrollTo('botom')399 })400 })401 context('option errors', () => {402 it('throws if duration is not a number or valid string', (done) => {403 cy.on('fail', (err) => {404 expect(err.message).to.include('`cy.scrollTo()` must be called with a valid `duration`. Duration may be either a number (ms) or a string representing a number (ms). Your duration was: `foo`')405 expect(err.docsUrl).to.eq('https://on.cypress.io/scrollto')406 done()407 })408 cy.get('#scroll-to-both').scrollTo('25px', { duration: 'foo' })409 })410 it('throws if unrecognized easing', (done) => {411 cy.on('fail', (err) => {412 expect(err.message).to.include('`cy.scrollTo()` must be called with a valid `easing`. Your easing was: `flower`')413 expect(err.docsUrl).to.eq('https://on.cypress.io/scrollto')414 done()415 })416 cy.get('#scroll-to-both').scrollTo('25px', { easing: 'flower' })417 })418 it('throws if ensureScrollable is not a boolean', (done) => {419 cy.on('fail', (err) => {420 expect(err.message).to.include('`cy.scrollTo()` `ensureScrollable` option must be a boolean. You passed: `force`')421 expect(err.docsUrl).to.eq('https://on.cypress.io/scrollto')422 done()423 })424 cy.get('button:first').scrollTo('bottom', { ensureScrollable: 'force' })425 })426 })427 })428 describe('.log', () => {429 beforeEach(function () {430 this.logs = []431 cy.on('log:added', (attrs, log) => {432 this.lastLog = log433 return this.logs.push(log)434 })435 return null436 })437 it('logs out scrollTo', () => {438 cy.get('#scroll-to-both').scrollTo(25).then(function () {439 const { lastLog } = this440 expect(lastLog.get('name')).to.eq('scrollTo')441 })442 })443 it('passes in $el if child command', () => {444 cy.get('#scroll-to-both').scrollTo(25).then(function ($container) {445 const { lastLog } = this446 expect(lastLog.get('$el').get(0)).to.eq($container.get(0))447 })448 })449 it('passes undefined in $el if parent command', () => {450 cy.scrollTo(25).then(function () {451 const { lastLog } = this452 expect(lastLog.get('$el')).to.be.undefined453 })454 })455 it('logs duration options', () => {456 cy.get('#scroll-to-both').scrollTo(25, { duration: 1 }).then(function () {457 const { lastLog } = this458 expect(lastLog.get('message')).to.eq('25, 0, {duration: 1}')459 })460 })461 it('logs easing options', () => {462 cy.get('#scroll-to-both').scrollTo(25, { easing: 'linear' }).then(function () {463 const { lastLog } = this464 expect(lastLog.get('message')).to.eq('25, 0, {easing: linear}')465 })466 })467 it('snapshots immediately', () => {468 cy.get('#scroll-to-both').scrollTo(25, { duration: 1 }).then(function () {469 const { lastLog } = this470 expect(lastLog.get('snapshots').length).to.eq(1)471 expect(lastLog.get('snapshots')[0]).to.be.an('object')472 })473 })474 it('#consoleProps', () => {475 cy.get('#scroll-to-both').scrollTo(25, { duration: 1 }).then(function ($container) {476 const console = this.lastLog.invoke('consoleProps')477 expect(console.Command).to.eq('scrollTo')478 expect(console.X).to.eq(25)479 expect(console.Y).to.eq(0)480 expect(console.Options).to.eq('{duration: 1}')481 expect(console['Scrolled Element']).to.eq($container.get(0))482 })483 })484 })485 })486 context('#scrollIntoView', () => {487 beforeEach(function () {488 this.win = cy.state('window')489 this.scrollVert = cy.$$('#scroll-into-view-vertical')490 this.scrollHoriz = cy.$$('#scroll-into-view-horizontal')491 this.scrollBoth = cy.$$('#scroll-into-view-both')492 // reset the scrollable containers back493 // to furthest left and top494 this.win.scrollTo(0, 0)495 this.scrollVert.scrollTop(0)496 this.scrollVert.scrollLeft(0)497 this.scrollHoriz.scrollTop(0)498 this.scrollHoriz.scrollLeft(0)499 this.scrollBoth.scrollTop(0)500 this.scrollBoth.scrollLeft(0)501 })502 it('does not change the subject', () => {503 const div = cy.$$('#scroll-into-view-vertical div')504 cy.get('#scroll-into-view-vertical div').scrollIntoView().then(($div) => {505 expect($div).to.match(div)506 })507 })508 it('scrolls x axis of window to element', function () {509 expect(this.win.scrollY).to.eq(0)510 expect(this.win.scrollX).to.eq(0)511 cy.get('#scroll-into-view-win-horizontal div').scrollIntoView()512 cy.window().then((win) => {513 expect(win.scrollY).to.eq(0)514 expect(win.scrollX).not.to.eq(0)515 })516 })517 it('scrolls y axis of window to element', function () {518 expect(this.win.scrollY).to.eq(0)519 expect(this.win.scrollX).to.eq(0)520 cy.get('#scroll-into-view-win-vertical div').scrollIntoView()521 cy.window().then((win) => {522 expect(win.pageYOffset).not.to.eq(0)523 expect(Math.floor(win.pageXOffset)).closeTo(200, 2)524 })525 })526 it('scrolls both axes of window to element', function () {527 expect(this.win.scrollY).to.eq(0)528 expect(this.win.scrollX).to.eq(0)529 cy.get('#scroll-into-view-win-both div').scrollIntoView()530 cy.window().then((win) => {531 expect(win.scrollY).not.to.eq(0)532 expect(win.scrollX).not.to.eq(0)533 })534 })535 it('scrolls x axis of container to element', function () {536 expect(this.scrollHoriz.get(0).scrollTop).to.eq(0)537 expect(this.scrollHoriz.get(0).scrollLeft).to.eq(0)538 cy.get('#scroll-into-view-horizontal h5').scrollIntoView().then(function () {539 expect(this.scrollHoriz.get(0).scrollTop).to.eq(0)540 expect(this.scrollHoriz.get(0).scrollLeft).to.eq(300)541 })542 })543 it('scrolls y axis of container to element', function () {544 expect(this.scrollVert.get(0).scrollTop).to.eq(0)545 expect(this.scrollVert.get(0).scrollLeft).to.eq(0)546 cy.get('#scroll-into-view-vertical h5').scrollIntoView().then(function () {547 expect(this.scrollVert.get(0).scrollTop).to.eq(300)548 expect(this.scrollVert.get(0).scrollLeft).to.eq(0)549 })550 })551 it('scrolls both axes of container to element', function () {552 expect(this.scrollBoth.get(0).scrollTop).to.eq(0)553 expect(this.scrollBoth.get(0).scrollLeft).to.eq(0)554 cy.get('#scroll-into-view-both h5').scrollIntoView().then(function () {555 expect(this.scrollBoth.get(0).scrollTop).to.eq(300)556 expect(this.scrollBoth.get(0).scrollLeft).to.eq(300)557 })558 })559 it('calls jQuery scroll to', () => {560 const scrollTo = cy.spy($.fn, 'scrollTo')561 cy.get('#scroll-into-view-both h5').scrollIntoView().then(() => {562 expect(scrollTo).to.be.called563 })564 })565 it('sets duration to 0 by default', () => {566 const scrollTo = cy.spy($.fn, 'scrollTo')567 cy.get('#scroll-into-view-both h5').scrollIntoView().then(() => {568 expect(scrollTo).to.be.calledWithMatch({}, { duration: 0 })569 })570 })571 it('sets axis to correct x or y', () => {572 const scrollTo = cy.spy($.fn, 'scrollTo')573 cy.get('#scroll-into-view-both h5').scrollIntoView().then(() => {574 expect(scrollTo).to.be.calledWithMatch({}, { axis: 'xy' })575 })576 })577 it('scrolling resolves after a set duration', function () {578 expect(this.scrollBoth.get(0).scrollTop).to.eq(0)579 expect(this.scrollBoth.get(0).scrollLeft).to.eq(0)580 const scrollTo = cy.spy($.fn, 'scrollTo')581 cy.get('#scroll-into-view-both h5').scrollIntoView({ duration: 500 }).then(function () {582 expect(scrollTo).to.be.calledWithMatch({}, { duration: 500 })583 expect(this.scrollBoth.get(0).scrollLeft).to.eq(300)584 expect(this.scrollBoth.get(0).scrollTop).to.eq(300)585 })586 })587 it('accepts duration string option', () => {588 const scrollTo = cy.spy($.fn, 'scrollTo')589 cy.get('#scroll-into-view-both h5').scrollIntoView({ duration: '500' }).then(() => {590 expect(scrollTo.args[0][1].duration).to.eq('500')591 })592 })593 it('accepts offset string option', () => {594 const scrollTo = cy.spy($.fn, 'scrollTo')595 cy.get('#scroll-into-view-both h5').scrollIntoView({ offset: 500 }).then(() => {596 expect(scrollTo.args[0][1].offset).to.eq(500)597 })598 })599 it('accepts offset object option', () => {600 const scrollTo = cy.spy($.fn, 'scrollTo')601 cy.get('#scroll-into-view-both h5').scrollIntoView({ offset: { left: 500, top: 200 } }).then(() => {602 expect(scrollTo.args[0][1].offset).to.deep.eq({ left: 500, top: 200 })603 })604 })605 it('has easing set to swing by default', () => {606 const scrollTo = cy.spy($.fn, 'scrollTo')607 cy.get('#scroll-into-view-both h5').scrollIntoView().then(() => {608 expect(scrollTo.args[0][1].easing).to.eq('swing')609 })610 })611 it('scrolling resolves after easing', function () {612 expect(this.scrollBoth.get(0).scrollTop).to.eq(0)613 expect(this.scrollBoth.get(0).scrollLeft).to.eq(0)614 const scrollTo = cy.spy($.fn, 'scrollTo')615 cy.get('#scroll-into-view-both h5').scrollIntoView({ easing: 'linear' }).then(function () {616 expect(scrollTo).to.be.calledWithMatch({}, { easing: 'linear' })617 expect(this.scrollBoth.get(0).scrollTop).to.eq(300)618 expect(this.scrollBoth.get(0).scrollLeft).to.eq(300)619 })620 })621 describe('shadow dom', () => {622 beforeEach(() => {623 cy.visit('/fixtures/shadow-dom.html')624 })625 // https://github.com/cypress-io/cypress/issues/7986626 it('does not hang', () => {627 cy.get('.shadow-1', { includeShadowDom: true }).scrollIntoView()628 })629 })630 describe('assertion verification', () => {631 beforeEach(function () {632 cy.on('log:added', (attrs, log) => {633 if (log.get('name') === 'assert') {634 this.lastLog = log635 }636 })637 return null638 })639 it('eventually passes the assertion', () => {640 cy.on('command:retry', _.after(2, () => {641 cy.$$('#scroll-into-view-win-vertical div').addClass('scrolled')642 }))643 cy644 .contains('scroll into view vertical')645 .scrollIntoView()646 .should('have.class', 'scrolled').then(function () {647 const { lastLog } = this648 expect(lastLog.get('name')).to.eq('assert')649 expect(lastLog.get('state')).to.eq('passed')650 expect(lastLog.get('ended')).to.be.true651 })652 })653 })654 describe('errors', {655 defaultCommandTimeout: 50,656 }, () => {657 beforeEach(function () {658 this.logs = []659 cy.on('log:added', (attrs, log) => {660 this.lastLog = log661 return this.logs.push(log)662 })663 return null664 })665 context('subject errors', () => {666 it('throws when not passed DOM element as subject', (done) => {667 cy.on('fail', (err) => {668 expect(err.message).to.include('`cy.scrollIntoView()` failed because it requires a DOM element.')669 expect(err.message).to.include('{foo: bar}')670 expect(err.message).to.include('> `cy.noop()`')671 done()672 })673 cy.noop({ foo: 'bar' }).scrollIntoView()674 })675 it('throws when passed window object as subject', (done) => {676 cy.on('fail', (err) => {677 expect(err.message).to.include('`cy.scrollIntoView()` failed because it requires a DOM element.')678 expect(err.message).to.include('<window>')679 expect(err.message).to.include('> `cy.window()`')680 done()681 })682 cy.window().scrollIntoView()683 })684 it('throws when passed document object as subject', (done) => {685 cy.on('fail', (err) => {686 expect(err.message).to.include('`cy.scrollIntoView()` failed because it requires a DOM element.')687 expect(err.message).to.include('<document>')688 expect(err.message).to.include('> `cy.document()`')689 done()690 })691 cy.document().scrollIntoView()692 })693 it('throws if scrollable container is multiple elements', (done) => {694 cy.on('fail', (err) => {695 expect(err.message).to.include('`cy.scrollIntoView()` can only be used to scroll to 1 element, you tried to scroll to 2 elements.')696 expect(err.docsUrl).to.include('https://on.cypress.io/scrollintoview')697 done()698 })699 cy.get('button').scrollIntoView()700 })701 })702 context('argument errors', () => {703 it('throws if arg passed as non-object', (done) => {704 cy.on('fail', (err) => {705 expect(err.message).to.include('`cy.scrollIntoView()` can only be called with an `options` object. Your argument was: `foo`')706 expect(err.docsUrl).to.eq('https://on.cypress.io/scrollintoview')707 done()708 })709 cy.get('#scroll-into-view-both h5').scrollIntoView('foo')710 })711 })712 context('option errors', () => {713 it('throws if duration is not a number or valid string', (done) => {714 cy.on('fail', (err) => {715 expect(err.message).to.include('`cy.scrollIntoView()` must be called with a valid `duration`. Duration may be either a number (ms) or a string representing a number (ms). Your duration was: `foo`')716 expect(err.docsUrl).to.include('https://on.cypress.io/scrollintoview')717 done()718 })719 cy.get('#scroll-into-view-both h5').scrollIntoView({ duration: 'foo' })720 })721 it('throws if unrecognized easing', (done) => {722 cy.on('fail', (err) => {723 expect(err.message).to.include('`cy.scrollIntoView()` must be called with a valid `easing`. Your easing was: `flower`')724 expect(err.docsUrl).to.include('https://on.cypress.io/scrollintoview')725 done()726 })727 cy.get('#scroll-into-view-both h5').scrollIntoView({ easing: 'flower' })728 })729 })730 })731 describe('.log', () => {732 beforeEach(function () {733 this.logs = []734 cy.on('log:added', (attrs, log) => {735 this.lastLog = log736 return this.logs.push(log)737 })738 return null739 })740 it('logs out scrollIntoView', () => {741 cy.get('#scroll-into-view-both h5').scrollIntoView().then(function () {742 const { lastLog } = this743 expect(lastLog.get('name')).to.eq('scrollIntoView')744 })745 })746 it('passes in $el', () => {747 cy.get('#scroll-into-view-both h5').scrollIntoView().then(function ($container) {748 const { lastLog } = this749 expect(lastLog.get('$el').get(0)).to.eq($container.get(0))750 })751 })752 it('logs duration options', () => {753 cy.get('#scroll-into-view-both h5').scrollIntoView({ duration: '1' }).then(function () {754 const { lastLog } = this755 expect(lastLog.get('message')).to.eq('{duration: 1}')756 })757 })758 it('logs easing options', () => {759 cy.get('#scroll-into-view-both h5').scrollIntoView({ easing: 'linear' }).then(function () {760 const { lastLog } = this761 expect(lastLog.get('message')).to.eq('{easing: linear}')762 })763 })764 it('logs offset options', () => {765 cy.get('#scroll-into-view-both h5').scrollIntoView({ offset: { left: 500, top: 200 } }).then(function () {766 const { lastLog } = this767 expect(lastLog.get('message')).to.eq('{offset: {left: 500, top: 200}}')768 })769 })770 it('snapshots immediately', () => {771 cy.get('#scroll-into-view-both h5').scrollIntoView().then(function () {772 const { lastLog } = this773 expect(lastLog.get('snapshots').length).to.eq(1)774 expect(lastLog.get('snapshots')[0]).to.be.an('object')775 })776 })777 it('#consoleProps', () => {778 cy.get('#scroll-into-view-both h5').scrollIntoView().then(function ($container) {779 const console = this.lastLog.invoke('consoleProps')780 expect(console.Command).to.eq('scrollIntoView')781 expect(console['Applied To']).to.eq($container.get(0))782 expect(console['Scrolled Element']).to.exist783 })784 })785 })786 })...

Full Screen

Full Screen

history_init.js

Source:history_init.js Github

copy

Full Screen

1function checkAccess(hash){2 var url = '/Kilometer/CheckAccess/';3 jQuery.ajax({4 type: "POST",5 url: url,6 data: { km: hash },7 dataType: "json",8 success: function (data) {9 if(!data)10 window.location.href = '/Account/Login';11 }12 });13}14$(document).ready(function(){15 if($.browser.msie && $.browser.version == 8) {16 //$('#ie-info').text('You are using IE8 in version '+ document.documentMode +' compatible mode.');17 }18 19 //var base_url_1 = 'http://www.d16878353.u238.foretag.surftown.se';20 //var base_url_2 = 'http://www.d16878353.u238.foretag.surftown.se/';21 //var base_url_3 = 'http://d16878353.u238.foretag.surftown.se';22 var base_url_4 = 'http://www.megaronmba.com';23 var pathname = window.location;24 $.historyInit(function (hash) {25 26 //checkAccess(hash)27 28 if(hash) {29 30 if (hash == 'intro') {31 $('.menu-item').removeClass('mark');32 $('#sec_intro').addClass('mark');33 $.scrollTo('#modul_intro', 400, {easing:'easeInOutQuart', offset: -20, axis: 'x', onAfter:function(){ 34 // After the scroll35 36 }37 });38 }39 else if (hash == 'pre') {40 $('.menu-item').removeClass('mark');41 $('#sec_pre').addClass('mark');42 $.scrollTo('#modul_pre', 400, {easing:'easeInOutQuart', offset: 0, axis: 'x', onAfter:function(){ 43 // After the scroll44 45 }46 });47 }48 else if (hash == '-05') {49 $('.menu-item').removeClass('mark');50 $('#sec_-05').addClass('mark');51 $.scrollTo('#modul_-05', 400, {easing:'easeInOutQuart', offset: 0, axis: 'x', onAfter:function(){ 52 // After the scroll53 54 }55 });56 }57 else if (hash == '-04') {58 $('.menu-item').removeClass('mark');59 $('#sec_-04').addClass('mark');60 $.scrollTo('#modul_-04', 400, {easing:'easeInOutQuart', offset: 0, axis: 'x', onAfter:function(){ 61 // After the scroll62 63 }64 });65 }66 else if (hash == '-03') {67 $('.menu-item').removeClass('mark');68 $('#sec_-03').addClass('mark');69 $.scrollTo('#modul_-03', 400, {easing:'easeInOutQuart', offset: 0, axis: 'x', onAfter:function(){ 70 // After the scroll71 72 }73 });74 }75 else if (hash == '-02') {76 $('.menu-item').removeClass('mark');77 $('#sec_-02').addClass('mark');78 $.scrollTo('#modul_-02', 400, {easing:'easeInOutQuart', offset: 0, axis: 'x', onAfter:function(){ 79 // After the scroll80 81 }82 });83 }84 else if (hash == '-01') {85 $('.menu-item').removeClass('mark');86 $('#sec_-01').addClass('mark');87 $.scrollTo('#modul_-01', 400, {easing:'easeInOutQuart', offset: 0, axis: 'x', onAfter:function(){ 88 // After the scroll89 90 }91 });92 }93 else if (hash == 'zero') {94 $('.menu-item').removeClass('mark');95 $('#sec_zero').addClass('mark');96 $.scrollTo('#modul_zero', 400, {easing:'easeInOutQuart', offset: 0, axis: 'x', onAfter:function(){ 97 // After the scroll98 99 }100 });101 }102 else if (hash == '01') {103 $('.menu-item').removeClass('mark');104 $('#sec_01').addClass('mark');105 $.scrollTo('#modul_01', 400, {easing:'easeInOutQuart', offset: 0, axis: 'x', onAfter:function(){ 106 // After the scroll107 108 }109 });110 }111 else if (hash == '02') {112 $('.menu-item').removeClass('mark');113 $('#sec_02').addClass('mark');114 $.scrollTo('#modul_2', 400, {easing:'easeInOutQuart', offset: 0, axis: 'x', onAfter:function(){ 115 // After the scroll116 117 }118 });119 }120 121 else if (hash == '03') {122 $('.menu-item').removeClass('mark');123 $('#sec_03').addClass('mark');124 $.scrollTo('#modul_3', 400, {easing:'easeInOutQuart', offset: 0, axis: 'x', onAfter:function(){ 125 // After the scroll126 127 }128 });129 }130 131 else if (hash == '04') {132 $('.menu-item').removeClass('mark');133 $('#sec_04').addClass('mark');134 $.scrollTo('#modul_4', 400, {easing:'easeInOutQuart', offset: 0, axis: 'x', onAfter:function(){ 135 // After the scroll136 137 }138 });139 }140 141 else if (hash == '05') {142 $('.menu-item').removeClass('mark');143 $('#sec_05').addClass('mark');144 $.scrollTo('#modul_5', 400, {easing:'easeInOutQuart', offset: 0, axis: 'x', onAfter:function(){ 145 // After the scroll146 147 }148 });149 }150 151 else if (hash == '06') {152 $('.menu-item').removeClass('mark');153 $('#sec_06').addClass('mark');154 $.scrollTo('#modul_6', 400, {easing:'easeInOutQuart', offset: 0, axis: 'x', onAfter:function(){ 155 // After the scroll156 157 }158 });159 }160 161 else if (hash == '07') {162 $('.menu-item').removeClass('mark');163 $('#sec_07').addClass('mark');164 $.scrollTo('#modul_7', 400, {easing:'easeInOutQuart', offset: 0, axis: 'x', onAfter:function(){ 165 // After the scroll166 167 }168 });169 }170 171 else if (hash == '08') {172 $('.menu-item').removeClass('mark');173 $('#sec_08').addClass('mark');174 $.scrollTo('#modul_8', 400, {easing:'easeInOutQuart', offset: 0, axis: 'x', onAfter:function(){ 175 // After the scroll176 177 }178 });179 }180 else if (hash == '09') {181 $('.menu-item').removeClass('mark');182 $('#sec_09').addClass('mark');183 $.scrollTo('#modul_9', 400, {easing:'easeInOutQuart', offset: 0, axis: 'x', onAfter:function(){ 184 // After the scroll185 186 }187 });188 }189 else if (hash == '10') {190 $('.menu-item').removeClass('mark');191 $('#sec_10').addClass('mark');192 $.scrollTo('#modul_10', 400, {easing:'easeInOutQuart', offset: 0, axis: 'x', onAfter:function(){ 193 // After the scroll194 195 }196 });197 }198 else if (hash == '11') {199 $('.menu-item').removeClass('mark');200 $('#sec_11').addClass('mark');201 $.scrollTo('#modul_11', 400, {easing:'easeInOutQuart', offset: 0, axis: 'x', onAfter:function(){ 202 // After the scroll203 204 }205 });206 }207 208 else if (hash == '12') {209 $('.menu-item').removeClass('mark');210 $('#sec_12').addClass('mark');211 $.scrollTo('#modul_12', 400, {easing:'easeInOutQuart', offset: 0, axis: 'x', onAfter:function(){ 212 // After the scroll213 214 }215 });216 }217 else if (hash == '13') {218 $('.menu-item').removeClass('mark');219 $('#sec_13').addClass('mark');220 $.scrollTo('#modul_13', 400, {easing:'easeInOutQuart', offset: 0, axis: 'x', onAfter:function(){ 221 // After the scroll222 223 }224 });225 }226 else if (hash == '14') {227 $('.menu-item').removeClass('mark');228 $('#sec_14').addClass('mark');229 $.scrollTo('#modul_14', 400, {easing:'easeInOutQuart', offset: 0, axis: 'x', onAfter:function(){ 230 // After the scroll231 232 }233 });234 }235 else if (hash == '15') {236 $('.menu-item').removeClass('mark');237 $('#sec_15').addClass('mark');238 $.scrollTo('#modul_15', 400, {easing:'easeInOutQuart', offset: 0, axis: 'x', onAfter:function(){ 239 // After the scroll240 241 }242 });243 }244 else if (hash == '16') {245 $('.menu-item').removeClass('mark');246 $('#sec_16').addClass('mark');247 $.scrollTo('#modul_16', 400, {easing:'easeInOutQuart', offset: 0, axis: 'x', onAfter:function(){ 248 // After the scroll249 250 }251 });252 }253 254 else if (hash == '17') {255 $('.menu-item').removeClass('mark');256 $('#sec_17').addClass('mark');257 $.scrollTo('#modul_17', 400, {easing:'easeInOutQuart', offset: 0, axis: 'x', onAfter:function(){ 258 // After the scroll259 260 }261 });262 } 263 264 else if (hash == '18') {265 $('.menu-item').removeClass('mark');266 $('#sec_18').addClass('mark');267 $.scrollTo('#modul_18', 400, {easing:'easeInOutQuart', offset: 0, axis: 'x', onAfter:function(){ 268 // After the scroll269 270 }271 });272 } 273 274 else if (hash == '19') {275 $('.menu-item').removeClass('mark');276 $('#sec_19').addClass('mark');277 $.scrollTo('#modul_19', 400, {easing:'easeInOutQuart', offset: 0, axis: 'x', onAfter:function(){ 278 // After the scroll279 280 }281 });282 } 283 284 else if (hash == '20') {285 $('.menu-item').removeClass('mark');286 $('#sec_20').addClass('mark');287 $.scrollTo('#modul_20', 400, {easing:'easeInOutQuart', offset: 0, axis: 'x', onAfter:function(){ 288 // After the scroll289 290 }291 });292 }293 else if (hash == '21') {294 $('.menu-item').removeClass('mark');295 $('#sec_21').addClass('mark');296 $.scrollTo('#modul_21', 400, {easing:'easeInOutQuart', offset: 0, axis: 'x', onAfter:function(){ 297 // After the scroll298 299 }300 });301 }302 else if (hash == '22') {303 $('.menu-item').removeClass('mark');304 $('#sec_22').addClass('mark');305 $.scrollTo('#modul_22', 400, {easing:'easeInOutQuart', offset: 0, axis: 'x', onAfter:function(){ 306 // After the scroll307 308 }309 });310 }311 else if (hash == '23') {312 $('.menu-item').removeClass('mark');313 $('#sec_23').addClass('mark');314 $.scrollTo('#modul_23', 400, {easing:'easeInOutQuart', offset: 0, axis: 'x', onAfter:function(){ 315 // After the scroll316 317 }318 });319 }320 else if (hash == '24') {321 $('.menu-item').removeClass('mark');322 $('#sec_24').addClass('mark');323 $.scrollTo('#modul_24', 400, {easing:'easeInOutQuart', offset: 0, axis: 'x', onAfter:function(){ 324 // After the scroll325 326 }327 });328 }329 else if (hash == '25') {330 $('.menu-item').removeClass('mark');331 $('#sec_25').addClass('mark');332 $.scrollTo('#modul_25', 400, {easing:'easeInOutQuart', offset: 0, axis: 'x', onAfter:function(){ 333 // After the scroll334 335 }336 });337 }338 else if (hash == '26') {339 $('.menu-item').removeClass('mark');340 $('#sec_26').addClass('mark');341 $.scrollTo('#modul_26', 400, {easing:'easeInOutQuart', offset: 0, axis: 'x', onAfter:function(){ 342 // After the scroll343 344 }345 });346 }347 else if (hash == '27') {348 $('.menu-item').removeClass('mark');349 $('#sec_27').addClass('mark');350 $.scrollTo('#modul_27', 400, {easing:'easeInOutQuart', offset: 0, axis: 'x', onAfter:function(){ 351 // After the scroll352 353 }354 });355 }356 else if (hash == '28') {357 $('.menu-item').removeClass('mark');358 $('#sec_28').addClass('mark');359 $.scrollTo('#modul_28', 400, {easing:'easeInOutQuart', offset: 0, axis: 'x', onAfter:function(){ 360 // After the scroll361 362 }363 });364 }365 else if (hash == '29') {366 $('.menu-item').removeClass('mark');367 $('#sec_29').addClass('mark');368 $.scrollTo('#modul_29', 400, {easing:'easeInOutQuart', offset: 0, axis: 'x', onAfter:function(){ 369 // After the scroll370 371 }372 });373 }374 else if (hash == '30') {375 $('.menu-item').removeClass('mark');376 $('#sec_30').addClass('mark');377 $.scrollTo('#modul_30', 400, {easing:'easeInOutQuart', offset: 0, axis: 'x', onAfter:function(){ 378 // After the scroll379 380 }381 });382 }383 else if (hash == '31') {384 $('.menu-item').removeClass('mark');385 $('#sec_31').addClass('mark');386 $.scrollTo('#modul_31', 400, {easing:'easeInOutQuart', offset: 0, axis: 'x', onAfter:function(){ 387 // After the scroll388 389 }390 });391 }392 else if (hash == '32') {393 $('.menu-item').removeClass('mark');394 $('#sec_32').addClass('mark');395 $.scrollTo('#modul_32', 400, {easing:'easeInOutQuart', offset: 0, axis: 'x', onAfter:function(){ 396 // After the scroll397 398 }399 });400 }401 else if (hash == '33') {402 $('.menu-item').removeClass('mark');403 $('#sec_33').addClass('mark');404 $.scrollTo('#modul_33', 400, {easing:'easeInOutQuart', offset: 0, axis: 'x', onAfter:function(){ 405 // After the scroll406 407 }408 });409 }410 else if (hash == '34') {411 $('.menu-item').removeClass('mark');412 $('#sec_34').addClass('mark');413 $.scrollTo('#modul_34', 400, {easing:'easeInOutQuart', offset: 0, axis: 'x', onAfter:function(){ 414 // After the scroll415 416 }417 });418 }419 else if (hash == '35') {420 $('.menu-item').removeClass('mark');421 $('#sec_35').addClass('mark');422 $.scrollTo('#modul_35', 400, {easing:'easeInOutQuart', offset: 0, axis: 'x', onAfter:function(){ 423 // After the scroll424 425 }426 });427 }428 else if (hash == '36') {429 $('.menu-item').removeClass('mark');430 $('#sec_36').addClass('mark');431 $.scrollTo('#modul_36', 400, {easing:'easeInOutQuart', offset: 0, axis: 'x', onAfter:function(){ 432 // After the scroll433 434 }435 });436 }437 else if (hash == '37') {438 $('.menu-item').removeClass('mark');439 $('#sec_37').addClass('mark');440 $.scrollTo('#modul_37', 400, {easing:'easeInOutQuart', offset: 0, axis: 'x', onAfter:function(){ 441 // After the scroll442 443 }444 });445 }446 else if (hash == '38') {447 $('.menu-item').removeClass('mark');448 $('#sec_38').addClass('mark');449 $.scrollTo('#modul_38', 400, {easing:'easeInOutQuart', offset: 0, axis: 'x', onAfter:function(){ 450 // After the scroll451 452 }453 });454 }455 else if (hash == '39') {456 $('.menu-item').removeClass('mark');457 $('#sec_39').addClass('mark');458 $.scrollTo('#modul_39', 400, {easing:'easeInOutQuart', offset: 0, axis: 'x', onAfter:function(){ 459 // After the scroll460 461 }462 });463 }464 else if (hash == '40') {465 $('.menu-item').removeClass('mark');466 $('#sec_40').addClass('mark');467 $.scrollTo('#modul_40', 400, {easing:'easeInOutQuart', offset: 0, axis: 'x', onAfter:function(){ 468 // After the scroll469 470 }471 });472 }473 else if (hash == '41') {474 $('.menu-item').removeClass('mark');475 $('#sec_41').addClass('mark');476 $.scrollTo('#modul_41', 400, {easing:'easeInOutQuart', offset: 0, axis: 'x', onAfter:function(){ 477 // After the scroll478 479 }480 });481 }482 else if (hash == '42') {483 $('.menu-item').removeClass('mark');484 $('#sec_42').addClass('mark');485 $.scrollTo('#modul_42', 400, {easing:'easeInOutQuart', offset: 0, axis: 'x', onAfter:function(){ 486 // After the scroll487 488 }489 });490 }491 else if (hash == 'start') {492 }493 494 else {495 //alert('Denna sidan finns ej');496 }497 498 499 } else {500 //alert('Disch'); 501 }502 });503 504 if (pathname == base_url_4) {505 //alert('First Page');506 } else {}507 508 $("#menu a, a.radiotrigger").live("click", function(){509 var hash = this.href;510 hash = hash.replace(/^.*#/, '');511 $.historyLoad(hash);512 return false;513 });514 ...

Full Screen

Full Screen

scrolljs.js

Source:scrolljs.js Github

copy

Full Screen

1var iscroll = new IScroll('.explain-component', {2 mouseWheel: true,3 scrollbars: true,4});5function linkage() {6 setTimeout(function() {7 $('.blocklyDraggable').on('mousedown', function() {8 clearTimeout(timeout);9 var timeout;10 $('li').children().css('background-color', '#eeeeee')11 if(this.className.animVal.indexOf('blocklySelected') > 0) {12 for(var i = 0,length = this.childNodes.length; i < length; i++) {13 if(this.childNodes[i].className.baseVal.indexOf('cover') > 0) {14 scrollTo('yaokq');15 } else if(this.childNodes[i].className.baseVal.indexOf('left_turn') > 0) {16 scrollTo('turnleft');17 } else if(this.childNodes[i].className.baseVal.indexOf('right_turn') > 0) {18 scrollTo('turnright');19 } else if(this.childNodes[i].className.baseVal.indexOf('go_forward') > 0) {20 scrollTo('goahead');21 } else if(this.childNodes[i].className.baseVal.indexOf('go_reverse') > 0) {22 scrollTo('goback');23 } else if(this.childNodes[i].className.baseVal.indexOf('stop') > 0) {24 scrollTo('stop');25 } else if(this.childNodes[i].className.baseVal.indexOf('catHandle') > 0) {26 scrollTo('catwave');27 } else if(this.childNodes[i].className.baseVal.indexOf('catSound') > 0) {28 scrollTo('catSound ');29 } else if(this.childNodes[i].className.baseVal.indexOf('firstBtn') > 0) {30 scrollTo('firstBtn '); 31 }else if(this.childNodes[i].className.baseVal.indexOf('secondBtn') > 0) {32 scrollTo('secondBtn ');33 }else if(this.childNodes[i].className.baseVal.indexOf('backBtn') > 0) {34 scrollTo('backBtn ');35 }else if(this.childNodes[i].className.baseVal.indexOf('hammerKnock') > 0) {36 scrollTo('hammerKnock ');37 }else if(this.childNodes[i].className.baseVal.indexOf('numberLives') > 0) {38 scrollTo('numberLives ');39 }else if(this.childNodes[i].className.baseVal.indexOf('scanningGoForward') > 0) {40 scrollTo('scanningGoForward');41 }else if(this.childNodes[i].className.baseVal.indexOf('obstacleGoBack') > 0) {42 scrollTo('obstacleGoBack ');43 }else if(this.childNodes[i].className.baseVal.indexOf('presShake') > 0) {44 scrollTo('presShake');45 }else if(this.childNodes[i].className.baseVal.indexOf('pursuit') > 0) {46 scrollTo('pursuit1');47 }else if(this.childNodes[i].className.baseVal.indexOf('Score') > 0) {48 scrollTo('Score');49 }else if(this.childNodes[i].className.baseVal.indexOf('basketSpeed') > 0) {50 scrollTo('basketSpeed');51 }else if(this.childNodes[i].className.baseVal.indexOf('control_Button_if') > 0) {52 scrollTo('control_Button_if');53 }else if(this.childNodes[i].className.baseVal.indexOf('control_IRsensor_if') > 0) {54 scrollTo('control_IRsensor_if');55 }else if(this.childNodes[i].className.baseVal.indexOf('play_note') > 0) {56 scrollTo('play_note');57 }else if(this.childNodes[i].className.baseVal.indexOf('play_song') > 0) {58 scrollTo('play_song');59 }else if(this.childNodes[i].className.baseVal.indexOf('policeLight') > 0) {60 scrollTo('policeLight');61 }else if(this.childNodes[i].className.baseVal.indexOf('greenLED') > 0) {62 scrollTo('greenLED');63 }else if(this.childNodes[i].className.baseVal.indexOf('redLED') > 0) {64 scrollTo('redLED');65 }else if(this.childNodes[i].className.baseVal.indexOf('blueLED') > 0) {66 scrollTo('blueLED');67 }else if(this.childNodes[i].className.baseVal.indexOf('yellowLED') > 0) {68 scrollTo('yellowLED');69 }else if(this.childNodes[i].className.baseVal.indexOf('offLED') > 0) {70 scrollTo('offLED');71 }else if(this.childNodes[i].className.baseVal.indexOf('leftturn_light_flash') > 0) {72 scrollTo('leftturn_light_flash');73 }else if(this.childNodes[i].className.baseVal.indexOf('leftturn_light_off') > 0) {74 scrollTo('leftturn_light_off');75 }else if(this.childNodes[i].className.baseVal.indexOf('leftturn_light_on') > 0) {76 scrollTo('leftturn_light_on');77 }else if(this.childNodes[i].className.baseVal.indexOf('rightturn_light_flash') > 0) {78 scrollTo('rightturn_light_flash');79 }else if(this.childNodes[i].className.baseVal.indexOf('rightturn_light_off') > 0) {80 scrollTo('rightturn_light_off');81 }else if(this.childNodes[i].className.baseVal.indexOf('rightturn_light_on') > 0) {82 scrollTo('rightturn_light_on');83 }else if(this.childNodes[i].className.baseVal.indexOf('rear_light_on') > 0) {84 scrollTo('rear_light_on');85 }else if(this.childNodes[i].className.baseVal.indexOf('rear_light_off') > 0) {86 scrollTo('rear_light_off');87 }88 89 90 }91 }92 })93 }, 500);94}95function scrollTo(a) {96 iscroll.scrollToElement('.' + a, 500, null, -50, IScroll.utils.ease.bounce);97 timeout = setTimeout(function() {98 $('.' + a).css('background-color', '#ffffff');99 $('.' + a + ' ul li').children().css('background-color', '#fff')100 }, 200);101 return false;102}103//setInterval(function (){104// $('.blocklyText').each(function(){105// if($(this).html() == '如果'||$(this).html() == '执行'||$(this).html() == '否则'||$(this).html() == '否则如果'||$(this).html() == '重复'){106// $(this).css('fill','#514F50')107// }108// });...

Full Screen

Full Screen

jquery.scrollto.js

Source:jquery.scrollto.js Github

copy

Full Screen

1/**2 * @depends jquery3 * @name jquery.scrollto4 * @package jquery-scrollto {@link http://balupton.com/projects/jquery-scrollto}5 */6/**7 * jQuery Aliaser8 */9(function($){10 /**11 * jQuery ScrollTo (balupton edition)12 * @version 1.0.113 * @date August 31, 201014 * @since 0.1.0, August 27, 201015 * @package jquery-scrollto {@link http://balupton.com/projects/jquery-scrollto}16 * @author Benjamin "balupton" Lupton {@link http://balupton.com}17 * @copyright (c) 2010 Benjamin Arthur Lupton {@link http://balupton.com}18 * @license MIT License {@link http://creativecommons.org/licenses/MIT/}19 */20 if ( !($.ScrollTo||false) ) {21 $.ScrollTo = {22 /**23 * The Default Configuration24 */25 config: {26 duration: 400,27 easing: 'swing',28 callback: undefined,29 durationMode: 'each'30 },31 /**32 * Configure ScrollTo33 */34 configure: function(options){35 var ScrollTo = $.ScrollTo;36 // Apply Options to Config37 $.extend(ScrollTo.config, options||{});38 // Chain39 return this;40 },41 /**42 * Perform the Scroll Animation for the Collections43 * We use $inline here, so we can determine the actual offset start for each overflow:scroll item44 * Each collection is for each overflow:scroll item45 */46 scroll: function(collections, config){47 var ScrollTo = $.ScrollTo;48 // Determine the Scroll49 var collection = collections.pop(),50 $container = collection.$container,51 $target = collection.$target;52 // Prepare the Inline Element of the Container53 var $inline = $('<span/>').css({54 'position': 'absolute',55 'top': '0px',56 'left': '0px'57 });58 var position = $container.css('position');59 // Insert the Inline Element of the Container60 $container.css('position','relative');61 $inline.appendTo($container);62 // Determine the Offsets63 var startOffset = $inline.offset().top,64 targetOffset = $target.offset().top,65 offsetDifference = targetOffset - startOffset;66 // Reset the Inline Element of the Container67 $inline.remove();68 $container.css('position',position);69 // Prepare the callback70 var callback = function(event){71 // Check72 if ( collections.length === 0 ) {73 // Callback74 if ( typeof config.callback === 'function' ) {75 config.callback.apply(this,[event]);76 }77 }78 else {79 // Recurse80 ScrollTo.scroll(collections,config);81 }82 // Return true83 return true;84 };85 // Perform the Scroll86 $container.animate({87 'scrollTop': offsetDifference+'px'88 }, config.duration, config.easing, callback);89 // Return true90 return true;91 },92 /**93 * ScrollTo the Element using the Options94 */95 fn: function(options){96 var ScrollTo = $.ScrollTo;97 // Prepare98 var $target = $(this);99 if ( $target.length === 0 ) {100 // Chain101 return this;102 }103 // Fetch104 var $container = $target.parent(),105 collections = [];106 // Handle Options107 config = $.extend({},ScrollTo.config,options);108 // Cycle through the containers109 while ( $container.length === 1 && !$container.is('body') && !($container.get(0) === document) ) {110 // Check Container111 var container = $container.get(0);112 if ( $container.css('overflow-y') !== 'visible' && container.scrollHeight !== container.clientHeight ) {113 // Push the Collection114 collections.push({115 '$container': $container,116 '$target': $target117 });118 // Update the Target119 $target = $container;120 }121 // Update the Container122 $container = $container.parent();123 }124 // Add the final collection125 collections.push({126 '$container': $($.browser.msie ? 'html' : 'body'),127 '$target': $target128 });129 // Adjust the Config130 if ( config.durationMode === 'all' ) {131 config.duration /= collections.length;132 }133 // Handle134 ScrollTo.scroll(collections,config);135 // Chain136 return this;137 },138 /**139 * Construct140 */141 construct: function(options){142 var ScrollTo = $.ScrollTo;143 // Apply our jQuery Function144 $.fn.ScrollTo = ScrollTo.fn;145 // Apply our Options to the Default Config146 ScrollTo.config = $.extend(ScrollTo.config,options);147 // Chain148 return this;149 }150 };151 // Construct It152 $.ScrollTo.construct();153 }154 else {155 window.console.warn("$.ScrollTo has already been defined...");156 }...

Full Screen

Full Screen

scrollto.js

Source:scrollto.js Github

copy

Full Screen

1+ function ($) {2 'use strict';3 // SCROLLTO CLASS DEFINITION4 // ======================5 var scrto = '[data-toggle="scroll"][href*="#"]:not([href="#"])'6 var Scrollto = function (element, options) {7 this.element = '#' + $(element).attr('id')8 this.$element = $(element)9 this.options = $.extend({}, Scrollto.DEFAULTS, options)10 if (this.options.toggle) this.toggle();11 }12 Scrollto.VERSION = '0.3.0'13 Scrollto.TRANSITION_DURATION = 'slow'14 Scrollto.DEFAULTS = {15 toggle: true,16 target: '0'17 }18 Scrollto.prototype.toggle = function () {19 //if (location.pathname.replace(/^\//, '') == this.pathname.replace(/^\//, '') && location.hostname == this.hostname) {20 var target, hash21 if (this.$element !== undefined && this.element.indexOf('#') === 0) {22 target = $(this.element)23 hash = this.element24 } else {25 target = $(this.hash)26 hash = this.hash27 target = target.length ? target : $('[name=' + this.hash.slice(1) + ']')28 }29 30 if (target.length) {31 $('html, body').animate({32 scrollTop: target.offset().top33 }, Scrollto.TRANSITION_DURATION, function () {34 setTimeout(function () {35 window.location.hash = hash36 }, 50)37 })38 return false39 }40 //}41 }42 // SCROLLTO PLUGIN DEFINITION43 // =======================44 function Plugin(option) {45 return this.each(function () {46 var $this = $(this)47 var data = $this.data('bs.scrollto')48 var options = $.extend({}, Scrollto.DEFAULTS, $this.data(), typeof option === 'object' && option)49 if (!data) $this.data('bs.scrollto', (data = new Scrollto(this, options)))50 if (typeof option === 'string') data[option]()51 })52 }53 var old = $.fn.scrollto54 $.fn.scrollto = Plugin55 $.fn.scrollto.Constructor = Scrollto56 // SCROLLTO NO CONFLICT57 // =================58 $.fn.scrollto.noConflict = function () {59 $.fn.scrollto = old60 return this61 }62 // SCROLLTO DATA-API63 // ==============64 $(document).on('click', scrto, Scrollto.prototype.toggle)...

Full Screen

Full Screen

settings_offset_spec.js

Source:settings_offset_spec.js Github

copy

Full Screen

1describe('setting: offset', function() {2 context('global', () => {3 before(() => {4 cy.visit('/');5 });6 context('400px', () => {7 before(() => {8 cy.initAOS({9 offset: 40010 });11 });12 it('Should animate 3 items', function() {13 cy.get('.aos-animate').should('have.length', 3);14 });15 it('Should animate next 3 items on scroll', function() {16 cy.scrollTo(0, 50);17 cy.get('.aos-animate').should('have.length', 6);18 });19 });20 context('0px', () => {21 before(() => {22 cy.initAOS({23 offset: 024 });25 });26 it('Should animate 9 items', function() {27 cy.get('.aos-animate').should('have.length', 9);28 cy.scrollTo(0, 50);29 cy.get('.aos-animate').should('have.length', 9);30 });31 });32 });33 context('inline', () => {34 before(() => {35 cy.visit('/offset.html');36 cy.initAOS();37 cy.viewport(1280, 500);38 });39 it('Should properly tigger all animations', function() {40 cy.get('.aos-animate').should('have.length', 7);41 cy.scrollTo(0, 1 * 150);42 cy.get('.aos-animate').should('have.length', 8);43 cy.scrollTo(0, 2 * 150);44 cy.get('.aos-animate').should('have.length', 10);45 cy.scrollTo(0, 3 * 150);46 cy.get('.aos-animate').should('have.length', 11);47 cy.scrollTo(0, 4 * 150);48 cy.get('.aos-animate').should('have.length', 13);49 cy.scrollTo(0, 5 * 150);50 cy.get('.aos-animate').should('have.length', 14);51 cy.scrollTo(0, 6 * 150);52 cy.get('.aos-animate').should('have.length', 16);53 cy.scrollTo(0, 7 * 150);54 cy.get('.aos-animate').should('have.length', 17);55 cy.scrollTo(0, 8 * 150);56 cy.get('.aos-animate').should('have.length', 19);57 cy.scrollTo(0, 9 * 150);58 cy.get('.aos-animate').should('have.length', 20);59 cy.scrollTo(0, 10 * 150);60 cy.get('.aos-animate').should('have.length', 22);61 cy.scrollTo(0, 11 * 150);62 cy.get('.aos-animate').should('have.length', 23);63 cy.scrollTo(0, 12 * 150);64 cy.get('.aos-animate').should('have.length', 25);65 cy.scrollTo(0, 13 * 150);66 cy.get('.aos-animate').should('have.length', 26);67 cy.scrollTo(0, 14 * 150);68 cy.get('.aos-animate').should('have.length', 27);69 });70 });...

Full Screen

Full Screen

app.spec.js

Source:app.spec.js Github

copy

Full Screen

1describe('My First Test', () => {2 it('Visit to Blacked Market Home Page', () => {3 cy.visit('http://localhost:3000')4 // cy.get('.css-1ynkv7l').should('be.visible').contains('a').click()5 6 // cy.get('.css-1ynkv7l').should('be.visible').contains('cars we love').click()7 cy.scrollTo('bottom')8 cy.scrollTo('top')9 cy.pause() 10 cy.viewport('macbook-15')11 cy.scrollTo('bottom')12 cy.scrollTo('top')13 cy.pause()14 cy.viewport('macbook-13')15 cy.scrollTo('bottom')16 cy.scrollTo('top')17 cy.pause()18 cy.viewport('macbook-11')19 cy.scrollTo('bottom')20 cy.scrollTo('top')21 cy.pause()22 cy.viewport('ipad-2')23 cy.scrollTo('bottom')24 cy.scrollTo('top')25 cy.pause()26 cy.viewport('ipad-mini')27 cy.scrollTo('bottom')28 cy.scrollTo('top')29 cy.pause()30 cy.viewport('iphone-6+')31 cy.scrollTo('bottom')32 cy.scrollTo('top')33 cy.pause()34 cy.viewport('iphone-6')35 cy.scrollTo('bottom')36 cy.scrollTo('top')37 cy.pause()38 cy.viewport('iphone-5')39 cy.scrollTo('bottom')40 cy.scrollTo('top')41 cy.pause()42 cy.viewport('iphone-4')43 cy.scrollTo('bottom')44 cy.scrollTo('top')45 cy.pause()46 cy.viewport('iphone-3')47 cy.scrollTo('bottom')48 cy.scrollTo('top')49 cy.pause()50 cy.viewport('ipad-2', 'portrait')51 cy.scrollTo('bottom')52 cy.scrollTo('top')53 cy.pause()54 cy.viewport('iphone-4', 'landscape')55 cy.scrollTo('bottom')56 cy.scrollTo('top')57 cy.pause()58 })...

Full Screen

Full Screen

scroll.js

Source:scroll.js Github

copy

Full Screen

1jQuery(function ($) {2 //resetowanie scrolla3 $.scrollTo(0);4 $('#link1').click(function () { $.scrollTo($('#monitorykineskopowe'), 500); });5 $('#link2').click(function () { $.scrollTo($('#zasadakineskop'), 500); });6 $('#link3').click(function () { $.scrollTo($('#maskakineskop'), 500); });7 $('#link4').click(function () { $.scrollTo($('#wadyzaletykineskop'), 500); });8 $('#link5').click(function () { $.scrollTo($('#parametrykineskop'), 500); });9 $('#link6').click(function () { $.scrollTo($('#budowaLCD'), 500); });10 $('#link7').click(function () { $.scrollTo($('#zasadaLCD'), 500); });11 $('#link8').click(function () { $.scrollTo($('#matryceLCD'), 500); });12 $('#link9').click(function () { $.scrollTo($('#wadyzaletyLCD'), 500); });13 $('#link10').click(function () { $.scrollTo($('#parametryLCD'), 500); });14 $('#link11').click(function () { $.scrollTo($('#dsub'), 500); });15 $('#link12').click(function () { $.scrollTo($('#dvi'), 500); });16 $('#link13').click(function () { $.scrollTo($('#hdmi'), 500); });17 $('.scrollup').click(function () { $.scrollTo($('body'), 1000); });18}19);20//ukazanie przycisku21$(window).scroll(function () {22 if ($(this).scrollTop() > 300) $('.scrollup').fadeIn();23 else $('.scrollup').fadeOut();24}...

Full Screen

Full Screen

Using AI Code Generation

copy

Full Screen

1describe('My First Test', function() {2 it('Does not do much!', function() {3 cy.contains('type').click()4 cy.url().should('include', '/commands/actions')5 cy.get('.action-email')6 .type('

Full Screen

Full Screen

Using AI Code Generation

copy

Full Screen

1describe('My First Test', function() {2 it('Does not do much!', function() {3 cy.contains('type').click()4 cy.url().should('include', '/commands/actions')5 cy.get('.action-email')6 .type('fake@email')7 .should('have.value', 'fake@email')8 })9 })

Full Screen

Full Screen

Using AI Code Generation

copy

Full Screen

1describe('My First Test', function() {2 it('Does not do much!', function() {3 cy.contains('type').click()4 cy.url().should('include', '/commands/actions')5 cy.get('.action-email')6 .type('

Full Screen

Full Screen

Using AI Code Generation

copy

Full Screen

1describe('My First Test', () => {2 it('Does not do much!', () => {3 expect(true).to.equal(true)4 })5})6describe('My First Test', () => {7 it('Does not do much!', () => {8 expect(true).to.equal(true)9 })10})11describe('My First Test', () => {12 it('Does not do much!', () => {13 expect(true).to.equal(true)14 })15})16describe('My First Test', () => {17 it('Does not do much!', () => {18 expect(true).to.equal(true)19 })20})21describe('My First Test', () => {22 it('Does not do much!', () => {23 expect(true).to.equal(true)24 })25})26describe('My First Test', () => {27 it('Does not do much!', () => {28 expect(true).to.equal(true)29 })30})31describe('My First Test', () => {32 it('Does not do much!', () => {33 expect(true).to.equal(true)34 })35})36describe('My First Test', () => {37 it('Does not do much!', () => {38 expect(true).to.equal(true)39 })40})41describe('My First Test', () => {42 it('Does not do much!', () => {43 expect(true).to.equal(true)44 })45})46describe('My First Test', () => {47 it('Does not do much!', () => {48 expect(true).to.equal(true)49 })50})51describe('My First Test', () => {52 it('Does not do much!', () => {53 expect(true).to.equal(true)54 })55})56describe('My First Test', () => {57 it('Does not do much!', () => {58 expect(true).to.equal(true)59 })60})61describe('My First Test', () => {62 it('Does not do much!', () => {63 expect(true).to.equal(true)64 })65})66describe('My First Test', () => {67 it('Does not do much!', () => {68 expect(true).to.equal

Full Screen

Full Screen

Using AI Code Generation

copy

Full Screen

1describe('Scrolling to an element', () => {2 it('Scrolls to the bottom of the page', () => {3 cy.scrollTo('bottom')4 })5})6describe('Scrolling to an element', () => {7 it('Scrolls to the bottom of the page', () => {8 cy.scrollTo('bottom')9 })10})11describe('Scrolling to an element', () => {12 it('Scrolls to the bottom of the page', () => {13 cy.scrollTo('bottom')14 })15})16describe('Scrolling to an element', () => {17 it('Scrolls to the bottom of the page', () => {18 cy.scrollTo('bottom')19 })20})21describe('Scrolling to an element', () => {22 it('Scrolls to the bottom of the page', () => {23 cy.scrollTo('bottom')24 })25})26describe('Scrolling to an element', () => {27 it('Scrolls to the bottom of the page', () => {28 cy.scrollTo('bottom')29 })30})31describe('Scrolling to an element', () => {32 it('Scrolls to the bottom of the page', () => {33 cy.scrollTo('bottom')34 })35})36describe('Scrolling to an element', () => {37 it('Scrolls to the bottom of the page', () => {38 cy.visit('

Full Screen

Full Screen

Using AI Code Generation

copy

Full Screen

1describe('Scroll to element', () => {2 it('scrolls to the bottom of the page', () => {3 cy.get('#scroll-horizontal button').should('not.be.visible')4 cy.scrollTo('bottom')5 cy.get('#scroll-horizontal button').should('be.visible')6 })7})

Full Screen

Full Screen

Using AI Code Generation

copy

Full Screen

1describe('Scrolling', () => {2 it('scroll to specific element', () => {3 cy.get('#scrollable-horizontal').scrollTo('right')4 })5 it('scroll to specific element', () => {6 cy.get('#scrollable-vertical').scrollTo('bottom')7 })8 it('scroll to specific element', () => {9 cy.get('#scrollable-both').scrollTo('bottom')10 })11 it('scroll to specific element', () => {12 cy.get('#scrollable-both').scrollTo('right')13 })14 it('scroll to specific element', () => {15 cy.get('#scrollable-vertical').scrollTo('center')16 })17 it('scroll to specific element', () => {18 cy.get('#scrollable-horizontal').scrollTo('center')19 })20 it('scroll to specific element', () => {21 cy.get('#scrollable-both').scrollTo('center')22 })23 it('scroll to specific element', () => {24 cy.get('#scrollable-vertical').scrollTo(250, 250)25 })26 it('scroll to specific element', () => {27 cy.get('#scrollable-horizontal').scrollTo(250, 250)28 })29 it('scroll to specific element', () => {30 cy.get('#scrollable-both').scrollTo(250, 250)31 })32})

Full Screen

Full Screen

Cypress Tutorial

Cypress is a renowned Javascript-based open-source, easy-to-use end-to-end testing framework primarily used for testing web applications. Cypress is a relatively new player in the automation testing space and has been gaining much traction lately, as evidenced by the number of Forks (2.7K) and Stars (42.1K) for the project. LambdaTest’s Cypress Tutorial covers step-by-step guides that will help you learn from the basics till you run automation tests on LambdaTest.

Chapters:

  1. What is Cypress? -
  2. Why Cypress? - Learn why Cypress might be a good choice for testing your web applications.
  3. Features of Cypress Testing - Learn about features that make Cypress a powerful and flexible tool for testing web applications.
  4. Cypress Drawbacks - Although Cypress has many strengths, it has a few limitations that you should be aware of.
  5. Cypress Architecture - Learn more about Cypress architecture and how it is designed to be run directly in the browser, i.e., it does not have any additional servers.
  6. Browsers Supported by Cypress - Cypress is built on top of the Electron browser, supporting all modern web browsers. Learn browsers that support Cypress.
  7. Selenium vs Cypress: A Detailed Comparison - Compare and explore some key differences in terms of their design and features.
  8. Cypress Learning: Best Practices - Take a deep dive into some of the best practices you should use to avoid anti-patterns in your automation tests.
  9. How To Run Cypress Tests on LambdaTest? - Set up a LambdaTest account, and now you are all set to learn how to run Cypress tests.

Certification

You can elevate your expertise with end-to-end testing using the Cypress automation framework and stay one step ahead in your career by earning a Cypress certification. Check out our Cypress 101 Certification.

YouTube

Watch this 3 hours of complete tutorial to learn the basics of Cypress and various Cypress commands with the Cypress testing at LambdaTest.

Run Cypress automation tests on LambdaTest cloud grid

Perform automation testing on 3000+ real desktop and mobile devices online.

... View sample repo... View DocumentationSign up Free
›
_

Try LambdaTest Now !!

Get 100 minutes of automation test minutes FREE!!

...
Sign up with GoogleSign up with Email
Next-Gen App & Browser Testing Cloud

Was this article helpful?

Helpful

NotHelpful