implement e2e testing for the webui

Author: rudream

Makefile

@@ -1103,11 +1103,6 @@ test-sh:
 	fi; \
 	bats $(BATSFLAGS) ./assets/aws/files/tests
 
-
-.PHONY: test-e2e
-test-e2e:
-	make -C e2e test
-
 .PHONY: run-etcd
 run-etcd:
 	docker build -f .github/services/Dockerfile.etcd -t etcdbox --build-arg=ETCD_VERSION=3.5.9 .
@@ -1906,3 +1901,7 @@ go-mod-tidy-all:
 dump-preset-roles:
 	GOOS=$(OS) GOARCH=$(ARCH) $(CGOFLAG) go run ./build.assets/dump-preset-roles/main.go
 	pnpm test web/packages/teleport/src/Roles/RoleEditor/StandardEditor/standardmodel.test.ts
+
+.PHONY: test-e2e
+test-e2e: ensure-webassets
+	(cd e2e && pnpm install) && $(CGOFLAG) go test -tags=webassets_embed ./e2e/web_e2e_test.go

e2e/.gitignore

@@ -1,4 +1,4 @@
 node_modules/
-/test-results/
-/playwright-report/
-/playwright/.cache/
+test-results/
+playwright-report/
+playwright/.cache/

e2e/Makefile

@@ -1,42 +1,41 @@
-## Teleport E2E Tests
+# E2E Testing with Playwright
 
-This directory contains end-to-end tests for Teleport. These tests are
-designed to be run against a live cluster. They are written in TS and use
-[Playwright](https://playwright.dev/) to interact with the browser.
-Docker compose is used to spin up a cluster for testing and to run the tests.
+This directory contains the configuration and tests for end-to-end testing against a real Teleport instance using Playwright.
 
-### Running the tests
-```bash
-# Make all removes the existing docker volumes to ensure a clean state
-# and rebuild the containers
-make all 
-```
-or
+E2E tests should be run by a corresponding Go test in `web-e2e_test.go` and run
+using `make test-web-e2e`. To run only the Playwright test directly, you'll need a Teleport instance running locally.
+
+Any test that involves an authenticated user should be run with a `START_URL` env variable that contains an invite link for the test user, this should be generated and provided by the corresponding Go test.
+
+### Setup
+
+Before being able to run any tests, you'll need to install the playwright package and the chromium browser.
 
 ```bash
-# Only run tests
-make test
+# Install packages
+pnpm install
+
+# Install the Chromium browser
+pnpm exec playwright install chromium
 ```
 
-### MacOS building notes
+## Running Tests
 
-Before running the tests on MacOS in Docker, you need to build Linux compatible binaries.
-Binaries are build using our Docker images inside `build.assets` directory. You can also
-build them manually using `make build-binaries` command.
+### Basic Commands
 
-### Running tests for development
+```bash
+# Run a test  with the default START_URL (https://localhost:3080/web/login)
+pnpm test signup.spec.ts
 
-Docker compose setup is designed to run tests in CI and create the same environment
-locally, so debugging potential issues is easier. E2E tests make changes to the cluster,
-so the order of the tests is important. To run tests for development, you can use
-`yarn test` command to run the test against the existing cluster.
-`yarn codegen` starts the Playwright codegen tool that allows to record the test
-and generate the code for it. This improves the development speed as most code can be generated.
+# Run a test with a specific START_URL.
+START_URL=https://teleport.dev pnpm test signup.spec.ts
 
-### Common issues
+# Run tests with the Playwright UI, useful for debugging.
+pnpm test --ui
 
-`Cannot run macOS (Mach-O) executable in Docker: Exec format error`  
+# Start the Playwright codegen to generate tests by recording your browser interactions.
+pnpm exec playwright codegen
 
-This error means that you are trying to run MacOS binary on Linux. You need to build
-Linux compatible binaries to run them in Docker. You can rebuild them using `make build-binaries`
-or just remove existing binaries in `../build` as they will be rebuilt automatically.
+# View past test reports.
+pnpm report
+```

e2e/README.md

@@ -1,17 +1,13 @@
 {
-  "name": "teleport-e2e",
+  "name": "playwright-e2e-testing",
   "version": "1.0.0",
-  "description": "Teleport E2E tests",
-  "repository": "https://github.com/gravitational/teleport",
+  "description": "Playwright tests for e2e testing.",
+  "scripts": {
+    "test": "playwright test --project=chromium",
+    "report": "playwright show-report"
+  },
   "license": "Apache-2.0",
-  "private": true,
-  "dependencies": {},
   "devDependencies": {
-    "@playwright/test": "^1.35.1",
-    "typescript": "^5.1.6"
-  },
-  "scripts": {
-    "codegen": "playwright codegen https://localhost:3080",
-    "test": "playwright test"
+    "@playwright/test": "^1.51.1"
   }
 }