Different Selectors

[patnaik-harikrishna]

Hi Garris, I 've recently been exploring the BackstopJS and was thrilled with the amazing features. In one of my project requirements, the "selectors" are different for previous version to new version of web page. Is it possible to test the scenario where in I run the referenceURL with one set of selectors and the test with different set of selectors ? I tried running it but the report shows errors. Here is snapshot of the error in config.js file: { "pair": { "reference": "..\bitmaps_reference\backstop_default_BackstopJS_Homepage_0_global-headerdivmain-navdivdivdivlogo-imgaimg_0_desktop.png", "test": "..\bitmaps_test\20181030-120253\backstop_default_BackstopJS_Homepage_0_global-headerdivmain-navdivdivdivlogo-imgaimg_0_desktop.png", "selector": "#global-header > div.main-nav > div > div > div.logo-img > a > img", "fileName": "backstop_default_BackstopJS_Homepage_0_global-headerdivmain-navdivdivdivlogo-imgaimg_0_desktop.png", "label": "BackstopJS Homepage", "requireSameDimensions": true, "misMatchThreshold": 0.1, "url": "https://www.sometest.com/", "referenceUrl": "", "expect": 0, "viewportLabel": "desktop", "error": "Reference file not found H:\MiscTestAutomation\VisualRegression\backstop_data\bitmaps_reference\backstop_default_BackstopJS_Homepage_0_global-headerdivmain-navdivdivdivlogo-imgaimg_0_desktop.png" }, "status": "fail" },

Any help on this is highly appreciated. Thanks in Advance--Hari

[MalcolmDwyer]

https://github.com/garris/BackstopJS#integration-options-local-install You might want to set up a small backstop runner script as described above... then you can optionally configure the selectors.

let config = require('my.base.config.js')

if (targetVersion >= 4.0) {
  config.selector = ".foo > div > .bar"
}
else {
  config.selector = ".foo > span > .bar"
}

backstop.test({
  config: config
})

[garris]

Reference and Test file names must be the same during comparison. By default, selectors are included as part of the filename and that is your primary blocker to comparing the same corresponding elements with different selector paths.

Here is documentation covering the filename template --https://github.com/garris/BackstopJS/blob/master/README.md#projects-dont-work-when-i-share-with-other-users-or-run-in-different-environments. If you remove the selectorLabel From that example you will be able to compare on scenario id and selector order. Then simply manipulate your config targets as suggested above.

[patnaik-harikrishna]

Thanks for the great info Malcom and Garris. Was able to implement the provided suggestions. Thanks again !!