ui_test_core: make verifyImageMatchSnapshot continue execution

Introduce another assertImageMatchSnapshot which stops on failure,
following the behavior of other selenium assertions.

Also output more details when the dimensions are different.

bt5/erp5_ui_test_core/SkinTemplateItem/portal_skins/erp5_ui_test_core/user-extensions.js.js

@@ -220,11 +220,13 @@ function generateElement(tagName, childList, attributeDict, textContent) {
  * @param {string} locator - an element locator
  * @param {string} misMatchTolerance - the percentage of mismatch allowed. If this is 0, the
  *      images must be exactly same. If more than 0, image will also be resized.
+ * @param {boolean} haltOnFailure - define the behavior on failure: stop (assert*) or continue (verify*)
  * @returns {() => boolean}
  */
 Selenium.prototype.doVerifyImageMatchSnapshot = (
   locator,
-  misMatchTolerance
+  misMatchTolerance,
+  haltOnFailure
 ) => {
   if (window['ignoreSnapshotTest'].checked){
     // calling getReferenceImageCounter has the side effect
@@ -309,6 +311,10 @@ Selenium.prototype.doVerifyImageMatchSnapshot = (
                 .querySelector('td')
                 .appendChild(
                   generateElement('div', [
+                    generateElement('b',
+                      [document.createTextNode('Images are ' + diff.misMatchPercentage + '% different.')]
+                    ),
+                    generateElement('br'),
                     document.createTextNode('Image differences:'),
                     generateElement('br'),
                     generateElement('img', [], {
@@ -316,6 +322,8 @@ Selenium.prototype.doVerifyImageMatchSnapshot = (
                       alt: 'Image differences'
                     }),
                     generateElement('br'),
+                    document.createTextNode('Size differences: ' + JSON.stringify(diff.dimensionDifference)),
+                    generateElement('br'),
                     document.createTextNode('Click '),
                     generateElement('a', [document.createTextNode('here')], {
                       href: actual,
@@ -331,13 +339,26 @@ Selenium.prototype.doVerifyImageMatchSnapshot = (
                     ])
                   ])
                 );
-              throw new Error('Images are ' + diff.misMatchPercentage + '% different');
+              htmlTestRunner.currentTest.result.failed = true;
+              htmlTestRunner.currentTest.result.failureMessage = 'Snapshots do not match';
+              if (haltOnFailure) {
+                throw new Error('Snapshots do not match');
+              }
             }
           });
       }));
-
 };
 
+/**
+ * Assert that the rendering of the element `locator` matches the previously saved reference.
+ */
+Selenium.prototype.doAssertImageMatchSnapshot = (
+  locator,
+  misMatchTolerance,
+) => {
+  return Selenium.prototype.doVerifyImageMatchSnapshot.bind(this)(locator, misMatchTolerance, true);
+}
+
 /**
  * Wait for fonts to be loaded.
  *