<div dir="ltr"><div>FYI. This might be useful in detecting visual regressions in FxA/Sync.</div><div><br></div><br><div class="gmail_quote">---------- Forwarded message ----------<br>From: <b class="gmail_sendername">Matthew N.</b> <span dir="ltr"><<a href="mailto:MattN%2Bfirefox-dev@mozilla.com">MattN+firefox-dev@mozilla.com</a>></span><br>Date: Thu, Feb 11, 2016 at 9:10 PM<br>Subject: Firefox screenshots can now be easily captured and compared in automation<br>To: firefox-dev <<a href="mailto:firefox-dev@mozilla.org">firefox-dev@mozilla.org</a>>, dev-developer-tools <<a href="mailto:dev-developer-tools@lists.mozilla.org">dev-developer-tools@lists.mozilla.org</a>><br><br><br>Back in 2013, during Australis[1] development, I created a tool called<br>
mozscreenshots. The purpose of this tool was to help detect UI<br>
regressions and make it easier to review how the UI looks in various<br>
configurations on each of our supported platforms. The main hindrance<br>
to its regular usage was that it required developers and designers to<br>
install it on each machine, tying it up while the images were<br>
captured.<br>
<br>
The great news is that mozscreenshots is now running in automation on<br>
Nightlies and on-demand for try pushes, making it much easier to<br>
capture images. Comparing the captured images to a reference/base<br>
version can now be done via a web interface[2] which means the images<br>
don’t need to be downloaded for review.<br>
<br>
mozscreenshots has already detected two issues[3][4] during its first<br>
week in automation, and I hope that this tool will improve the quality<br>
of desktop Firefox by surfacing UI issues sooner. You can read about<br>
it at <a href="https://developer.mozilla.org/en-US/docs/Mozilla/QA/Browser_screenshots" rel="noreferrer" target="_blank">https://developer.mozilla.org/en-US/docs/Mozilla/QA/Browser_screenshots</a>,<br>
but here’s a quick start guide:<br>
<br>
Change detection via Nightly captures<br>
In order to detect UI regressions, screenshots of some sets run on<br>
every Nightly. These are compared to the previous day’s Nightly, using<br>
the compare_screenshots tool[5] (which uses ImageMagick’s `compare`).<br>
For now I’m manually kicking this off each day but soon I hope to<br>
automate this and have it send an email to interested parties for<br>
investigation.<br>
<br>
Currently, only one run of<br>
“TabsInTitlebar,Tabs,WindowSize,Toolbars,LightweightThemes” occurs on<br>
Nightlies. I plan to add runs with the DevEdition theme, DevTools, and<br>
Preferences shortly, as the code for those are already written.<br>
<br>
Capturing on Try<br>
You can request screenshots be captured on a Try push for UI review or<br>
comparison to a know-good base by requesting the<br>
“mochitest-browser-screenshots” test job. You can specify what you<br>
would like captured by setting the MOZSCREENSHOTS_SETS environment<br>
variable with a comma-separated list of configurations like so:<br>
<br>
try: -b o -p linux,linux64,macosx64,win32,win64 -t none<br>
-u mochitest-browser-screenshots[Ubuntu,10.6,10.10,Windows XP,Windows<br>
7,Windows 8]<br>
--setenv MOZSCREENSHOTS_SETS=TabsInTitlebar,WindowSize,LightweightThemes<br>
<br>
Note that the job is currently Tier 3 and “excluded” on TreeHerder so<br>
you will need to toggle both of those filters to see the jobs there<br>
with the symbol: “M[Tier-3] (ss)”[6]. Unlike Nightlies, Try pushes<br>
won’t capture any images by default if MOZSCREENSHOTS_SETS isn’t<br>
specified. This avoids capturing images when developers request all<br>
mochitest runs, but don’t really want the screenshots. The capturing<br>
is implemented as a mochitest-bc test[7] in the “screenshots”<br>
subsuite, meaning configurations can use things like BrowserTestUtils<br>
and such. See fetch_screenshots[8] if you would like to download the<br>
captured images.<br>
<br>
Comparing screenshots<br>
The simplest way to compare images is via the web UI at<br>
<a href="http://screenshots.mattn.ca/compare/" rel="noreferrer" target="_blank">http://screenshots.mattn.ca/compare/</a> (Example: <a href="http://bit.ly/1Qv4uWD" rel="noreferrer" target="_blank">http://bit.ly/1Qv4uWD</a><br>
). Simply provide the project and revision of a base push with images,<br>
like the Nightly rev. from about:buildconfig, and your new revision,<br>
like a try push with some patches to review.<br>
<br>
In the background, the images are fetched from automation via<br>
fetch_screenshots[8], and then compared using compare_screenshots[5]<br>
with the output displayed on the page. The first comparison for a pair<br>
of revisions can take several minutes, as around one thousand (5<br>
platforms x 2 revisions x 100 screenshots) images need to be<br>
downloaded and compared for the default set of screenshots. The<br>
results are cached, so subsequent comparisons for the same revision<br>
are much faster.<br>
<br>
There are a lot of opportunities for this tool (e.g. pulse<br>
integration, notifications, simplified bug filing based on<br>
differences, etc.), and I hope to continue to improve the workflow.<br>
Please file bugs on the capturing infrastructure blocking the<br>
“mozscreenshots” meta bug[9] (1169179) and bugs related to the web UI,<br>
comparison and fetching at<br>
<a href="https://github.com/mnoorenberghe/mozscreenshots/issues" rel="noreferrer" target="_blank">https://github.com/mnoorenberghe/mozscreenshots/issues</a>. See also the<br>
list of issues and ideas at<br>
<a href="https://public.etherpad-mozilla.org/p/mozscreenshots" rel="noreferrer" target="_blank">https://public.etherpad-mozilla.org/p/mozscreenshots</a> which haven’t<br>
been filed yet.<br>
<br>
Thank you to everyone who has helped with getting mozscreenshots to<br>
this point, specifically Felipe Gomes, Armen Zambrano Gasparnian, Joel<br>
Maher, Brian Grinstead, Kit Cambridge, and Justin Dolske.<br>
<br>
Cheers,<br>
Matthew Noorenberghe (:MattN)<br>
<br>
[1] Australis was the code name of the Firefox UI redesign that<br>
launched April 29, 2014.<br>
[2] <a href="http://screenshots.mattn.ca/compare/" rel="noreferrer" target="_blank">http://screenshots.mattn.ca/compare/</a><br>
[3] <a href="https://bugzilla.mozilla.org/show_bug.cgi?id=1246316" rel="noreferrer" target="_blank">https://bugzilla.mozilla.org/show_bug.cgi?id=1246316</a><br>
[4] <a href="http://screenshots.mattn.ca/comparisons/try/dc5a8fa40cf5/try/288bdb0dd9b4/windows8-64/6_jsdebugger.png" rel="noreferrer" target="_blank">http://screenshots.mattn.ca/comparisons/try/dc5a8fa40cf5/try/288bdb0dd9b4/windows8-64/6_jsdebugger.png</a><br>
[5] <a href="https://developer.mozilla.org/en-US/docs/Mozilla/QA/Browser_screenshots#Command_line" rel="noreferrer" target="_blank">https://developer.mozilla.org/en-US/docs/Mozilla/QA/Browser_screenshots#Command_line</a><br>
[6] <a href="https://treeherder.mozilla.org/#/jobs?repo=try&revision=bcd8a2bed2d4&filter-tier=1&filter-tier=2&filter-tier=3&exclusion_profile=false" rel="noreferrer" target="_blank">https://treeherder.mozilla.org/#/jobs?repo=try&revision=bcd8a2bed2d4&filter-tier=1&filter-tier=2&filter-tier=3&exclusion_profile=false</a><br>
[7] <a href="https://dxr.mozilla.org/mozilla-central/source/browser/tools/mozscreenshots/browser_screenshots.js" rel="noreferrer" target="_blank">https://dxr.mozilla.org/mozilla-central/source/browser/tools/mozscreenshots/browser_screenshots.js</a><br>
[8] <a href="https://developer.mozilla.org/en-US/docs/Mozilla/QA/Browser_screenshots#Fetching_from_automation" rel="noreferrer" target="_blank">https://developer.mozilla.org/en-US/docs/Mozilla/QA/Browser_screenshots#Fetching_from_automation</a><br>
[9] <a href="https://bugzilla.mozilla.org/show_bug.cgi?id=mozscreenshots" rel="noreferrer" target="_blank">https://bugzilla.mozilla.org/show_bug.cgi?id=mozscreenshots</a><br>
</div><br></div>