Unlock 30% off on Manual Testing Annual Plans this Holiday Season.

Copied to Clipboard!

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.