Try to avoid ui test failures due to CSS loading failures (#16122)

* Try to dynamically reload CSS file if it fails loading during a UI test

* updates some expected screenshots

* always display css reload info

* also reload on failure

* wait for loading styles

* updates expected screenshot

* wait a bit for loading css

* improve reload mechanism

* print css response

* print headers

* avoid saving empty compressed files

3 files changed, 39 insertions, 5 deletions

diff --git a/core/ProxyHttp.php b/core/ProxyHttp.php
index cd47c6bd50..82f7aaba85 100644
--- a/core/ProxyHttp.php
+++ b/core/ProxyHttp.php
@@ -286,6 +286,10 @@ class ProxyHttp
             $data = gzencode($data, 9);
         }
 
+        if (false === $data) {
+            throw new \Exception('compressing file '.$fileToCompress.' failed');
+        }
+
         file_put_contents($compressedFilePath, $data);
     }
 }
diff --git a/plugins/Installation/tests/UI/expected-screenshots/Installation_superuser_de.png b/plugins/Installation/tests/UI/expected-screenshots/Installation_superuser_de.png
index e9567e89fa..d8be905dca 100644
--- a/plugins/Installation/tests/UI/expected-screenshots/Installation_superuser_de.png
+++ b/plugins/Installation/tests/UI/expected-screenshots/Installation_superuser_de.png
@@ -1,3 +1,3 @@
 version https://git-lfs.github.com/spec/v1
-oid sha256:0f1f4176f46a9ff2d47c7320ec7ffd21fbc442be44e2bd82e5589be7c0f4fe0c
-size 105242
+oid sha256:ee3e1076c8a741687e3297c540030ad81e6cd7a64af38b73d7c2f39bb7dd6afc
+size 104090
diff --git a/tests/lib/screenshot-testing/support/page-renderer.js b/tests/lib/screenshot-testing/support/page-renderer.js
index 4589f09162..d19fbe1c77 100644
--- a/tests/lib/screenshot-testing/support/page-renderer.js
+++ b/tests/lib/screenshot-testing/support/page-renderer.js
@@ -382,14 +382,27 @@ PageRenderer.prototype._setupWebpageEvents = function () {
     });
 
     // TODO: self.aborted?
-    this.webpage.on('requestfailed', (request) => {
+    this.webpage.on('requestfailed', async (request) => {
         --this.activeRequestCount;
 
+        const failure = request.failure();
+        const errorMessage = failure ? failure.errorText : 'Unknown error';
+
         if (!VERBOSE) {
-            const failure = request.failure();
-            const errorMessage = failure ? failure.errorText : 'Unknown error';
             this._logMessage('Unable to load resource (URL:' + request.url() + '): ' + errorMessage);
         }
+
+        if (request.url().indexOf('action=getCss')) {
+            if (errorMessage === 'net::ERR_ABORTED') {
+                console.log('CSS request aborted.');
+            } else if (request.url().indexOf('&reload=1') === -1) {
+                console.log('Loading CSS failed (' + errorMessage + ')... Try adding it with another style tag.');
+                await this.webpage.addStyleTag({url: request.url() + '&reload=1'}); // add another get parameter to ensure browser doesn't use cache
+                await this.webpage.waitFor(1000);
+            } else {
+                console.log('Reloading CSS failed (' + errorMessage + ').');
+            }
+        }
     });
 
     this.webpage.on('requestfinished', async (request) => {
@@ -401,6 +414,23 @@ PageRenderer.prototype._setupWebpageEvents = function () {
             const message = 'Response (size "' + body.length + '", status "' + response.status() + '"): ' + request.url() + "\n" + body.toString();
             this._logMessage(message);
         }
+
+        // if response of css request does not start with /*, we assume it had an error and try to load it again
+        // Note: We can't do that in requestfailed only, as the response code might be 200 even if it throws an exception
+        if (request.url().indexOf('action=getCss') !== -1) {
+            var body = await response.buffer();
+            if (body.toString().substring(0, 2) === '/*') {
+                return;
+            }
+            if (request.url().indexOf('&reload=1') === -1) {
+                console.log('Loading CSS failed... Try adding it with another style tag.');
+                await this.webpage.addStyleTag({url: request.url() + '&reload=1'}); // add another get parameter to ensure browser doesn't use cache
+                await this.webpage.waitFor(1000);
+            } else {
+                console.log('Reloading CSS failed.');
+            }
+            console.log('Response (size "' + body.length + '", status "' + response.status() + ', headers "' + JSON.stringify(response.headers()) + '"): ' + request.url() + "\n" + body.toString());
+        }
     });
 
     this.webpage.on('console', async (consoleMessage) => {