upgrade playwright dependencies (#32405)

e2e-tests/.ci/server.generate.sh

@@ -279,7 +279,7 @@ $(if mme2e_is_token_in_list "webhook-interactions" "$ENABLED_DOCKER_SERVICES"; t
 $(if mme2e_is_token_in_list "playwright" "$ENABLED_DOCKER_SERVICES"; then
     echo '
   playwright:
-    image: mcr.microsoft.com/playwright:v1.52.0-noble
+    image: mcr.microsoft.com/playwright:v1.53.0-noble
     entrypoint: ["/bin/bash", "-c"]
     command: ["until [ -f /var/run/mm_terminate ]; do sleep 5; done"]
     env_file:

e2e-tests/playwright/CLAUDE.md

@@ -87,7 +87,6 @@ npm run show-report
 ### Key Components
 
 1. **`lib/` Directory**: Contains the shared library (`@mattermost/playwright-lib`) that provides:
-
     - Page objects for Mattermost UI pages
     - Component abstractions for UI elements
     - Test utilities and fixtures
@@ -95,14 +94,12 @@ npm run show-report
     - Visual testing support
 
 2. **`specs/` Directory**: Contains the actual test files organized by type:
-
     - `functional/` - Functional tests for various features
     - `visual/` - Visual regression tests
     - `accessibility/` - Accessibility tests
     - `client/` - Client API tests
 
 3. **Test Fixtures**: The main test fixture (`pw`) provides:
-
     - Browser context management
     - Page actions and utilities
     - Server API helpers
@@ -116,7 +113,6 @@ npm run show-report
 ### Test Flow
 
 1. Tests typically follow this pattern:
-
     - Initialize test setup with `pw.initSetup()`
     - Login to a test account with `pw.testBrowser.login()`
     - Navigate to the relevant page
@@ -161,7 +157,6 @@ Before running tests, a Mattermost server must be available. Two options:
 1. **Page Object Pattern**: Always use page/component objects from the library. No static UI selectors should be in test files.
 
 2. **Visual Testing**: For visual tests:
-
     - Place all visual tests in the `specs/visual/` directory
     - Always include the `@visual` tag in the test tags array
     - Run via Docker container for consistency to maintain screenshot integrity
@@ -173,7 +168,6 @@ Before running tests, a Mattermost server must be available. Two options:
     - Follow the visual test documentation format like other tests, with proper JSDoc and comments
 
 3. **Test Title Validation with Claude Code**: When using Claude:
-
     - Run `claude spec/path/to/file.spec.ts` to check your test file
     - Ask: "Check if test titles follow the format in CLAUDE.md"
     - Claude will analyze each test title and suggest improvements
@@ -181,7 +175,6 @@ Before running tests, a Mattermost server must be available. Two options:
     - Example: `creates scheduled message from channel and posts at scheduled time`
 
 4. **Test Structure**:
-
     - Use descriptive test titles that follow this format:
         - **Action-oriented**: Start with a verb that describes the main action
         - **Feature-specific**: Include the feature or component being tested
@@ -202,7 +195,6 @@ Before running tests, a Mattermost server must be available. Two options:
     - Use tags to categorize tests with `{tag: '@feature_name'}`
 
 5. **Test Documentation Format**:
-
     - Include JSDoc-style documentation before each test:
         ```typescript
         /**
@@ -240,7 +232,6 @@ Before running tests, a Mattermost server must be available. Two options:
         - `// * descriptive verification` - Comments that describe assertions/checks (e.g., `// * Verify message appears in channel`)
 
 6. **Browser Compatibility**:
-
     - Tests run on Chrome, Firefox, and iPad by default
     - Consider browser-specific behaviors for certain features
     - Use `test.skip()` for browser-specific limitations

e2e-tests/playwright/README.md

@@ -107,18 +107,15 @@ In CI environments, visual tests run in a separate dedicated pipeline:
 When creating visual tests:
 
 1. **Follow the test documentation format** like other tests:
-
     - Include JSDoc with `@objective` tag
     - Use action-oriented test title
     - Add proper comment prefixes (`// #` for actions, `// *` for verifications)
 
 2. **Place in the correct location**:
-
     - Put visual tests in the `specs/visual/` directory, organized by feature area
     - Example: `specs/visual/channels/intro_channel.spec.ts`
 
 3. **Add required tags**:
-
     - Always include `@visual` tag
     - Add feature-specific tags as needed (e.g., `@login_page`, `@channel_page`)
 
@@ -153,7 +150,7 @@ test(
 Change to the `./` project directory, then run the docker container. (See https://playwright.dev/docs/docker for reference.)
 
 ```bash
-docker run -it --rm -v "$(pwd):/mattermost/" --ipc=host mcr.microsoft.com/playwright:v1.52.0-noble /bin/bash
+docker run -it --rm -v "$(pwd):/mattermost/" --ipc=host mcr.microsoft.com/playwright:v1.53.0-noble /bin/bash
 ```
 
 #### 2. Inside the docker container

e2e-tests/playwright/lib/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mattermost/playwright-lib",
-  "version": "10.9.0",
+  "version": "10.10.0",
   "description": "A comprehensive end-to-end testing library for Mattermost web, desktop and plugin applications using Playwright",
   "repository": {
     "type": "git",
@@ -42,27 +42,27 @@
     "access": "public"
   },
   "dependencies": {
-    "@axe-core/playwright": "4.10.1",
+    "@axe-core/playwright": "4.10.2",
     "@mattermost/client": "file:../../../webapp/platform/client",
     "@mattermost/types": "file:../../../webapp/platform/types",
-    "@percy/cli": "1.30.11",
+    "@percy/cli": "1.31.0",
     "@percy/playwright": "1.0.8",
     "async-wait-until": "2.0.27",
     "axe-core": "4.10.3",
     "deepmerge": "4.3.1",
-    "dotenv": "16.5.0",
+    "dotenv": "17.0.0",
     "mime-types": "3.0.1",
     "uuid": "11.1.0"
   },
   "devDependencies": {
-    "@rollup/plugin-typescript": "12.1.2",
+    "@rollup/plugin-typescript": "12.1.4",
-    "@types/mime-types": "2.1.4",
+    "@types/mime-types": "3.0.1",
-    "@types/node": "22.15.21",
+    "@types/node": "24.0.7",
-    "@types/react": "19.1.4",
+    "@types/react": "19.1.8",
-    "rollup": "4.41.0",
+    "rollup": "4.44.1",
     "rollup-plugin-copy": "3.5.0"
   },
   "peerDependencies": {
-    "@playwright/test": "1.52.0"
+    "@playwright/test": "1.53.1"
   }
 }

e2e-tests/playwright/package.json

@@ -27,21 +27,21 @@
     "@mattermost/client": "file:../../webapp/platform/client",
     "@mattermost/playwright-lib": "*",
     "@mattermost/types": "file:../../webapp/platform/types",
-    "@playwright/test": "1.52.0",
+    "@playwright/test": "1.53.1",
     "cross-env": "7.0.3",
     "dayjs": "1.11.13",
     "luxon": "3.6.1",
-    "zod": "3.25.13"
+    "zod": "3.25.67"
   },
   "devDependencies": {
     "@types/luxon": "3.6.2",
-    "@typescript-eslint/eslint-plugin": "8.32.1",
+    "@typescript-eslint/eslint-plugin": "8.35.0",
-    "eslint": "9.27.0",
+    "eslint": "9.30.0",
-    "eslint-import-resolver-typescript": "4.3.5",
+    "eslint-import-resolver-typescript": "4.4.4",
     "eslint-plugin-header": "3.1.1",
-    "eslint-plugin-import": "2.31.0",
+    "eslint-plugin-import": "2.32.0",
-    "glob": "11.0.2",
+    "glob": "11.0.3",
-    "prettier": "3.5.3",
+    "prettier": "3.6.2",
     "typescript": "5.8.3"
   }
 }