Merge pull request #1971 from camptocamp/doc-image

Update the image comapraison documentation

README.md

@@ -703,16 +703,22 @@ To test the screenshots, you need to install `node` with `npm`, to do that add t
 ```dockerfile
 RUN --mount=type=cache,target=/var/lib/apt/lists \
     --mount=type=cache,target=/var/cache,sharing=locked \
-    . /etc/os-release \
+    apt-get install --yes --no-install-recommends gnupg \
+    && . /etc/os-release \
     && echo "deb https://deb.nodesource.com/node_18.x ${VERSION_CODENAME} main" > /etc/apt/sources.list.d/nodesource.list \
     && curl --silent https://deb.nodesource.com/gpgkey/nodesource.gpg.key | apt-key add - \
     && apt-get update \
-    && apt-get install --assume-yes --no-install-recommends 'nodejs=18.*'
+    && apt-get install --assume-yes --no-install-recommends 'nodejs=18.*' \
+        libx11-6 libx11-xcb1 libxcomposite1 libxcursor1 \
+        libxdamage1 libxext6 libxi6 libxtst6 libnss3 libcups2 libxss1 libxrandr2 libasound2 libatk1.0-0 \
+        libatk-bridge2.0-0 libpangocairo-1.0-0 libgtk-3.0 libxcb-dri3-0 libgbm1 libxshmfence1
 ```
 
 To do the image test call `check_screenshot` e.g.:
 
 ```python
+from c2cwsgiutils.acceptance import image
+
 def test_screenshot(app_connection):
     image.check_screenshot(
         app_connection.base_url + "my-path",

c2cwsgiutils/acceptance/image.py

@@ -159,6 +159,7 @@ def check_screenshot(
     expected_filename: str,
     width: int = 800,
     height: int = 600,
+    sleep: int = 0,
     headers: Optional[dict[str, str]] = None,
     media: Optional[list[dict[str, str]]] = None,
     level: float = 1.0,
@@ -192,6 +193,7 @@ def check_screenshot(
             f"--url={url}",
             f"--width={width}",
             f"--height={height}",
+            f"--sleep={sleep}",
             f"--headers={json.dumps(headers)}",
             f"--media={json.dumps(media)}",
             f"--output={actual_filename}",

c2cwsgiutils/acceptance/screenshot.js

@@ -6,6 +6,7 @@ program
   .option('--output <char>', 'The output filename')
   .option('--width <int>', 'The page width', 800)
   .option('--height <int>', 'The page height', 600)
+  .option('--sleep <int>', 'Sleep that the page is fully loaded [ms]', 0)
   .option('--headers <str>', 'The headers', '{}')
   // see: https://pptr.dev/api/puppeteer.page.emulatemediafeatures
   .option('--media <str>', 'The media feature, see Page.emulateMediaFeatures', '[]');
@@ -54,6 +55,7 @@ const options = program.opts();
     width: parseInt(options.width),
     height: parseInt(options.height),
   });
+  await page.waitForTimeout(parseInt(options.sleep));
   await page.screenshot({
     path: options.output,
     clip: { x: 0, y: 0, width: parseInt(options.width), height: parseInt(options.height) },