Auto discover components

[ZorGleH]

Hi Garris,

Thanks for BackstopJS. It has been so helpful for me until now! I now have about 500 components to test (yeah, I know, that's fat!) and I'm bored of manually adding each scenario and component to the config. I'm looking for a way to 'auto discover' the components on a page, based on a class (eg: .backstop-screenshot) for example, and to navigate on a site (eg: visit every link of a given class.

How would you do that?

[garris]

@zorgleh hi, thanks for the kind words! BackstopJS will do this for you. There is a property called selectorExpansion. Set that to true in your scenario.

See https://github.com/garris/BackstopJS/blob/master/README.md#selectorexpansion

Please let me know if that solves your issue.

Cheers.

[garris]

Also, that is a recent feature so please make sure you have the latest version of BackstopJS.

[ZorGleH]

Yes, I know selectorExpansion and I use it a lot, but when several screenshots are generated, they are named like {scenarioLabel}-{selectorLabel}__n{x}, with x being the number of the discovered selector, based on the order on the page. If you are testing icons, for example, and you insert a new icon before existing ones, the following will be shifted, then running the test would give an error on every following icons, because their names have changed.

What I would like is a way to name the screenshots based on an optional html attribute for example: html: <div class="icon buddy" data-backstop-name="buddy"></div> fileNameTemplate: '{scenarioLabel}-{selectorLabel}__{data-backstop-name}' selectors: ['.icon'] generated screenshot name: Atoms-Icons__buddy

Is there a way to do this?

[garris]

Ok. That makes total sense -- and it's a really good idea. And I think that is pretty easy to do.

check out here... https://github.com/garris/BackstopJS/blob/master/capture/genBitmaps.js#L189

This is where we generate that name...

var indexPartial = '__n' + expandedIndex;

... I think you should be able to do this...

var dataBackstopName = element.getAttribute("data-backstop-name"); 
var indexPartial = dataBackstopName ? dataBackstopName : '__n' + expandedIndex;

Try it! Submit a PR if it works -- that would be a cool feature! Let me know how it goes.

Cheers.

[garris]

Was just thinking a little more about this. If I had your problem I might prefer not having to manage a testing-specific property vis-a-vis my production code. Perhaps there is another more common or potentially useful property which makes sense? Maybe id -- that would also align with a unique identifier. Or maybe accept both, falling back to id if data-backstop-name is not present.