Discover AI-native insights at Testμ Conference‘25

How to use extendConfig method in backstopjs

Best JavaScript code snippet using backstopjs

index.js

1const {minGifImage, getSuffix, notBlank, getSuffixFromBuffer} = require('./utils')2module.exports = (ctx) => {3    const register = () => {4        ctx.helper.uploader.register('post-uploader', {5            handle,6            name: 'Postå¾åº',7            config: config8        });9    }10    const handle = async function (ctx) {11        let userConfig = ctx.getConfig('picBed.post-uploader');12        if (!userConfig) {13            throw new Error('Can\'t find uploader config');14        }15        //åå§åéç½®16        const url = userConfig.url;17        const paramName = userConfig.paramName;18        const urlFetcher = userConfig.urlFetcher;19        const extendConfig = JSON.parse(userConfig.extendConfig);20        try {21            let imgList = ctx.output;22            for (let i in imgList) {23                let img = imgList[i];24                let image = img.buffer;25                if (!image && img.base64Image) {26                    image = Buffer.from(img.base64Image, 'base64');27                } else if (extendConfig.enableImageMask !== false) {28                    // let suffix = getSuffixFromBuffer(image);29                    let suffix = getSuffix(img.fileName);30                    if (extendConfig.imageSuffixList === undefined) {31                        extendConfig.imageSuffixList = ['jpg', 'jpeg', 'png', 'gif', 'bmp', 'ico']32                    }33                    //éæå®åç¼34                    if (extendConfig.imageSuffixList.indexOf(suffix) === -1) {35                        if (extendConfig.headBase64 === undefined) {36                            extendConfig.headBase64 = minGifImage;37                        } else {38                            extendConfig.headBase64 = Buffer.from(extendConfig.headBase64, 'base64');39                        }40                        image = Buffer.concat([extendConfig.headBase64, image]);41                        ctx.log.info('>>>', 'éå¾çä¸ä¼ , å¤´é¨æ°å¢');42                        img.fileName = extendConfig.maskImageName || '1.gif';43                    }44                }45                const postConfig = postOptions(image, url, paramName, img.fileName, extendConfig)46                let response = await ctx.Request.request(postConfig)47                delete img.base64Image48                delete img.buffer49                if (!urlFetcher) {50                    img['imgUrl'] = response51                } else {52                    try {53                        if (urlFetcher[0] === '$') {54                            // eslint-disable-next-line no-eval55                            img['imgUrl'] = eval(urlFetcher.slice(1))56                        } else {57                            // eslint-disable-next-line no-eval58                            img['imgUrl'] = eval('JSON.parse(response).' + urlFetcher)59                        }60                    } catch (e) {61                        ctx.emit('notification', {62                            title: 'è¿åè§£æå¤±è´¥,è¯·æ£æ¥urlFetcherè®¾ç½®',63                            body: e + '\n' + response64                        })65                    }66                }67            }68        } catch (err) {69            ctx.emit('notification', {70                title: 'ä¸ä¼ å¤±è´¥',71                body: JSON.stringify(err)72            })73        }74    }75    const postOptions = (image, url, paramName, fileName, extendConfig) => {76        let headers = {77            contentType: 'multipart/form-data',78            'User-Agent': 'Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/90.0.4430.212 Safari/537.36'79        }80        if (extendConfig.extendHeader) {81            headers = Object.assign(headers, extendConfig.extendHeader)82        }83        let formData = {}84        if (extendConfig.extendForm) {85            formData = Object.assign(formData, extendConfig.extendForm)86        }87        const opts = {88            method: 'POST',89            url: url,90            headers: headers,91            formData: formData92        }93        opts.formData[paramName] = {}94        opts.formData[paramName].value = image95        opts.formData[paramName].options = {96            filename: fileName97        }98        return opts99    }100    const config = ctx => {101        let userConfig = ctx.getConfig('picBed.post-uploader')102        if (!userConfig) {103            userConfig = {}104        }105        return [106            {107                name: 'url',108                type: 'input',109                default: userConfig.url,110                required: true,111                message: 'ä¸ä¼ æ¥å£å°å',112                alias: 'ä¸ä¼ æ¥å£å°å'113            },114            {115                name: 'paramName',116                type: 'input',117                default: userConfig.paramName,118                required: true,119                message: 'æä»¶åæ®µå',120                alias: 'æä»¶åæ®µå'121            },122            {123                name: 'urlFetcher',124                type: 'input',125                default: userConfig.urlFetcher,126                required: false,127                message: 'å¾çURLè·å å¡«JSONè·¯å¾(eg: data.url)æevalè¡¨è¾¾å¼(eg: $"https://xxx/"+JSON.parse(response).data.uri)',128                alias: 'å¾çURLè·å'129            },130            {131                name: 'extendConfig',132                type: 'input',133                default: '{}',134                required: false,135                message: 'æ©å±éç½® æ åJSON(eg: {"key":"value"})',136                alias: 'æ©å±éç½®'137            }138        ]139    }140    return {141        uploader: 'post-uploader',142        register143    }...

index.ts

Source: index.ts

1import { SLIDER_TEMPLATE } from './template';2import { SliderManager } from './slider-manager';3export default class RangeSlider {4    private _button: any;5    /**6    * Plugin init7    * @function init8    * @param {Any} mapApi the viewer api9    */10    init(mapApi: any) {11        this.mapApi = mapApi;12        // create panel13        this.panel = this.mapApi.panels.create('rangeSlider');14        this.panel.element.css(RangeSlider.prototype.panelOptions);15        this.panel.body = SLIDER_TEMPLATE;16        // get slider configuration then add/merge needed configuration17        const config = this._RV.getConfig('plugins').rangeSlider;18        let extendConfig: any = {}19        if (typeof config !== 'undefined') {20            extendConfig = { ...RangeSlider.prototype.layerOptions, ...config.params };21            extendConfig.controls = config.controls;22            extendConfig.layers = config.layers;23            extendConfig.open = config.open;24        } else {25            extendConfig = RangeSlider.prototype.layerOptions;26        }27        extendConfig.language = this._RV.getCurrentLang();28        // side menu button29        this._button = this.mapApi.mapI.addPluginButton(30            RangeSlider.prototype.translations[this._RV.getCurrentLang()].title, this.onMenuItemClick()31        );32        if (extendConfig.open) { this._button.isActive = true; }33        // start slider creation34        new SliderManager(mapApi, this.panel, extendConfig);35    }36    /**37    * Event to fire on side menu item click. Open/Close the panel38    * @function onMenuItemClick39    * @return {function} the function to run40    */41   onMenuItemClick() {42        return () => {43            this._button.isActive = !this._button.isActive;44            this._button.isActive ? this.panel.open() : this.panel.close();45        };46    }47}48export default interface RangeSlider {49    mapApi: any,50    _RV: any,51    translations: any,52    panel: any,53    panelOptions: any,54    layerOptions: any55}56export interface Range {57    min: number,58    max: number59}60RangeSlider.prototype.panelOptions = {61    top: 'calc(100% - 235px)',62    height: '185px',63    'margin-right': '60px',64    'margin-left': '420px'65};66RangeSlider.prototype.layerOptions = {67    open: true,68    precision: 2,69    delay: 3000,70    lock: false,71    loop: false,72    export: false,73    range: { min: null, max: null },74    limit: { min: null, max: null },75    type: 'date',76    layers: [],77    controls: ['lock', 'loop', 'delay', 'refresh']78};79RangeSlider.prototype.translations = {80    'en-CA': {81        title: 'Range Slider',82        bar: {83            show: 'Show slider information',84            hide: 'Hide slider information',85            lock: 'Lock left anchor',86            unlock: 'Unlock left anchor',87            loop: 'Animate in loop',88            unloop: 'Do not animate in loop',89            previous: 'Previous',90            play: 'Play',91            pause: 'Pause',92            foward: 'Next',93            delay: 'Delay',94            refresh: 'Refresh',95            gif: 'GIF',96            tooltip: {97                gif: 'If enabled, click \"Play\" to start then \"Pause\" to finish then disable the control to export GIF'98            }99        }100    },101    'fr-CA': {102        title: 'Curseur de plage',103        bar: {104            show: 'Afficher l\'information du curseur de plage',105            hide: 'Cacher l\'information du curseur de plage',106            lock: 'Verrouiller la molette gauche',107            unlock: 'DÃ©verrouiller la molette gauche',108            loop: 'Animer en boucle',109            unloop: 'Ne pas animer en boucle',110            previous: 'PrÃ©cÃ©dent',111            play: 'Jouer',112            pause: 'Pause',113            foward: 'Prochain',114            delay: 'DÃ©lai',115            refresh: 'RafraÃ®chir',116            gif: 'GIF',117            tooltip: {118                gif: 'Si activÃ©, cliquez sur \"Jouer\" pour dÃ©marrer, puis sur \"Pause\" pour terminer et dÃ©sactiver le contrÃ´le pour exporter le GIF'119            }120        }121    }122};...

HeaderJoel.js

Source: HeaderJoel.js

1define(function() {2    return function(controller) {3        var HeaderJoel = new kony.ui.FlexContainer(extendConfig({4            "autogrowMode": kony.flex.AUTOGROW_NONE,5            "clipBounds": true,6            "isMaster": true,7            "height": "11.23%",8            "id": "HeaderJoel",9            "isVisible": true,10            "layoutType": kony.flex.FREE_FORM,11            "left": "0dp",12            "isModalContainer": false,13            "skin": "CopyslFbox0f3e5773cb44346",14            "top": "0dp",15            "width": "100%"16        }, controller.args[0], "HeaderJoel"), extendConfig({17            "retainFlowHorizontalAlignment": false18        }, controller.args[1], "HeaderJoel"), extendConfig({}, controller.args[2], "HeaderJoel"));19        HeaderJoel.setDefaultUnit(kony.flex.DP);20        var btnBack = new kony.ui.Image2(extendConfig({21            "height": "27dp",22            "id": "btnBack",23            "isVisible": false,24            "left": "2%",25            "onTouchStart": controller.AS_onClickBtnBack_d44e2cf05e894d328618834a60b5d12a,26            "skin": "CopyslImage0d2c6050fecc24b",27            "src": "back_button.png",28            "top": "20dp",29            "width": "50dp",30            "zIndex": 131        }, controller.args[0], "btnBack"), extendConfig({32            "imageScaleMode": constants.IMAGE_SCALE_MODE_MAINTAIN_ASPECT_RATIO,33            "padding": [0, 0, 0, 0],34            "paddingInPixel": false35        }, controller.args[1], "btnBack"), extendConfig({}, controller.args[2], "btnBack"));36        var imgLogo = new kony.ui.Image2(extendConfig({37            "height": "40dp",38            "id": "imgLogo",39            "isVisible": true,40            "left": "38%",41            "skin": "slImage",42            "src": "best_buy_logo.png",43            "top": "10dp",44            "width": "90dp",45            "zIndex": 146        }, controller.args[0], "imgLogo"), extendConfig({47            "imageScaleMode": constants.IMAGE_SCALE_MODE_MAINTAIN_ASPECT_RATIO,48            "padding": [0, 0, 0, 0],49            "paddingInPixel": false50        }, controller.args[1], "imgLogo"), extendConfig({}, controller.args[2], "imgLogo"));51        var btnSearch = new kony.ui.Image2(extendConfig({52            "height": "27dp",53            "id": "btnSearch",54            "isVisible": true,55            "onTouchStart": controller.AS_onClickBtnSearch_a76e84e9838c452aac0352e1b396e0dd,56            "right": "2%",57            "skin": "slImage",58            "src": "search_button.png",59            "top": "20dp",60            "width": "50dp",61            "zIndex": 162        }, controller.args[0], "btnSearch"), extendConfig({63            "imageScaleMode": constants.IMAGE_SCALE_MODE_MAINTAIN_ASPECT_RATIO,64            "padding": [0, 0, 0, 0],65            "paddingInPixel": false66        }, controller.args[1], "btnSearch"), extendConfig({}, controller.args[2], "btnSearch"));67        HeaderJoel.add(btnBack, imgLogo, btnSearch);68        return HeaderJoel;69    }...

Using AI Code Generation

1module.exports = {2    {3    },4    {5    },6    {7    },8    {9    },10    {11    }12    {13    },14    {15    },16    {17    },18    {19    },20    {21    },22    {

Using AI Code Generation

1module.exports = {2    {3    },4    {5    }6    {7    }8  "paths": {9  },10  "engineOptions": {11  },12}13- [BackstopJS](

Using AI Code Generation

1module.exports = {2 {3 },4 {5 },6 {7 }8 {9 }10 paths: {11 },12 engineOptions: {13 }14};

Using AI Code Generation

1module.exports = {2        {3        },4        {5        }6        {7        }8    paths: {9    },10    engineOptions: {11    },12};

Using AI Code Generation

1module.exports = {2 {3 }4 {5 }6 paths: {7 },8 engineOptions: {9 },10 engine_scripts: {11 },12};

Using AI Code Generation

1let config = {2    {3    },4    {5    },6    {7    },8    {9    }10    {11    }12  "paths": {13  },14  "engineOptions": {15  },16}17module.exports = config;

Using AI Code Generation

1const backstop = require('backstopjs');2const config = require('./backstop.json');3const argv = process.argv.slice(2);4const newConfig = require('./backstop-extended.json');5const fs = require('fs');6backstop('extendConfig', {7})8  .then(() => {9  })10  .catch((err) => {11    console.log(err);12  });13backstop('test', {14})15  .then(() => {16  })17  .catch((err) => {18    console.log(err);19  });20backstop('reference', {21})22  .then(() => {23  })24  .catch((err) => {25    console.log(err);26  });27backstop('approve', {28})29  .then(() => {30  })31  .catch((err) => {32    console.log(err);33  });

Using AI Code Generation

1const backstop = require('backstopjs');2const config = require('./backstop.json');3const args = process.argv.slice(2);4const scenario = args[0];5const reference = args[1];6const test = args[2];7const label = args[3];8if (scenario === 'all') {9    config.scenarios.forEach((scenario) => {10        backstop('reference', {11        }).then(() => {12            console.log('Reference done for ' + scenario.label);13            backstop('test', {14            }).then(() => {15                console.log('Test done for ' + scenario.label);16            }).catch((error) => {17                console.log(error);18            });19        }).catch((error) => {20            console.log(error);21        });22    });23} else {24    backstop('reference', {25    }).then(() => {26        console.log('Reference done for ' + label);27        backstop('test', {28        }).then(() => {29            console.log('Test done for ' + label);30        }).catch((error) => {31            console.log(error);32        });33    }).catch((error) => {34        console.log(error);35    });36}

Using AI Code Generation

1const config = require('../backstop/config.js');2const fs = require('fs');3const path = require('path');4const dirPath = path.join(__dirname, '../backstop/htmlFiles');5const files = fs.readdirSync(dirPath);6files.forEach((file) => {7  const filePath = path.join(dirPath, file);8  config.scenarios.push({9  });10});11fs.writeFileSync(12  path.join(__dirname, '../backstop/config.js'),13  `module.exports = ${JSON.stringify(config, null, 2)}`14);

Blogs

Check out the latest blogs from LambdaTest on this topic:

Desired Capabilities in Selenium Webdriver

Desired Capabilities is a class used to declare a set of basic requirements such as combinations of browsers, operating systems, browser versions, etc. to perform automated cross browser testing of a web application.

How To Handle Dynamic Dropdowns In Selenium WebDriver With Java

Joseph, who has been working as a Quality Engineer, was assigned to perform web automation for the company’s website.

10 Best Software Testing Certifications To Take In 2021

Software testing is fueling the IT sector forward by scaling up the test process and continuous product delivery. Currently, this profession is in huge demand, as it needs certified testers with expertise in automation testing. When it comes to outsourcing software testing jobs, whether it’s an IT company or an individual customer, they all look for accredited professionals. That’s why having an software testing certification has become the need of the hour for the folks interested in the test automation field. A well-known certificate issued by an authorized institute kind vouches that the certificate holder is skilled in a specific technology.

Test strategy and how to communicate it

I routinely come across test strategy documents when working with customers. They are lengthy—100 pages or more—and packed with monotonous text that is routinely reused from one project to another. Yawn once more— the test halt and resume circumstances, the defect management procedure, entrance and exit criteria, unnecessary generic risks, and in fact, one often-used model replicates the requirements of textbook testing, from stress to systems integration.

How To Run Cypress Tests In Azure DevOps Pipeline

When software developers took years to create and introduce new products to the market is long gone. Users (or consumers) today are more eager to use their favorite applications with the latest bells and whistles. However, users today don’t have the patience to work around bugs, errors, and design flaws. People have less self-control, and if your product or application doesn’t make life easier for users, they’ll leave for a better solution.

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.