Mozscreenshots updates

Williams, Michael Scott will2616 at
Tue Nov 21 19:59:26 UTC 2017

Hello everyone,

We are team of students from Michigan State University’s capstone experience. For the past few months, we have been improving the Firefox Screenshot Testing Suite.

Cropping to elements with CSS Selectors

The tool will now crop screenshots to relevant regions based on required CSS selectors given in their respective configuration files. These CSS selectors are used to calculate a bounding box around elements, which is used as a cropping region for the screenshots. A configuration may specify multiple CSS selectors, in which case the union of the bounding boxes is calculated and this is used as the cropping region instead. This behavior is the same when multiple configurations are specified, in which case the union is taken over all the selectors specified by all the configurations in the combo.

While most configurations should be able to use CSS selectors, in some cases (such as DevTools), more complex logic may be necessary to find a particular element. In this case, a function returning the desired element may be used instead.

An example of one of the DevTools configs before cropping and after cropping is featured below.

Added Configurations

So far only the UIDensities config has landed to test the browser under compact density, normal density, and touch density. More to come soon.

Can specify sub-configurations

An optional comma-separated list can be specified to capture a certain subset of configurations. For example, Tabs[fiveTabs, fourPinned].

Before Cropping (ignore the green):
After Cropping:


-------------- next part --------------
An HTML attachment was scrubbed...
URL: <>
-------------- next part --------------
A non-text attachment was scrubbed...
Name: 20171103183339_1_bottomToolbox.png
Type: image/png
Size: 222864 bytes
Desc: 20171103183339_1_bottomToolbox.png
URL: <>
-------------- next part --------------
A non-text attachment was scrubbed...
Name: 20171014173859_1_bottomToolbox.png
Type: image/png
Size: 55949 bytes
Desc: 20171014173859_1_bottomToolbox.png
URL: <>

More information about the firefox-dev mailing list