Use containerized odiff tool to compare screenshots. (#8628)

Author: isoos

pkg/pub_integration/README.md

@@ -0,0 +1,30 @@
+# Screenshots
+
+## Tools
+
+The screenshots are created during the `puppeteer` tests, if the `PUB_SCREENSHOT_DIR`
+environment variable is set.
+
+The comparison is created by the `odiff` tool using `docker`. To build the `odiff`
+container, user the following command:
+
+```
+cd tool
+docker build . -f Dockerfile.odiff -t odiff
+```
+
+## Before/after screenshots
+
+To create before/after screenshot comparisons, use the following workflow:
+
+1. Run `pkg/pub_integration` tests with `PUB_SCREENSHOT_DIR=/path/to/before/dir`.
+1. Make the changes.
+1. Run `pkg/pub_integration` tests with `PUB_SCREENSHOT_DIR=/path/to/after/dir`.
+1. Run `dart tool/compare_screenshots.dart <before-dir> <after-dir> <diff-dir>`
+
+The comparison will put the files into the `<diff-dir>` with the before/after/diff
+versions, alongside a summary `index.html` file to have a quick overview of them.
+
+## Missing features
+
+- Create a better side-by-side comparison for images, as right now everything is just a list of images.

pkg/pub_integration/tool/Dockerfile.odiff

@@ -0,0 +1,13 @@
+FROM debian:trixie-slim
+
+RUN apt -y update
+RUN apt -y install npm
+
+WORKDIR /root
+RUN npm install [email protected]
+
+RUN mkdir -p /root/before
+RUN mkdir -p /root/after
+RUN mkdir -p /root/diff
+
+ENTRYPOINT [ "/root/node_modules/odiff-bin/bin/odiff.exe" ]

pkg/pub_integration/tool/compare_screenshots.dart

@@ -17,17 +17,27 @@ Future<void> main(List<String> args) async {
 
   final reportDir = Directory(args[2]);
   await reportDir.create(recursive: true);
-  await _CompareTool(beforeFiles, afterFiles, reportDir)._compare();
+  await _CompareTool(
+    args[0],
+    beforeFiles,
+    args[1],
+    afterFiles,
+    reportDir,
+  )._compare();
 }
 
 class _CompareTool {
+  final String _beforeDir;
+  final String _afterDir;
   final Directory _reportDir;
   final Map<String, File> _beforeFiles;
   final Map<String, File> _afterFiles;
   final _report = StringBuffer();
 
   _CompareTool(
+    this._beforeDir,
     this._beforeFiles,
+    this._afterDir,
     this._afterFiles,
     this._reportDir,
   );
@@ -77,10 +87,19 @@ class _CompareTool {
           p.join(_reportDir.path, relativeDir, '$basename-diff.png');
       await File(diffPath).parent.create(recursive: true);
 
-      final pr = await Process.run('compare', [
-        before.path,
-        after.path,
-        diffPath,
+      final pr = await Process.run('docker', [
+        'run',
+        '--rm',
+        '-v',
+        '$_beforeDir:/root/before',
+        '-v',
+        '$_afterDir:/root/after',
+        '-v',
+        '${_reportDir.path}:/root/diff',
+        'odiff',
+        p.join('/root/before', relativeDir, '$basename.png'),
+        p.join('/root/after', relativeDir, '$basename.png'),
+        p.join('/root/diff', relativeDir, '$basename-diff.png'),
       ]);
       if (pr.exitCode == 0) continue;