How to use ScrollSpy method in backstopjs

Best JavaScript code snippet using backstopjs

scrollspy.js

Source:scrollspy.js Github

copy

Full Screen

1(function($, anim) {2 'use strict';3 let _defaults = {4 throttle: 100,5 scrollOffset: 200, // offset - 200 allows elements near bottom of page to scroll6 activeClass: 'active',7 getActiveElement: function(id) {8 return 'a[href="#' + id + '"]';9 }10 };11 /**12 * @class13 *14 */15 class ScrollSpy extends Component {16 /**17 * Construct ScrollSpy instance18 * @constructor19 * @param {Element} el20 * @param {Object} options21 */22 constructor(el, options) {23 super(ScrollSpy, el, options);24 this.el.M_ScrollSpy = this;25 /**26 * Options for the modal27 * @member Modal#options28 * @prop {Number} [throttle=100] - Throttle of scroll handler29 * @prop {Number} [scrollOffset=200] - Offset for centering element when scrolled to30 * @prop {String} [activeClass='active'] - Class applied to active elements31 * @prop {Function} [getActiveElement] - Used to find active element32 */33 this.options = $.extend({}, ScrollSpy.defaults, options);34 // setup35 ScrollSpy._elements.push(this);36 ScrollSpy._count++;37 ScrollSpy._increment++;38 this.tickId = -1;39 this.id = ScrollSpy._increment;40 this._setupEventHandlers();41 this._handleWindowScroll();42 }43 static get defaults() {44 return _defaults;45 }46 static init(els, options) {47 return super.init(this, els, options);48 }49 /**50 * Get Instance51 */52 static getInstance(el) {53 let domElem = !!el.jquery ? el[0] : el;54 return domElem.M_ScrollSpy;55 }56 /**57 * Teardown component58 */59 destroy() {60 ScrollSpy._elements.splice(ScrollSpy._elements.indexOf(this), 1);61 ScrollSpy._elementsInView.splice(ScrollSpy._elementsInView.indexOf(this), 1);62 ScrollSpy._visibleElements.splice(ScrollSpy._visibleElements.indexOf(this.$el), 1);63 ScrollSpy._count--;64 this._removeEventHandlers();65 $(this.options.getActiveElement(this.$el.attr('id'))).removeClass(this.options.activeClass);66 this.el.M_ScrollSpy = undefined;67 }68 /**69 * Setup Event Handlers70 */71 _setupEventHandlers() {72 let throttledResize = M.throttle(this._handleWindowScroll, 200);73 this._handleThrottledResizeBound = throttledResize.bind(this);74 this._handleWindowScrollBound = this._handleWindowScroll.bind(this);75 if (ScrollSpy._count === 1) {76 window.addEventListener('scroll', this._handleWindowScrollBound);77 window.addEventListener('resize', this._handleThrottledResizeBound);78 document.body.addEventListener('click', this._handleTriggerClick);79 }80 }81 /**82 * Remove Event Handlers83 */84 _removeEventHandlers() {85 if (ScrollSpy._count === 0) {86 window.removeEventListener('scroll', this._handleWindowScrollBound);87 window.removeEventListener('resize', this._handleThrottledResizeBound);88 document.body.removeEventListener('click', this._handleTriggerClick);89 }90 }91 /**92 * Handle Trigger Click93 * @param {Event} e94 */95 _handleTriggerClick(e) {96 let $trigger = $(e.target);97 for (let i = ScrollSpy._elements.length - 1; i >= 0; i--) {98 let scrollspy = ScrollSpy._elements[i];99 if ($trigger.is('a[href="#' + scrollspy.$el.attr('id') + '"]')) {100 e.preventDefault();101 let offset = scrollspy.$el.offset().top + 1;102 anim({103 targets: [document.documentElement, document.body],104 scrollTop: offset - scrollspy.options.scrollOffset,105 duration: 400,106 easing: 'easeOutCubic'107 });108 break;109 }110 }111 }112 /**113 * Handle Window Scroll114 */115 _handleWindowScroll() {116 // unique tick id117 ScrollSpy._ticks++;118 // viewport rectangle119 let top = M.getDocumentScrollTop(),120 left = M.getDocumentScrollLeft(),121 right = left + window.innerWidth,122 bottom = top + window.innerHeight;123 // determine which elements are in view124 let intersections = ScrollSpy._findElements(top, right, bottom, left);125 for (let i = 0; i < intersections.length; i++) {126 let scrollspy = intersections[i];127 let lastTick = scrollspy.tickId;128 if (lastTick < 0) {129 // entered into view130 scrollspy._enter();131 }132 // update tick id133 scrollspy.tickId = ScrollSpy._ticks;134 }135 for (let i = 0; i < ScrollSpy._elementsInView.length; i++) {136 let scrollspy = ScrollSpy._elementsInView[i];137 let lastTick = scrollspy.tickId;138 if (lastTick >= 0 && lastTick !== ScrollSpy._ticks) {139 // exited from view140 scrollspy._exit();141 scrollspy.tickId = -1;142 }143 }144 // remember elements in view for next tick145 ScrollSpy._elementsInView = intersections;146 }147 /**148 * Find elements that are within the boundary149 * @param {number} top150 * @param {number} right151 * @param {number} bottom152 * @param {number} left153 * @return {Array.<ScrollSpy>} A collection of elements154 */155 static _findElements(top, right, bottom, left) {156 let hits = [];157 for (let i = 0; i < ScrollSpy._elements.length; i++) {158 let scrollspy = ScrollSpy._elements[i];159 let currTop = top + scrollspy.options.scrollOffset || 200;160 if (scrollspy.$el.height() > 0) {161 let elTop = scrollspy.$el.offset().top,162 elLeft = scrollspy.$el.offset().left,163 elRight = elLeft + scrollspy.$el.width(),164 elBottom = elTop + scrollspy.$el.height();165 let isIntersect = !(166 elLeft > right ||167 elRight < left ||168 elTop > bottom ||169 elBottom < currTop170 );171 if (isIntersect) {172 hits.push(scrollspy);173 }174 }175 }176 return hits;177 }178 _enter() {179 ScrollSpy._visibleElements = ScrollSpy._visibleElements.filter(function(value) {180 return value.height() != 0;181 });182 if (ScrollSpy._visibleElements[0]) {183 $(this.options.getActiveElement(ScrollSpy._visibleElements[0].attr('id'))).removeClass(184 this.options.activeClass185 );186 if (187 ScrollSpy._visibleElements[0][0].M_ScrollSpy &&188 this.id < ScrollSpy._visibleElements[0][0].M_ScrollSpy.id189 ) {190 ScrollSpy._visibleElements.unshift(this.$el);191 } else {192 ScrollSpy._visibleElements.push(this.$el);193 }194 } else {195 ScrollSpy._visibleElements.push(this.$el);196 }197 $(this.options.getActiveElement(ScrollSpy._visibleElements[0].attr('id'))).addClass(198 this.options.activeClass199 );200 }201 _exit() {202 ScrollSpy._visibleElements = ScrollSpy._visibleElements.filter(function(value) {203 return value.height() != 0;204 });205 if (ScrollSpy._visibleElements[0]) {206 $(this.options.getActiveElement(ScrollSpy._visibleElements[0].attr('id'))).removeClass(207 this.options.activeClass208 );209 ScrollSpy._visibleElements = ScrollSpy._visibleElements.filter((el) => {210 return el.attr('id') != this.$el.attr('id');211 });212 if (ScrollSpy._visibleElements[0]) {213 // Check if empty214 $(this.options.getActiveElement(ScrollSpy._visibleElements[0].attr('id'))).addClass(215 this.options.activeClass216 );217 }218 }219 }220 }221 /**222 * @static223 * @memberof ScrollSpy224 * @type {Array.<ScrollSpy>}225 */226 ScrollSpy._elements = [];227 /**228 * @static229 * @memberof ScrollSpy230 * @type {Array.<ScrollSpy>}231 */232 ScrollSpy._elementsInView = [];233 /**234 * @static235 * @memberof ScrollSpy236 * @type {Array.<cash>}237 */238 ScrollSpy._visibleElements = [];239 /**240 * @static241 * @memberof ScrollSpy242 */243 ScrollSpy._count = 0;244 /**245 * @static246 * @memberof ScrollSpy247 */248 ScrollSpy._increment = 0;249 /**250 * @static251 * @memberof ScrollSpy252 */253 ScrollSpy._ticks = 0;254 M.ScrollSpy = ScrollSpy;255 if (M.jQueryLoaded) {256 M.initializeJqueryWrapper(ScrollSpy, 'scrollSpy', 'M_ScrollSpy');257 }...

Full Screen

Full Screen

Using AI Code Generation

copy

Full Screen

1module.exports = async (page, scenario, vp) => {2 console.log('SCENARIO > ' + scenario.label);3 await require('./loadCookies')(page, scenario);4 await page.evaluate(() => {5 window.scrollBy(0, 100);6 });7 await page.waitFor(500);8 await page.evaluate(() => {9 window.scrollBy(0, 100);10 });11 await page.waitFor(500);12 await page.evaluate(() => {13 window.scrollBy(0, 100);14 });15 await page.waitFor(500);16 await page.evaluate(() => {17 window.scrollBy(0, 100);18 });19 await page.waitFor(500);20 await page.evaluate(() => {21 window.scrollBy(0, 100);22 });23 await page.waitFor(500);24 await page.evaluate(() => {25 window.scrollBy(0, 100);26 });27 await page.waitFor(500);28 await page.evaluate(() => {29 window.scrollBy(0, 100);30 });31 await page.waitFor(500);32 await page.evaluate(() => {33 window.scrollBy(0, 100);34 });35 await page.waitFor(500);36 await page.evaluate(() => {37 window.scrollBy(0, 100);38 });39 await page.waitFor(500);40 await page.evaluate(() => {41 window.scrollBy(0, 100);42 });43 await page.waitFor(500);44 await page.evaluate(() => {45 window.scrollBy(0, 100);46 });47 await page.waitFor(500);48 await page.evaluate(() => {49 window.scrollBy(0, 100);50 });51 await page.waitFor(500);52 await page.evaluate(() => {53 window.scrollBy(0, 100);54 });55 await page.waitFor(500);56 await page.evaluate(() => {57 window.scrollBy(0, 100);58 });59 await page.waitFor(500);60};

Full Screen

Full Screen

Using AI Code Generation

copy

Full Screen

1module.exports = async (page, scenario, vp) => {2 console.log('SCENARIO > ' + scenario.label);3 await require('./loadCookies')(page, scenario);4 if (scenario.label === 'Desktop') {5 await page.waitFor('#nav');6 await page.waitFor(3000);7 await page.evaluate(() => {8 window.scrollBy(0, 3000);9 });10 await page.waitFor(3000);11 await page.evaluate(() => {12 window.scrollBy(0, -3000);13 });14 }15};

Full Screen

Full Screen

Using AI Code Generation

copy

Full Screen

1module.exports = async (page, scenario, vp) => {2 await require('./scrollToBottom')(page, scenario, vp);3 await require('./hoverHelper')(page, scenario, vp);4 await page.evaluate(() => {5 if (window.jQuery) {6 console.log("jQuery version: " + jQuery.fn.jquery);7 }8 else {9 console.log("Does not Work");10 }11 });12 await page.evaluate(() => {13 if (window.ScrollSpy) {14 console.log("ScrollSpy version: " + ScrollSpy.fn.jquery);15 }16 else {17 console.log("Does not Work");18 }19 });20 await page.evaluate(() => {21 if (window.ScrollSpy) {22 console.log("ScrollSpy version: " + ScrollSpy.fn.jquery);23 }24 else {25 console.log("Does not Work");26 }27 });28 await page.evaluate(() => {29 if (window.ScrollSpy) {30 console.log("ScrollSpy version: " + ScrollSpy.fn.jquery);31 }32 else {33 console.log("Does not Work");34 }35 });36 await page.evaluate(() => {37 if (window.ScrollSpy) {38 console.log("ScrollSpy version: " + ScrollSpy.fn.jquery);39 }40 else {41 console.log("Does not Work");42 }43 });44 await page.evaluate(() => {45 if (window.ScrollSpy) {46 console.log("ScrollSpy version: " + ScrollSpy.fn.jquery);47 }48 else {49 console.log("Does not Work");50 }51 });52 await page.evaluate(() => {53 if (window.ScrollSpy) {54 console.log("ScrollSpy version: " + ScrollSpy.fn.jquery);55 }56 else {57 console.log("Does not Work");58 }59 });60 await page.evaluate(() => {61 if (window.Scroll

Full Screen

Full Screen

Using AI Code Generation

copy

Full Screen

1module.exports = async (page, scenario, vp) => {2 await require('./scrollToBottom')(page, scenario, vp);3 await page.waitFor(1000);4 await page.evaluate(_ => {5 window.scrollBy(0, -window.innerHeight);6 });7};

Full Screen

Full Screen

Using AI Code Generation

copy

Full Screen

1module.exports = async (page, scenario, vp) => {2 await require('./scrollToBottom')(page, scenario, vp);3 await page.waitFor(3000);4 await require('./scrollToTop')(page, scenario, vp);5 await page.waitFor(3000);6 await require('./clickAndHoverHelper')(page, scenario, vp);7};

Full Screen

Full Screen

Using AI Code Generation

copy

Full Screen

1module.exports = async (page, scenario, vp) => {2 await require('./scrollToBottom')(page, scenario, vp);3 await page.evaluate(_ => {4 window.scrollBy(0, -100);5 });6 await require('./hoverSelector')(page, scenario, vp);7 await require('./clickAndHoverHelper')(page, scenario, vp);8 await require('./removeElements')(page, scenario);9 await require('./hideElements')(page, scenario);10};

Full Screen

Full Screen

Using AI Code Generation

copy

Full Screen

1module.exports = async (page, scenario, vp) => {2 await require('./scrollToBottom')(page, scenario, vp);3 await page.evaluate(() => {4 window.scrollBy(0, -100)5 });6 await require('./clickAndHoverHelper')(page, scenario, vp);7};8const clickSelector = async (page, selector) => {9 await page.waitForSelector(selector);10 await page.click(selector);11};12const hoverSelector = async (page, selector) => {13 await page.waitForSelector(selector);14 await page.hover(selector);15};16module.exports = async (page, scenario, vp) => {17 console.log('SCENARIO > ' + scenario.label);18 if (scenario.clickSelector) {19 await clickSelector(page, scenario.clickSelector);20 }21 if (scenario.hoverSelector) {22 await hoverSelector(page, scenario.hoverSelector);23 }24 if (scenario.postInteractionWait) {25 console.log('waiting for ' + scenario.postInteractionWait);26 await page.waitFor(scenario.postInteractionWait);27 }28};29module.exports = async (page, scenario, vp) => {30 const extraDelay = scenario.delay || 0;31 await page.evaluate(_delay => {32 window.scrollTo(0, document.body.scrollHeight);33 return new Promise(resolve => setTimeout(resolve, _delay));34 }, extraDelay);35};36const { createTest } = require('@backstopjs/core');37const { getTestConfig } = require('@backstopjs/config');38const { getAbsolutePath } = require('@backstopjs/util');39const { getScenarioLabel } = require('@backstopjs/core/lib/capture/engine_scripts');40const { getScenarioUrl } = require('@backstopjs/core/lib/capture/engine_scripts');41const { getScenarioReferenceUrl } = require('@backstopjs/core/lib/capture/engine_scripts');42const { getScenarioReadySelector } = require('@backstopjs/core/lib/capture/engine_scripts');43const { getScenarioReadyEvent } = require('@backstopjs/core/lib/capture/engine_scripts');44const { getScenarioDelay } = require('@backstopjs/core/lib

Full Screen

Full Screen

Using AI Code Generation

copy

Full Screen

1module.exports = async (page, scenario, vp) => {2 await require('./loadCookies')(page, scenario);3 await page.evaluate(() => {4 window.scrollTo(0, 0);5 window.__backstopTools.scrollStop();6 });7 await page.waitForSelector('.navbar-nav');8 await page.click('.navbar-nav a:nth-child(3)');9 await page.waitForSelector('#section-3');10 await page.evaluate(() => {11 window.scrollTo(0, 0);12 window.__backstopTools.scrollStop();13 });14 await page.waitForSelector('.navbar-nav');15 await page.click('.navbar-nav a:nth-child(4)');16 await page.waitForSelector('#section-4');17 await page.evaluate(() => {18 window.scrollTo(0, 0);19 window.__backstopTools.scrollStop();20 });21 await page.waitForSelector('.navbar-nav');22 await page.click('.navbar-nav a:nth-child(5)');23 await page.waitForSelector('#section-5');24 await page.evaluate(() => {25 window.scrollTo(0, 0);26 window.__backstopTools.scrollStop();27 });28 await page.waitForSelector('.navbar-nav');29 await page.click('.navbar-nav a:nth-child(6)');30 await page.waitForSelector('#section-6');31 await page.evaluate(() => {32 window.scrollTo(0, 0);33 window.__backstopTools.scrollStop();34 });35 await page.waitForSelector('.navbar-nav');36 await page.click('.navbar-nav a:nth-child(7)');37 await page.waitForSelector('#section-7');38 await page.evaluate(() => {39 window.scrollTo(0, 0);40 window.__backstopTools.scrollStop();41 });42 await page.waitForSelector('.navbar-nav');43 await page.click('.navbar-nav a:nth-child(8)');44 await page.waitForSelector('#section-8');45 await page.evaluate(() => {46 window.scrollTo(0, 0);47 window.__backstopTools.scrollStop();48 });49 await page.waitForSelector('.navbar-nav');50 await page.click('.navbar-nav a:nth-child(9)');51 await page.waitForSelector('#section-9');52 await page.evaluate(() => {53 window.scrollTo(0, 0);54 window.__backstopTools.scrollStop();55 });56 await page.waitForSelector('.navbar-nav');57 await page.click('.navbar-nav a:nth-child(10)');58 await page.waitForSelector('#section-10');

Full Screen

Full Screen

Automation Testing Tutorials

Learn to execute automation testing from scratch with LambdaTest Learning Hub. Right from setting up the prerequisites to run your first automation test, to following best practices and diving deeper into advanced test scenarios. LambdaTest Learning Hubs compile a list of step-by-step guides to help you be proficient with different test automation frameworks i.e. Selenium, Cypress, TestNG etc.

LambdaTest Learning Hubs:

YouTube

You could also refer to video tutorials over LambdaTest YouTube channel to get step by step demonstration from industry experts.

Run backstopjs 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