How to use delegateSelectors method in backstopjs

Best JavaScript code snippet using backstopjs

runChromy.js

Source:runChromy.js

...267          backstopSelectorsExpMap: window._backstopSelectorsExpMap268        };269      })270      .result(_result => {271        resolve(delegateSelectors(272          chromy,273          scenario,274          viewport,275          variantOrScenarioLabelSafe,276          scenarioLabelSafe,277          config,278          _result.backstopSelectorsExp,279          _result.backstopSelectorsExpMap280        ));281      })282      .end()283      // If an error occurred then resolve with an error.284      .catch(e => resolve(new BackstopException('Chromy error', scenario, viewport, e)));285  });...

eventhandler.js

Source:eventhandler.js

1class Eventhandler {2	constructor(config = {}) {3		this.init(config);4	}5	/**6	 * _rootNode7	 * @type {WeakMap}8	 */9	_refs = {10		events: {},11		element: null,12		bind: null,13	};14	/**15	 * _element16	 */17	set _events(events) {18		this._refs.get(this).set('events', events);19	};20	get _events() {21		let _result = this._refs.get(this);22		return _result && this._refs.get(this).get('events') || {};23	};24	/**25	 * _element26	 */27	set _element(element) {28		this._refs.get(this).set('element', element);29	};30	get _element() {31		let _result = this._refs.get(this);32		return _result && this._refs.get(this).get('element') || {};33	};34	/**35	 * _bind36	 */37	set _bind(bind) {38		this._refs.get(this).set('bind', bind);39	};40	get _bind() {41		return this._refs.get(this).get('bind');42	};43	/**44	 * Main event callback wrapper45	 * @type {Object}46	 */47	_mainEventCallackContainer = {};48	/**49	 * init50	 * Initialize Eventhandler51	 * @return {undefined}52	 */53	init({ element, events, bind } = {}){54		this._initRefs({ element });55		// Assign element56		this._element = element;57		// bind bindObject58		if(bind){59			this._bind = bind;60			if(!events){61				return;62			}63			events = this._bindObjectToEventList(events, bind);64		}65		// group events66		let groupedEvents = this._groupEvents(events);67		this._events = groupedEvents;68		// add events eventListener69		this._addEventCollection(groupedEvents);70	}71	/**72	 * initialized73	 * @returns {boolean}74	 */75	initialized(){76		return this._refs.has(this);77	}78	/**79	 * reinit (alias for init)80	 * @param options {object}81	 */82	reinit(options){83		this.init(options);84	}85	/**86	 * destroy87	 * it will delete references88	 */89	destroy(){90		this._reset();91		this._refs.delete(this);92	}93	/**94	 * _initRefs95	 * @param element {HTMLElement}96	 * @private97	 */98	_initRefs({ element }){99		// init refs100		if(!element){101			throw new Error(`102				Required: element.103				Optional: use "events" when registering over constructor.104				Optional: use "bind" when bind object to handler.105			`);106		}107		if(!element instanceof HTMLElement) {108			throw new Error('Passed element should be instance of HTMLElement');109		}110		this._refs = new WeakMap([111			[this, new Map([112				['events', {}],113				['element', null],114				['bind',  null],115			])],116		]);117	}118	/**119	 * Convert eventDomain into seperate item120	 * @param  {String} eventDomain121	 * @return {Array} [ type, delegateSelector ]122	 */123	_prepareEventdomain(eventDomain) {124		if(Object.prototype.toString.call(eventDomain).slice(8, -1) !== 'String'){125			throw new Error('Passed argument must be a string');126		}127		let splitedEventDomain = eventDomain.split(' ');128		let type = splitedEventDomain[0];129		let delegateSelector = null;130		if(splitedEventDomain[1]){131			delegateSelector = splitedEventDomain.splice(1).join(' ');132		}133		return [ type, delegateSelector ];134	}135	/**136	 * Group events137	 * @param  {array} events138	 * @return {Object}139	 */140	_groupEvents(events = []){141		let tmpConfig = {};142		for(let [ eventDomain, handler ] of events){143			let [ type, delegateSelector ] = this._prepareEventdomain(eventDomain);144			if(!tmpConfig[type]){145				tmpConfig[type] = [];146			}147			tmpConfig[type].push({148				[ delegateSelector ]: handler,149			});150		}151		return tmpConfig; 152	}153	/**154	 * Bind object to event value155	 * @param  {array} events156	 * @param  {Object} bindObject157	 * @return {array}158	 */159	_bindObjectToEventList(events = [], bindObject = {}){160		let contextBindContainer = [];161		for(let [eventDomain, handler] of events){162			contextBindContainer.push([163				eventDomain, bindObject::handler164			]);165		}166		return contextBindContainer;167	}168	/**169	 * on170	 * @param  {String} eventDomain171	 * @param  {Function} handler172	 * @return {Undefined}173	 */174	on(eventDomain, handler){175		let events = this._events;176		let [ type, delegateSelector ] = this._prepareEventdomain(eventDomain);177		// if event type not registered, add to eventlistener178		if(!events[type]){179			events[type] = [];180			this._addEvent(this._element, type, events);181		}182		// add delegate selector to event list183		events[type].push({184			[ delegateSelector ]: this._bind ? this._bind::handler: handler,185		});186	}187	/**188	 * off event from listener by given eventdomain189	 * @param  {String} eventDomain190	 * @return {undefined}191	 */192	off(eventDomain) {193		let events = this._events;194		let [ type, delegateSelector ] = this._prepareEventdomain(eventDomain);195		if(!events[type]) {196			return;197		}198		let index = 0;199		for(let delegateObject of events[type]){200			// remove delegate callback if passed e.g. "click .foo"201			if(delegateSelector && delegateObject[delegateSelector]){202				events[type].splice(index, 1);203			}204			// remove all callbacks if passed type e.g. "click" or e.g. "click" is empty205			if((type && delegateSelector === null) || events[type].length === 0){206				delete events[type];207			}208			index++;209		}210		// remove listener if eventsList empty or not exists211		if(!events[type]){212			this._element.removeEventListener(type, this._mainEventCallackContainer[type]);213			delete events[type];214		}215	}216	/**217	 * trigger218	 * @param  {String} eventName219	 * @param  {Any} value220	 * @return {Undefined}221	 */222	trigger(eventName, value = null){223		let event = new CustomEvent(eventName, {224			detail: value,225			bubbles: true,226		});227		this._element.dispatchEvent(event);228	}229	/**230	 * Return event callbacks231	 * @param  {String} eventType232	 * @return {Array|null}233	 */234	getHandlers(eventType){235		return this._events[eventType] || null;236	}237	/**238	 * Add collection of events239	 * Example: see above constructor _events240	 * @param {Objbect} events241	 */242	_addEventCollection(events){243		// add events eventlistener244		for(let type in events){245			if(!events.hasOwnProperty(type)){246				continue;247			}248			this._addEvent(this._element, type, this._events);249		}250	}251	/**252	 * Add single event253	 * @param {HTMLElement} element254	 * @param {String} type255	 * @param {Function} callback256	 */257	_addEvent(element, type, configEvents) {258		// save reference callback. Its important for if necessary to remove it259		this._mainEventCallackContainer[type] = (event ) => {260			let delegateSelectors = configEvents[type];261			for(let delegateObject of delegateSelectors){262				// received key (delegateSelector) is always a key263				// therefore (see below) delegateSelector === "null"264				let delegateSelector = Object.keys(delegateObject)[0];265				let callback = delegateObject[delegateSelector];266				let matchedSelector = false;267				if(delegateSelector && event.target.matches){268					matchedSelector = event.target.matches(delegateSelector);269				}270				if(delegateSelector === "null" || matchedSelector){271					callback(event);272				}273			}274		};275		element.addEventListener(type, this._mainEventCallackContainer[type], false);276	}277	/**278	 * Removes all eventhandler279	 * @return {undefined}280	 */281	_reset() {282		let events = this._events;283		if(!Object.keys(events).length){284			return;285		}286		// add events eventlistener287		for(let type in events){288			if(!events.hasOwnProperty(type)){289				continue;290			}291			this.off(type);292		}293	}294}295export {296	Eventhandler...

helper.ts

Source:helper.ts

1/*2 * Copyright 2021 Harness Inc. All rights reserved.3 * Use of this source code is governed by the PolyForm Free Trial 1.0.0 license4 * that can be found in the licenses directory at the root of this repository, also available at5 * https://polyformproject.org/wp-content/uploads/2020/05/PolyForm-Free-Trial-1.0.0.txt.6 */7import type { ServiceNowUpdateData } from '@pipeline/components/PipelineSteps/Steps/ServiceNowUpdate/types'8import type { ServiceNowCreateFieldType } from '@pipeline/components/PipelineSteps/Steps/ServiceNowCreate/types'9import { FieldType, ServiceNowStaticFields } from '@pipeline/components/PipelineSteps/Steps/ServiceNowCreate/types'10import {11  omitDescNShortDesc,12  processFieldsForSubmit13} from '@pipeline/components/PipelineSteps/Steps/ServiceNowCreate/helper'14export const processFormData = (values: ServiceNowUpdateData): ServiceNowUpdateData => {15  let serviceNowSpec16  if (!values.spec.useServiceNowTemplate) {17    serviceNowSpec = {18      spec: {19        delegateSelectors: values.spec.delegateSelectors,20        useServiceNowTemplate: false,21        connectorRef: values.spec.connectorRef,22        ticketType: values.spec.ticketType,23        ticketNumber: values.spec.ticketNumber,24        fields: processFieldsForSubmit(values)25      }26    }27  } else {28    serviceNowSpec = {29      spec: {30        delegateSelectors: values.spec.delegateSelectors,31        useServiceNowTemplate: true,32        connectorRef: values.spec.connectorRef,33        ticketType: values.spec.ticketType,34        ticketNumber: values.spec.ticketNumber,35        fields: [],36        templateName: values.spec.templateName37      }38    }39  }40  return {41    ...values,42    ...serviceNowSpec43  }44}45export const getKVFields = (values: ServiceNowUpdateData): ServiceNowCreateFieldType[] => {46  return processFieldsForSubmit(values)47}48export const processInitialValues = (values: ServiceNowUpdateData): ServiceNowUpdateData => {49  return {50    ...values,51    spec: {52      delegateSelectors: values.spec.delegateSelectors,53      connectorRef: values.spec.connectorRef,54      useServiceNowTemplate: values.spec.useServiceNowTemplate,55      fieldType: values.spec.useServiceNowTemplate ? FieldType.CreateFromTemplate : FieldType.ConfigureFields,56      ticketType: values.spec.ticketType,57      description: values.spec.fields58        ?.find(field => field.name === ServiceNowStaticFields.description)59        ?.value.toString() as string,60      shortDescription: values.spec.fields61        ?.find(field => field.name === ServiceNowStaticFields.short_description)62        ?.value.toString() as string,63      fields: omitDescNShortDesc(values.spec.fields),64      ticketNumber: values.spec.ticketNumber,65      templateName: values.spec.templateName,66      selectedFields: [],67      templateFields: []68    }69  }...

Using AI Code Generation

1module.exports = async function (page, scenario) {2  var hoverSelector = scenario.hoverSelectors;3  var clickSelector = scenario.clickSelectors;4  try {5    for (const hoverSelector of scenario.hoverSelectors) {6      await page.waitForSelector(hoverSelector);7      await page.hover(hoverSelector);8    }9    for (const clickSelector of scenario.clickSelectors) {10      await page.waitForSelector(clickSelector);11      await page.click(clickSelector);12    }13    for (const keyPressSelector of scenario.keyPressSelectors) {14      await page.waitForSelector(keyPressSelector.selector);15      await page.type(keyPressSelector.selector, keyPressSelector.keyPress, {16      });17    }18    for (const postInteractionWait of scenario.postInteractionWait) {19      await page.waitForTimeout(postInteractionWait);20    }21  } catch (err) {}22};23var config = {24};25module.exports = config;26var config = {27};28module.exports = config;

Using AI Code Generation

1var backstop = require('backstopjs');2var backstopConfig = require('./backstop.json');3backstop('reference', {4})5.then(function () {6  return backstop('test', {7  });8})9.then(function () {10})11.catch(function (err) {12  console.error(err);13});14backstop('reference', {15})16.then(function () {17  return backstop('test', {18  });19})20.then(function () {21})22.catch(function (err) {23  console.error(err);24});

Using AI Code Generation

1var backstop = require('backstopjs');2var config = require('./backstop.json');3backstop('reference', {config: config})4.then(function() {5  return backstop('test', {config: config});6})7.then(function() {8  console.log('done');9})10.catch(function(e) {11  console.log(e);12});13{14    {15    },16    {17    },18    {19    }20    {21    }22  "paths": {23  },24  "engineOptions": {25  },26}27module.exports = function (chromy, scenario) {28  chromy.evaluate(function() {29  });30};

Using AI Code Generation

1var backstop = require('backstopjs');2var config = require('./backstop.json');3backstop('reference', { config: config }).then(function () {4    backstop('test', { config: config });5});6{7    {8    },9    {10    },11    {12    }13    {14    }15  "paths": {16  },17  "engineOptions": {18  },19}20module.exports = function (chromy, scenario) {21  require('./onReady')(chromy, scenario);22  chromy.evaluate(function () {23    console.log('Runnning custom onBefore script for ' + scenario.label);24  });25};26module.exports = function (chromy, scenario) {27  console.log('onReady.js has run for ' + scenario.label);

Using AI Code Generation

1module.exports = function (casper, scenario, vp) {2  casper.echo('DELEGATING SELECTORS for ' + vp.label);3  require('./delegateSelectors')(casper, scenario, vp);4  casper.echo('FINISHED DELEGATING SELECTORS for ' + vp.label);5};6module.exports = function (casper, scenario, vp) {7  casper.echo('DELEGATING SELECTORS for ' + vp.label);8  casper.evaluate(function () {9    console.log('DELEGATING SELECTORS for ' + vp.label);10    __utils__.delegateSelectors('body', 'div#main', true);11    __utils__.delegateSelectors('body', 'div#main', false);12  });13  casper.echo('FINISHED DELEGATING SELECTORS for ' + vp.label);14};15{16    {17    },18    {19    },20    {21    },22    {23    }24    {25    }26  "paths": {

Using AI Code Generation

1var backstopjs = require('backstopjs');2var backstop = require('backstopjs/core/command');3var path = require('path');4var fs = require('fs');5var delegateSelectors = require('backstopjs/core/util/delegateSelectors');6var config = require('./backstop.json');7    {8    },9    {10    },11    {12    },13    {14    }15];16    {17    },18    {19    },20    {21    }22];23var config = {24        {25        },26        {27        },28        {29        },30        {31        },32        {33        }34    "paths": {

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.