How to use selectField method in backstopjs

Best JavaScript code snippet using backstopjs

mdl-selectfield.js

Source:mdl-selectfield.js Github

copy

Full Screen

1(function() {2 'use strict';3 /**4 * Class constructor for Select field MDL component.5 * Implements custom MDL component design pattern not defined yet.6 *7 * @constructor8 * @param {HTMLElement} element The element that will be upgraded.9 */10 var MaterialSelectfield = function MaterialSelectfield(element) {11 this.element_ = element;12 // Initialize instance.13 this.init();14 };15 window['MaterialSelectfield'] = MaterialSelectfield;16 MaterialSelectfield.prototype.Constant_ = {17 // None for now18 };19 MaterialSelectfield.prototype.CssClasses_ = {20 LABEL: 'mdl-selectfield__label',21 SELECT: 'mdl-selectfield__select',22 IS_DIRTY: 'is-dirty',23 IS_FOCUSED: 'is-focused',24 IS_DISABLED: 'is-disabled',25 IS_INVALID: 'is-invalid',26 IS_UPGRADED: 'is-upgraded'27 };28 /**29 * Handle focus.30 *31 * @param {Event} event The event that fired.32 * @private33 */34 MaterialSelectfield.prototype.onFocus_ = function(event) {35 this.element_.classList.add(this.CssClasses_.IS_FOCUSED);36 };37 /**38 * Handle lost focus.39 *40 * @param {Event} event The event that fired.41 * @private42 */43 MaterialSelectfield.prototype.onBlur_ = function(event) {44 this.element_.classList.remove(this.CssClasses_.IS_FOCUSED);45 };46 /**47 * Handle reset event from outside.48 *49 * @param {Event} event The event that fired.50 * @private51 */52 MaterialSelectfield.prototype.onReset_ = function(event) {53 this.updateClasses_();54 };55 /**56 * Handle class updates.57 *58 * @private59 */60 MaterialSelectfield.prototype.updateClasses_ = function() {61 this.checkDisabled();62 this.checkValidity();63 this.checkDirty();64 };65 // Public methods.66 /**67 * Check the disabled state and update field accordingly.68 *69 * @public70 */71 MaterialSelectfield.prototype.checkDisabled = function() {72 if (this.select_.disabled) {73 this.element_.classList.add(this.CssClasses_.IS_DISABLED);74 } else {75 this.element_.classList.remove(this.CssClasses_.IS_DISABLED);76 }77 };78 MaterialSelectfield.prototype['checkDisabled'] = MaterialSelectfield.prototype.checkDisabled;79 /**80 * Check the validity state and update field accordingly.81 *82 * @public83 */84 MaterialSelectfield.prototype.checkValidity = function() {85 if (this.select_.validity.valid) {86 this.element_.classList.remove(this.CssClasses_.IS_INVALID);87 } else {88 this.element_.classList.add(this.CssClasses_.IS_INVALID);89 }90 };91 MaterialSelectfield.prototype['checkValidity'] = MaterialSelectfield.prototype.checkValidity;92 /**93 * Check the dirty state and update field accordingly.94 *95 * @public96 */97 MaterialSelectfield.prototype.checkDirty = function() {98 if (this.select_.value && this.select_.value.length > 0) {99 this.element_.classList.add(this.CssClasses_.IS_DIRTY);100 } else {101 this.element_.classList.remove(this.CssClasses_.IS_DIRTY);102 }103 };104 MaterialSelectfield.prototype['checkDirty'] = MaterialSelectfield.prototype.checkDirty;105 /**106 * Enable select field.107 *108 * @public109 */110 MaterialSelectfield.prototype.disable = function() {111 this.select_.disabled = true;112 this.updateClasses_();113 };114 MaterialSelectfield.prototype['disable'] = MaterialSelectfield.prototype.disable;115 /**116 * Enable select field.117 *118 * @public119 */120 MaterialSelectfield.prototype.enable = function() {121 this.select_.disabled = false;122 this.updateClasses_();123 };124 MaterialSelectfield.prototype['enable'] = MaterialSelectfield.prototype.enable;125 /**126 * Update select field value.127 *128 * @param {string} value The value to which to set the control (optional).129 * @public130 */131 MaterialSelectfield.prototype.change = function(value) {132 if (value) {133 this.select_.value = value;134 }135 this.updateClasses_();136 };137 MaterialSelectfield.prototype['change'] = MaterialSelectfield.prototype.change;138 /**139 * Initialize element.140 */141 MaterialSelectfield.prototype.init = function() {142 if (this.element_) {143 this.label_ = this.element_.querySelector('.' + this.CssClasses_.LABEL);144 this.select_ = this.element_.querySelector('.' + this.CssClasses_.SELECT);145 if (this.select_) {146 this.boundUpdateClassesHandler = this.updateClasses_.bind(this);147 this.boundFocusHandler = this.onFocus_.bind(this);148 this.boundBlurHandler = this.onBlur_.bind(this);149 this.boundResetHandler = this.onReset_.bind(this);150 this.select_.addEventListener('change', this.boundUpdateClassesHandler);151 this.select_.addEventListener('focus', this.boundFocusHandler);152 this.select_.addEventListener('blur', this.boundBlurHandler);153 this.select_.addEventListener('reset', this.boundResetHandler);154 var invalid = this.element_.classList155 .contains(this.CssClasses_.IS_INVALID);156 this.updateClasses_();157 this.element_.classList.add(this.CssClasses_.IS_UPGRADED);158 if (invalid) {159 this.element_.classList.add(this.CssClasses_.IS_INVALID);160 }161 }162 }163 };164 /**165 * Downgrade the component166 *167 * @private168 */169 MaterialSelectfield.prototype.mdlDowngrade_ = function() {170 this.select_.removeEventListener('change', this.boundUpdateClassesHandler);171 this.select_.removeEventListener('focus', this.boundFocusHandler);172 this.select_.removeEventListener('blur', this.boundBlurHandler);173 this.select_.removeEventListener('reset', this.boundResetHandler);174 };175 // The component registers itself. It can assume componentHandler is available176 // in the global scope.177 componentHandler.register({178 constructor: MaterialSelectfield,179 classAsString: 'MaterialSelectfield',180 cssClass: 'mdl-js-selectfield',181 widget: true182 });...

Full Screen

Full Screen

script.js

Source:script.js Github

copy

Full Screen

1(function($){2 $(document).ready(function($){3 var xhr ,timeout;4 $('body').addClass('woocommerce');5 $('.ajaxsearchform').on('submit',function(e){6 e.preventDefault();7 });8 function get_div_id() {9 var div_id = dokanLiveSearch.themeTags[dokanLiveSearch.currentTheme];10 if ( div_id === undefined ) {11 return '#content';12 }13 return div_id;14 }15 $('body').on('keyup', '.dokan-ajax-search-textfield', function(evt){16 evt.preventDefault();17 var self = $(this);18 var nurl = self.closest('form').attr('action');19 var textfield = self.val();20 var selectfield = self.closest('.ajaxsearchform').find('.dokan-ajax-search-category').val();21 var ordershort = $('.woocommerce-ordering .orderby').val();22 if(evt.type != 'change'){23 var charCode = (evt.which) ? evt.which : event.keyCode;24 }25 if (charCode > 64 && charCode < 91 || charCode > 96 && charCode < 123 || charCode > 47 && charCode < 58 || charCode == 8 || charCode == 127 ) {26 for_onkeyup_onchange(evt,self, nurl, textfield, selectfield, ordershort);27 }28 });29 $('body').on('change', '.dokan-ajax-search-category', function(e) {30 e.preventDefault();31 var self = $(this);32 var nurl = self.closest('form').attr('action');33 var textfield = self.closest('.ajaxsearchform').find('.dokan-ajax-search-textfield').val();34 var selectfield = self.val();35 var ordershort = $('.woocommerce-ordering .orderby').val();36 for_onkeyup_onchange(e, self, nurl, textfield, selectfield, ordershort );37 });38 function for_onkeyup_onchange( evt, self, nurl, textfield, selectfield, ordershort ) {39 if ( ! ordershort ){40 ordershort = '';41 }42 if(selectfield == 'All' && evt.type == 'change' && ordershort == 'menu_order'){43 var url = nurl +'?s='+ textfield.replace(/\s/g,"+")+'&post_type=product';44 loading_get_request( url, textfield, selectfield );45 } else if(selectfield == 'All' && ordershort == 'menu_order') {46 var url = nurl +'?s='+ textfield.replace(/\s/g,"+")+'&post_type=product';47 loading_get_request( url, textfield, selectfield );48 } else if(selectfield == 'All' && ordershort != 'menu_order') {49 var url = nurl +'?s='+ textfield.replace(/\s/g,"+")+'&post_type=product&orderby='+ordershort;50 loading_get_request( url, textfield, selectfield );51 }else if(selectfield != 'All' && ordershort == 'menu_order'){52 var url = nurl +'?s='+ textfield.replace(/\s/g,"+")+'&post_type=product&product_cat='+ selectfield;53 loading_get_request( url, textfield, selectfield );54 } else {55 var url = nurl +'?s='+ textfield.replace(/\s/g,"+")+'&post_type=product&product_cat='+ selectfield + '&orderby=' + ordershort;56 loading_get_request( url, textfield, selectfield );57 }58 }59 function loading_get_request( url, textfield, selectfield ){60 var div_id = get_div_id();61 $(div_id).append('<div id="loading"><img src="' + dokanLiveSearch.loading_img + '" atr="Loding..."/></div>');62 $(div_id).css({'opacity':0.3,'position':'relative'});63 $('#loading').show();64 clearTimeout(timeout);65 if(xhr) {66 xhr.abort();67 }68 timeout = setTimeout(function(){69 xhr = get_ajax_request( url, textfield, selectfield );70 },150);71 }72 function get_ajax_request( url, textfield, selectfield ) {73 xhr = $.get(url, function(resp, status) {74 var dom = $(resp).find(get_div_id()).html();75 $('.dokan-ajax-search-textfield').val( textfield );76 $('.dokan-ajax-search-category').val( selectfield );77 $(get_div_id()).html(dom);78 $('#loading').hide();79 $(get_div_id()).css({'opacity':1,'position':'auto'});80 $('.woocommerce-ordering').on('change','.orderby',function(e){81 e.preventDefault();82 var self = $(this);83 var nurl = $('.ajaxsearchform').attr('action');84 var textfield = $('.dokan-ajax-search-textfield').val();85 var selectfield = $('.dokan-ajax-search-category').val();86 var ordershort = self.val();87 for_onkeyup_onchange(e, self, nurl, textfield, selectfield, ordershort );88 });89 });90 return xhr;91 }92 });...

Full Screen

Full Screen

SelectField.spec.js

Source:SelectField.spec.js Github

copy

Full Screen

1import React from 'react';2import assert from 'assert';3import { shallow } from 'enzyme';4import { SelectField } from './SelectField';5describe('<SelectField />', () => {6 const defaultProps = {7 source: 'foo',8 choices: [{ id: 0, name: 'hello' }, { id: 1, name: 'world' }],9 translate: x => x,10 };11 it('should return null when the record is not set', () =>12 assert.equal(shallow(<SelectField {...defaultProps} />).html(), null));13 it('should return null when the record has no value for the source', () =>14 assert.equal(15 shallow(<SelectField {...defaultProps} record={{}} />).html(),16 null17 ));18 it('should return null when the record has a value for the source not in the choices', () =>19 assert.equal(20 shallow(21 <SelectField {...defaultProps} record={{ foo: 2 }} />22 ).html(),23 null24 ));25 it('should render the choice', () => {26 const wrapper = shallow(27 <SelectField {...defaultProps} record={{ foo: 0 }} />28 );29 const chipElement = wrapper.find('WithStyles(Typography)');30 assert.equal(chipElement.children().text(), 'hello');31 });32 it('should use custom className', () => {33 const wrapper = shallow(34 <SelectField35 {...defaultProps}36 record={{ foo: 1 }}37 elStyle={{ margin: 1 }}38 className="foo"39 />40 );41 const chipElement = wrapper.find('WithStyles(Typography)');42 assert.deepEqual(chipElement.prop('className'), 'foo');43 });44 it('should handle deep fields', () => {45 const wrapper = shallow(46 <SelectField47 {...defaultProps}48 record={{ foo: { bar: 0 } }}49 source="foo.bar"50 />51 );52 const chipElement = wrapper.find('WithStyles(Typography)');53 assert.equal(chipElement.children().text(), 'hello');54 });55 it('should use optionValue as value identifier', () => {56 const wrapper = shallow(57 <SelectField58 {...defaultProps}59 record={{ foo: 0 }}60 optionValue="foobar"61 choices={[{ foobar: 0, name: 'hello' }]}62 />63 );64 const chipElement = wrapper.find('WithStyles(Typography)');65 assert.equal(chipElement.children().text(), 'hello');66 });67 it('should use optionText with a string value as text identifier', () => {68 const wrapper = shallow(69 <SelectField70 {...defaultProps}71 record={{ foo: 0 }}72 optionText="foobar"73 choices={[{ id: 0, foobar: 'hello' }]}74 />75 );76 const chipElement = wrapper.find('WithStyles(Typography)');77 assert.equal(chipElement.children().text(), 'hello');78 });79 it('should use optionText with a function value as text identifier', () => {80 const wrapper = shallow(81 <SelectField82 {...defaultProps}83 record={{ foo: 0 }}84 optionText={choice => choice.foobar}85 choices={[{ id: 0, foobar: 'hello' }]}86 />87 );88 const chipElement = wrapper.find('WithStyles(Typography)');89 assert.equal(chipElement.children().text(), 'hello');90 });91 it('should use optionText with an element value as text identifier', () => {92 const Foobar = ({ record }) => <span>{record.foobar}</span>;93 const wrapper = shallow(94 <SelectField95 {...defaultProps}96 record={{ foo: 0 }}97 optionText={<Foobar />}98 choices={[{ id: 0, foobar: 'hello' }]}99 />100 );101 const chipElement = wrapper.find('Foobar');102 assert.deepEqual(chipElement.prop('record'), {103 id: 0,104 foobar: 'hello',105 });106 });107 it('should translate the choice by default', () => {108 const wrapper = shallow(109 <SelectField110 {...defaultProps}111 record={{ foo: 0 }}112 translate={x => `**${x}**`}113 />114 );115 const chipElement = wrapper.find('WithStyles(Typography)');116 assert.equal(chipElement.children().text(), '**hello**');117 });118 it('should not translate the choice if translateChoice is false', () => {119 const wrapper = shallow(120 <SelectField121 {...defaultProps}122 record={{ foo: 0 }}123 translate={x => `**${x}**`}124 translateChoice={false}125 />126 );127 const chipElement = wrapper.find('WithStyles(Typography)');128 assert.equal(chipElement.children().text(), 'hello');129 });...

Full Screen

Full Screen

Using AI Code Generation

copy

Full Screen

1module.exports = async (page, scenario, vp) => {2 await require('./clickAndHoverHelper')(page, scenario, vp);3 console.log('SCENARIO > ' + scenario.label);4 if (scenario.selectors) {5 for (const selector of scenario.selectors) {6 await page.waitForSelector(selector);7 await page.select(selector, scenario.selectorValue);8 }9 }10 await page.waitFor(1000);11};

Full Screen

Full Screen

Using AI Code Generation

copy

Full Screen

1module.exports = async (page, scenario, vp) => {2 await require('./clickAndHoverHelper')(page, scenario, vp);3 await page.waitForSelector('select');4 await page.select('select', 'value');5};6module.exports = async (page, scenario, vp) => {7 console.log('SCENARIO > ' + scenario.label);8 if (scenario.clickSelector) {9 await page.waitForSelector(scenario.clickSelector);10 await page.click(scenario.clickSelector);11 }12 if (scenario.hoverSelector) {13 await page.waitForSelector(scenario.hoverSelector);14 await page.hover(scenario.hoverSelector);15 }16 if (scenario.postInteractionWait) {17 await page.waitFor(scenario.postInteractionWait);18 }19};20{21 {22 }23 {24 }25 "paths": {26 },27 "engineOptions": {28 },

Full Screen

Full Screen

Using AI Code Generation

copy

Full Screen

1module.exports = async (page, scenario, vp) => {2 await require('./selectAndSetDate')(page, scenario, vp);3 await require('./selectAndSetDate2')(page, scenario, vp);4 await require('./selectAndSetDate3')(page, scenario, vp);5 await require('./selectAndSetDate4')(page, scenario, vp);6 await require('./selectAndSetDate5')(page, scenario, vp);7 await require('./selectAndSetDate6')(page, scenario, vp);8 await require('./selectAndSetDate7')(page, scenario, vp);9 await require('./selectAndSetDate8')(page, scenario, vp);10 await require('./selectAndSetDate9')(page, scenario, vp);11 await require('./selectAndSetDate10')(page, scenario, vp);12 await require('./selectAndSetDate11')(page, scenario, vp);13 await require('./selectAndSetDate12')(page, scenario, vp);14 await require('./selectAndSetDate13')(page, scenario, vp);15 await require('./selectAndSetDate14')(page, scenario, vp);16 await require('./selectAndSetDate15')(page, scenario, vp);17 await require('./selectAndSetDate16')(page, scenario, vp);18 await require('./selectAndSetDate17')(page, scenario, vp);19 await require('./selectAndSetDate18')(page, scenario, vp);20 await require('./selectAndSetDate19')(page, scenario, vp);21 await require('./selectAndSetDate20')(page, scenario, vp);22 await require('./selectAndSetDate21')(page, scenario, vp);23 await require('./selectAndSetDate22')(page, scenario, vp);24 await require('./selectAndSetDate23')(page, scenario, vp);25 await require('./selectAndSetDate24')(page, scenario, vp);26 await require('./selectAndSetDate25')(page, scenario, vp);27 await require('./selectAndSetDate26')(page, scenario, vp);28 await require('./selectAndSetDate27')(page, scenario, vp);29 await require('./selectAndSetDate28')(page, scenario, vp);30 await require('./selectAndSetDate29')(page, scenario, vp);31 await require('./selectAndSetDate30')(page, scenario, vp);32 await require('./selectAnd

Full Screen

Full Screen

Using AI Code Generation

copy

Full Screen

1module.exports = async (page, scenario, vp) => {2 await require('./clickAndHoverHelper')(page, scenario, vp);3 await page.evaluate(() => {4 document.querySelector('.selectField').click();5 });6};

Full Screen

Full Screen

Using AI Code Generation

copy

Full Screen

1module.exports = async (page, scenario) => {2 const select = await page.$(scenario.selectors[0]);3 await select.select(scenario.selectors[1]);4};5{6 {7 }8}9- **selectors** - Array of CSS selectors to be used to capture a screenshot. (required)10- **selectorExpansion** - Boolean to enable/disable the selector expansion feature. (default: true)11- **readyEvent** - Event to wait for before capturing a screenshot. (default: 'DOMContentLoaded')12- **readySelector** - CSS selector to wait for before capturing a screenshot. (default: null)13- **delay** - Number of milliseconds to wait before capturing a screenshot. (default: 0)14- **misMatchThreshold** - Number between 0 and 100 that specifies the percentage of pixels that can differ before BackstopJS reports a failure. (default: 0.1)15- **requireSameDimensions** - Boolean to require that the reference and test screenshots have the same dimensions. (default: false)16- **viewports** - Array of viewports to capture screenshots of. (required)17- **onReadyScriptTimeout** - The maximum amount of time in milliseconds to wait for onReadyScript to complete. (default: 10000)18- **onReadyScriptWaitForSelectorTimeout** - The maximum amount of time in milliseconds to wait for onReadyScriptWaitForSelector to be present in the DOM. (default: 10000)19- **onReadyScriptWaitForTimeout** - The maximum amount of time in milliseconds to wait for onReadyScript to complete. (default: 10000)

Full Screen

Full Screen

Using AI Code Generation

copy

Full Screen

1module.exports = async (page, scenario, vp) => {2 await require('./clickAndHoverHelper')(page, scenario, vp);3 await page.waitForSelector('#edit-field-geographic-coverage-und-0-value');4 await page.select('#edit-field-geographic-coverage-und-0-value', 'Africa');5 await page.waitFor(500);6};

Full Screen

Full Screen

Using AI Code Generation

copy

Full Screen

1module.exports = async (page, scenario, vp) => {2 await require('./clickAndHoverHelper')(page, scenario, vp);3 await page.evaluate(function () {4 const select = document.querySelector('#edit-field-activity-type-und');5 select.selectedIndex = 1;6 select.dispatchEvent(new Event('change'));7 });8 await require('./clickAndHoverHelper')(page, scenario, vp);9 await page.evaluate(function () {10 const select = document.querySelector('#edit-field-activity-type-und');11 select.selectedIndex = 2;12 select.dispatchEvent(new Event('change'));13 });14 await require('./clickAndHoverHelper')(page, scenario, vp);15 await page.evaluate(function () {16 const select = document.querySelector('#edit-field-activity-type-und');17 select.selectedIndex = 3;18 select.dispatchEvent(new Event('change'));19 });20 await require('./clickAndHoverHelper')(page, scenario, vp);21 await page.evaluate(function () {22 const select = document.querySelector('#edit-field-activity-type-und');23 select.selectedIndex = 4;24 select.dispatchEvent(new Event('change'));25 });26 await require('./clickAndHoverHelper')(page, scenario, vp);27 await page.evaluate(function () {28 const select = document.querySelector('#edit-field-activity-type-und');29 select.selectedIndex = 5;30 select.dispatchEvent(new Event('change'));31 });32 await require('./clickAndHoverHelper')(page, scenario, vp);33 await page.evaluate(function () {34 const select = document.querySelector('#edit-field-activity-type-und');35 select.selectedIndex = 6;36 select.dispatchEvent(new Event('change'));37 });38 await require('./clickAndHoverHelper')(page, scenario, vp);39 await page.evaluate(function () {40 const select = document.querySelector('#edit-field-activity-type-und');41 select.selectedIndex = 7;42 select.dispatchEvent(new Event('change'));43 });44 await require('./clickAndHoverHelper')(page, scenario, vp);45 await page.evaluate(function () {46 const select = document.querySelector('#edit-field-activity-type-und');47 select.selectedIndex = 8;48 select.dispatchEvent(new Event('change'));49 });50};

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