Testμ 2023 Conference - Join 10k+ testers for the largest online testing conference -Register for free! 
How to use diverged method in backstopjs
Best JavaScript code snippet using backstopjs
ImageScrubber.js
Source:ImageScrubber.js 
1import React from 'react';2import styled from 'styled-components';3import TwentyTwenty from 'backstop-twentytwenty';4import { colors, fonts, shadows } from '../../styles';5const ScrubberViewBtn = styled.button`6 margin: 1em;7 padding: 10px 16px;8 height: 32px;9 background-color: ${props =>10 props.selected ? colors.secondaryText : colors.lightGray};11 color: ${props => (props.selected ? colors.lightGray : colors.secondaryText)};12 border-radius: 3px;13 text-transform: uppercase;14 font-family: ${fonts.latoRegular};15 text-align: center;16 font-size: 12px;17 border: none;18 box-shadow: ${props => (props.selected ? 'none' : shadows.shadow01)};19 transition: all 100ms ease-in-out;20 &:focus {21 outline: none;22 }23 &:hover {24 cursor: pointer;25 box-shadow: ${props => (!props.selected ? shadows.shadow02 : '')};26 }27 &.loadingDiverged {28 animation: blink normal 1200ms infinite ease-in-out;29 background-color: green;30 }31 @keyframes blink {32 0% {33 opacity: 1;34 }35 50% {36 opacity: 0.75;37 }38 100% {39 opacity: 1;40 }41 }42`;43const Wrapper = styled.div`44 cursor: ew-resize;45 padding-bottom: 20px;46 overflow: hidden;47 .testImage {48 opacity: 1;49 }50 .testImage,51 .refImage {52 max-width: 100%;53 }54`;55const WrapTitle = styled.div`56 display: flex;57 justify-content: center;58 padding-top: 10px;59 padding-bottom: 10px;60 position: sticky;61 top: 0;62 z-index: 5;63 background: white;64 border-bottom: 1px solid #e4e4e4;65`;66const SliderBar = styled.div`67 height: 100%;68 width: 5px;69 background: ${colors.red};70 transform: translate(-2.5px, 0);71`;72export default class ImageScrubber extends React.Component {73 constructor (props) {74 super(props);75 this.state = {76 dontUseScrubberView: false,77 isLoading: false78 };79 this.handleLoadingError = this.handleLoadingError.bind(this);80 this.loadingDiverge = this.loadingDiverge.bind(this);81 }82 handleLoadingError () {83 this.setState({84 dontUseScrubberView: true85 });86 }87 loadingDiverge (torf) {88 this.setState({89 isLoading: !!torf90 });91 }92 render () {93 const {94 scrubberModalMode,95 testImageType,96 position,97 refImage,98 testImage,99 diffImage,100 divergedImage,101 showButtons,102 showScrubberTestImage,103 showScrubberRefImage,104 showScrubberDiffImage,105 showScrubberDivergedImage,106 showScrubber107 } = this.props;108 const scrubberTestImageSlug = this.props[testImageType];109 // only show the diverged option if the report comes from web server110 function showDivergedOption () {111 return /remote/.test(location.search);112 }113 // TODO: halp. i don't haz context.114 const that = this;115 function divergedWorker () {116 if (that.state.isLoading) {117 console.error('Diverged process is already running. Please hang on.');118 return;119 }120 if (divergedImage) {121 showScrubberDivergedImage(divergedImage);122 return;123 }124 showScrubberDivergedImage('');125 that.loadingDiverge(true);126 const refImg = document.images.isolatedRefImage;127 const testImg = document.images.isolatedTestImage;128 const h = refImg.height;129 const w = refImg.width;130 const worker = new Worker('divergedWorker.js');131 worker.addEventListener(132 'message',133 function (result) {134 const divergedImgData = result.data;135 let clampedImgData = getEmptyImgData(h, w);136 for (let i = divergedImgData.length - 1; i >= 0; i--) {137 clampedImgData.data[i] = divergedImgData[i];138 }139 const lcsDiffResult = imageToCanvasContext(null, h, w);140 lcsDiffResult.putImageData(clampedImgData, 0, 0);141 const divergedImageResult = lcsDiffResult.canvas.toDataURL(142 'image/png'143 );144 showScrubberDivergedImage(divergedImageResult);145 that.loadingDiverge(false);146 },147 false148 );149 worker.addEventListener('error', function (error) {150 showScrubberDivergedImage('');151 that.loadingDiverge(false);152 console.error(error);153 });154 worker.postMessage({155 divergedInput: [156 getImgDataDataFromContext(imageToCanvasContext(refImg)),157 getImgDataDataFromContext(imageToCanvasContext(testImg)),158 h,159 w160 ]161 });162 }163 const dontUseScrubberView = this.state.dontUseScrubberView || !showButtons;164 return (165 <div>166 <WrapTitle>167 {showButtons && (168 <div>169 <ScrubberViewBtn170 selected={scrubberModalMode === 'SHOW_SCRUBBER_REF_IMAGE'}171 onClick={showScrubberRefImage}172 >173 REFERENCE174 </ScrubberViewBtn>175 <ScrubberViewBtn176 selected={scrubberModalMode === 'SHOW_SCRUBBER_TEST_IMAGE'}177 onClick={showScrubberTestImage}178 >179 TEST180 </ScrubberViewBtn>181 <ScrubberViewBtn182 selected={scrubberModalMode === 'SHOW_SCRUBBER_DIFF_IMAGE'}183 onClick={showScrubberDiffImage}184 >185 DIFF186 </ScrubberViewBtn>187 <ScrubberViewBtn188 selected={scrubberModalMode === 'SCRUB'}189 onClick={showScrubber}190 >191 SCRUBBER192 </ScrubberViewBtn>193 <ScrubberViewBtn194 selected={scrubberModalMode === 'SHOW_SCRUBBER_DIVERGED_IMAGE'}195 onClick={divergedWorker}196 className={this.state.isLoading ? 'loadingDiverged' : ''}197 style={{198 display: showDivergedOption() ? '' : 'none'199 }}200 >201 {this.state.isLoading ? 'DIVERGING!' : 'DIVERGED'}202 </ScrubberViewBtn>203 </div>204 )}205 </WrapTitle>206 <Wrapper>207 <img208 id="isolatedRefImage"209 src={refImage}210 style={{211 display: 'none'212 }}213 />214 <img215 id="isolatedTestImage"216 className="testImage"217 src={testImage}218 style={{219 margin: 'auto',220 display: dontUseScrubberView ? 'block' : 'none'221 }}222 />223 <img224 className="diffImage"225 src={diffImage}226 style={{227 margin: 'auto',228 display: dontUseScrubberView ? 'block' : 'none'229 }}230 />231 <div232 style={{233 display: dontUseScrubberView ? 'none' : 'block'234 }}235 >236 <TwentyTwenty237 verticalAlign="top"238 minDistanceToBeginInteraction={0}239 maxAngleToBeginInteraction={Infinity}240 initialPosition={position}241 newPosition={position}242 >243 <img244 id="scrubberRefImage"245 className="refImage"246 src={refImage}247 onError={this.handleLoadingError}248 />249 <img250 id="scrubberTestImage"251 className="testImage"252 src={scrubberTestImageSlug}253 />254 <SliderBar className="slider" />255 </TwentyTwenty>256 </div>257 </Wrapper>258 </div>259 );260 }261}262/**263 * ========= DIVERGED HELPERS ========264 */265function getImgDataDataFromContext (context) {266 return context.getImageData(0, 0, context.canvas.width, context.canvas.height)267 .data;268}269function getEmptyImgData (h, w) {270 var o = imageToCanvasContext(null, h, w);271 return o.createImageData(w, h);272}273function imageToCanvasContext (_img, h, w) {274 let img = _img;275 if (!_img) {276 img = { height: h, width: w };277 }278 const canvas = document.createElement('canvas');279 canvas.width = img.width;280 canvas.height = img.height;281 const context = canvas.getContext('2d');282 if (_img) {283 context.drawImage(img, 0, 0);284 }285 return context;...
Using AI Code Generation
1module.exports = async (page, scenario) => {2 const hoverSelector = scenario.hoverSelector;3 const clickSelector = scenario.clickSelector;4 const keyPressSelector = scenario.keyPressSelector;5 const keyPress = scenario.keyPress;6 if (hoverSelector) {7 await page.waitForSelector(hoverSelector);8 await page.hover(hoverSelector);9 }10 if (clickSelector) {11 await page.waitForSelector(clickSelector);12 await page.click(clickSelector);13 }14 if (keyPressSelector) {15 await page.waitForSelector(keyPressSelector);16 await page.focus(keyPressSelector);17 await page.keyboard.press(keyPress);18 }19 if (postInteractionWait) {20 await page.waitFor(postInteractionWait);21 }22};23{24 {25 },26 {27 },28 {29 },30 {31 },32 {33 }34 {35 }36 "paths": {
Using AI Code Generation
1var backstop = require('backstopjs');2backstop('reference', {config: 'backstop.json'});3backstop('test', {config: 'backstop.json'});4{5 {6 },7 {8 },9 {10 },11 {12 }13 {14 }15 "paths": {16 },17}18module.exports = function (chromy, scenario) {19 console.log('onBefore.js');20};21module.exports = function (chromy, scenario) {22 console.log('onReady.js');23 var readyEvent = scenario.readyEvent;24 var selector = scenario.readySelector;25 var delay = scenario.delay || 0;26 return new Promise(function (resolve
Using AI Code Generation
1var backstop = require('backstopjs');2var config = require('./backstop.json');3var fs = require('fs');4var path = require('path');5var args = process.argv.slice(2);6var command = args[0];7var scenario = args[1];8var scenarioPath = path.join(__dirname, 'backstop_data', 'scenario', scenario + '.json');9var scenarioConfig = JSON.parse(fs.readFileSync(scenarioPath, 'utf8'));10backstop(command, {11});
Using AI Code Generation
1var backstop = require('backstopjs');2var backstopjs = require('backstopjs/core/command');3var config = require('backstopjs/core/util/runConfig');4var reference = require('backstopjs/command/reference');5var test = require('backstopjs/command/test');6var approve = require('backstopjs/command/approve');7var openReport = require('backstopjs/command/openReport');8var genBitmaps = require('backstopjs/command/genBitmaps');9var initConfig = require('backstopjs/command/initConfig');10var initTest = require('backstopjs/command/initTest');11var initReference = require('backstopjs/command/initReference');12var initApprove = require('backstopjs/command/initApprove');13var initOpenReport = require('backstopjs/command/initOpenReport');14var initGenBitmaps = require('backstopjs/command/initGenBitmaps');15var init = require('backstopjs/command/init');16var initConfig = require('backstopjs/command/initConfig');17var initTest = require('backstopjs/command/initTest');18var initReference = require('backstopjs/command/initReference');19var initApprove = require('backstopjs/command/initApprove');20var initOpenReport = require('backstopjs/command/initOpenReport');21var initGenBitmaps = require('backstopjs/command/initGenBitmaps');22var init = require('backstopjs/command/init');23var initConfig = require('backstopjs/command/initConfig');24var initTest = require('backstopjs/command/initTest');25var initReference = require('backstopjs/command/initReference');26var initApprove = require('backstopjs/command/initApprove');27var initOpenReport = require('backstopjs/command/initOpenReport');28var initGenBitmaps = require('backstopjs/command/initGenBitmaps');29var init = require('backstopjs/command/init');30var initConfig = require('backstopjs/command/initConfig');31var initTest = require('backstopjs/command/initTest');32var initReference = require('backstopjs/command/initReference');33var initApprove = require('backstopjs/command/initApprove');34var initOpenReport = require('backstopjs/command/initOpenReport');35var initGenBitmaps = require('backstopjs/command/initGenBitmaps');36var init = require('backstopjs/command/init');37var initConfig = require('backstopjs/command/initConfig
Using AI Code Generation
1module.exports = function (casper, scenario, vp) {2 console.log('SCENARIO > ' + scenario.label);3 if (scenario.label === 'My Scenario') {4 casper.then(function () {5 this.click('.selector');6 });7 }8};9docker run --rm -it -v $(pwd):/src backstopjs/backstopjs test10docker run --rm -it -v $(pwd):/src backstopjs/backstopjs test
Using AI Code Generation
1var backstop = require('./node_modules/backstopjs/core/command/run');2backstop('reference', {config: './backstop.json'})3.then(function () {4 backstop('test', {config: './backstop.json'})5 .then(function () {6 console.log('backstop test complete');7 })8 .catch(function (e) {9 console.error(e);10 });11})12.catch(function (e) {13 console.error(e);14});15[BackstopJS](
Using AI Code Generation
1var backstopjs = require('backstopjs');2var fs = require('fs');3var config = require('./backstop.json');4var scenario = config.scenarios[0];5var scenarioName = scenario.label;6var scenarioSelectors = scenario.selectors;7var scenarioPath = config.paths.bitmaps_reference + '/' + scenarioName;8var scenarioFiles = fs.readdirSync(scenarioPath);9var scenarioFiles = scenarioFiles.filter(function(file) {10 return file.indexOf('desktop') > -1;11});12var fileNames = scenarioFiles.map(function(file) {13 var fileName = file.replace('.png', '');14 return fileName;15});16scenarioSelectors = fileNames.map(function(fileName) {17 return '.' + fileName;18});19scenario.selectors = scenarioSelectors;20backstopjs('test', {21});
Using AI Code Generation
1module.exports = async function (page, scenario, vp) {2 await require('./backstopjs/backstopTools')(page, scenario, vp);3};4 - `clickOptions` - click options object. Default: `{ clickCount: 1 }`5await backstopTools.click('a.my-link', {6});7 - `clickOptions` - click options object. Default: `{ clickCount: 1 }`8await backstopTools.clickAndHover('a.my-link', 'a.my-other-link');9 - `clickOptions` - click options object. Default: `{ clickCount: 1 }`
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:
- JUnit Tutorial
- TestNG Tutorial
- Webdriver Tutorial
- WebDriverIO Tutorial
- Protractor Tutorial
- Selenium 4 Tutorial
- Jenkins Tutorial
- NUnit Tutorial
- Jest Tutorial
- Playwright Tutorial
- Cypress Tutorial
- PyTest Tutorial
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.
Try LambdaTest Now !!
Get 100 minutes of automation test minutes FREE!!
Was this article helpful?
