E2E/Playwright: Update dependencies, screenshots, config and type (#23000)

* update dependencies

* update default server config and client type

* close browser context once test is done

* fix test when switching a product

* update screenshots and readme

* add cross-env and make headless mode as default

---------

Co-authored-by: Mattermost Build <build@mattermost.com>

e2e-tests/playwright/support/server/init.ts

@@ -3,7 +3,9 @@
 
 import path from 'node:path';
 import {expect} from '@playwright/test';
+import chalk from 'chalk';
 
+import {ClientError} from '@mattermost/client/client4';
 import {PreferenceType} from '@mattermost/types/preferences';
 import testConfig from '@e2e-test.config';
 
@@ -77,10 +79,21 @@ export async function initSetup({
             offTopicUrl: getUrl(team.name, 'off-topic'),
             townSquareUrl: getUrl(team.name, 'town-square'),
         };
-    } catch (err) {
+    } catch (error) {
         // log an error for debugging
         // eslint-disable-next-line no-console
-        console.log(err);
+        const err = error as ClientError;
+        if (err.message === 'Could not parse multipart form.') {
+            // eslint-disable-next-line no-console
+            console.log(chalk.yellow(`node version: ${process.version}\nNODE_OPTIONS: ${process.env.NODE_OPTIONS}`));
+
+            // eslint-disable-next-line no-console
+            console.log(
+                chalk.green(
+                    `This failed due to the experimental fetch support in Node.js starting v18.0.0.\nYou may set environment variable: "export NODE_OPTIONS='--no-experimental-fetch'", then try again.'`
+                )
+            );
+        }
         expect(err, 'Should not throw an error').toBeFalsy();
         throw err;
     }