MM-63820 chore(e2e): update dependencies and docs (#30807)

* chore(e2e): update dependencies and docs

* update the use of postMessage, expose 8065 on test server and fix flakiness on profile popover

e2e-tests/playwright/README.md

@@ -2,20 +2,47 @@
 
 #### 1. Start local server in a separate terminal.
 
-```
+There are two ways to run the local server:
+
+**Option 1: Run from source**
+
+```bash
 # Typically run the local server with:
 cd server && make run
 
-# Or build and distribute webapp including channels and playbooks
-# so that their product URLs do not rely on Webpack dev server.
-# Especially important when running tests inside the Playwright's docker container.
-cd webapp && make dist
+# Or run webapp and server on separate terminals for better performance
+# First terminal: Build and run the webapp
+cd webapp && make run
+# Second terminal: Run the server
 cd server && make run-server
 ```
 
+**Option 2: Run using Docker (recommended for testing)**
+
+```bash
+# 1. Configure environment variables in e2e-tests/.ci/env
+#    Create this file if it doesn't exist
+
+# 2. Set the server image (optional)
+#    To use the latest master image:
+SERVER_IMAGE="mattermostdevelopment/mattermost-enterprise-edition:master"
+#    If not set, it will use the current commit: mattermostdevelopment/mattermost-enterprise-edition:$(git rev-parse --short=7 HEAD)
+#    Note: The image must exist in Docker Hub at https://hub.docker.com/r/mattermostdevelopment/mattermost-enterprise-edition/tags
+
+# 3. Add your license if needed
+MM_LICENSE=<your-license-key>
+
+# 4. For additional configuration options, see e2e-tests/README.md
+
+# 5. Run the server and Playwright's smoke tests from the e2e-tests directory
+cd e2e-tests && TEST=playwright make
+```
+
+This approach uses the server's Docker image to create a consistent testing environment. It automatically configures the server with the necessary settings for Playwright tests and handles dependencies.
+
 #### 2. Install dependencies and run the test.
 
-```
+```bash
 # Install npm packages
 npm i
 
@@ -36,19 +63,36 @@ npm run test
 
 #### 3. Inspect test results at `/results/output` folder when something fails unexpectedly.
 
+## Run tests in UI mode
+
+Check out https://playwright.dev/docs/test-ui-mode for detailed guide on UI Mode to learn more about its features.
+
+```bash
+npm run playwright-ui
+```
+
+> **Note:** If no tests appear in the UI, check your filter settings:
+>
+> - Test name filters
+> - Project filters (setup, ipad, chrome, firefox)
+> - Tag filters (@tag)
+> - Execution status filters
+>
+> The "setup" project runs the initial configuration tests in `specs/test_setup.ts` (ensuring plugins are loaded and server deployment is correct). These setup tests are typically run only once before other tests and may be unchecked for subsequent runs, though they can remain checked if needed.
+
 ## Updating screenshots is done strictly via Playwright's docker container for consistency
 
-#### 1. Run docker container using latest focal version
+#### 1. Run Playwright's docker container
 
 Change to the `e2e-tests/playwright` directory, then run the docker container. (See https://playwright.dev/docs/docker for reference.)
 
-```
-docker run -it --rm -v "$(pwd):/mattermost/" --ipc=host mcr.microsoft.com/playwright:v1.51.1-noble /bin/bash
+```bash
+docker run -it --rm -v "$(pwd):/mattermost/" --ipc=host mcr.microsoft.com/playwright:v1.52.0-noble /bin/bash
 ```
 
 #### 2. Inside the docker container
 
-```
+```bash
 export PW_BASE_URL=http://host.docker.internal:8065
 export PW_HEADLESS=true
 cd mattermost/e2e-tests/playwright