implement e2e testing for the webui

Author: rudream

Makefile

@@ -1851,3 +1851,10 @@ 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-web-e2e
+test-web-e2e: ensure-webassets
+	@if [[ "${WEBASSETS_SKIP_BUILD}" -eq 1 ]]; then mkdir -p webassets/teleport && mkdir -p webassets/teleport/app && cp web/packages/teleport/index.html webassets/teleport/index.html; \
+	else MAKE="$(MAKE)" "$(MAKE_DIR)/build.assets/build-webassets-if-changed.sh" OSS webassets/oss-sha build-ui web; fi
+
+	$(CGOFLAG) go test -tags=webassets_embed ./integration/web-e2e_test.go

integration/helpers/helpers.go

@@ -50,6 +50,7 @@ import (
 	"github.com/gravitational/teleport/lib"
 	"github.com/gravitational/teleport/lib/auth"
 	"github.com/gravitational/teleport/lib/auth/authclient"
+	"github.com/gravitational/teleport/lib/auth/testauthority"
 	"github.com/gravitational/teleport/lib/backend"
 	"github.com/gravitational/teleport/lib/client"
 	"github.com/gravitational/teleport/lib/client/identityfile"
@@ -547,3 +548,43 @@ func UpsertAuthPrefAndWaitForCache(
 		assert.Empty(t, cmp.Diff(&pref, &p))
 	}, 5*time.Second, 100*time.Millisecond)
 }
+
+// CreateTeleportTestInstance creates a new Teleport instance to be used for Web UI e2e tests.
+func CreateTeleportTestInstance(t *testing.T) (instance *TeleInstance, ctx context.Context) {
+	privateKey, publicKey, err := testauthority.New().GenerateKeyPair()
+	require.NoError(t, err)
+
+	cfg := InstanceConfig{
+		ClusterName: "test-cluster",
+		HostID:      uuid.New().String(),
+		NodeName:    Host,
+		Logger:      utils.NewSlogLoggerForTests(),
+		Priv:        privateKey,
+		Pub:         publicKey,
+	}
+	cfg.Listeners = SingleProxyPortSetupOn(Host)(t, &cfg.Fds)
+	rc := NewInstance(t, cfg)
+
+	rcConf := servicecfg.MakeDefaultConfig()
+	rcConf.DataDir = t.TempDir()
+	rcConf.Auth.Enabled = true
+	rcConf.Auth.Preference.SetSecondFactor("webauthn")
+	rcConf.Auth.Preference.SetWebauthn(&types.Webauthn{RPID: Host})
+	rcConf.Proxy.Enabled = true
+	rcConf.SSH.Enabled = false
+	rcConf.Proxy.DisableWebInterface = false
+	rcConf.Version = "v3"
+
+	ctx, contextCancel := context.WithCancel(context.Background())
+
+	err = rc.CreateEx(t, nil, rcConf)
+	require.NoError(t, err)
+	err = rc.Start()
+	require.NoError(t, err)
+	t.Cleanup(func() {
+		assert.NoError(t, rc.StopAll())
+		contextCancel()
+	})
+
+	return rc, ctx
+}

integration/web-e2e_test.go

@@ -0,0 +1,44 @@
+package integration
+
+import (
+	"fmt"
+	"os"
+	"os/exec"
+	"testing"
+
+	"github.com/gravitational/teleport/api/types"
+	"github.com/gravitational/teleport/integration/helpers"
+	"github.com/gravitational/teleport/lib/auth/authclient"
+	"github.com/gravitational/teleport/lib/services"
+	"github.com/stretchr/testify/require"
+)
+
+// TestSignup sets up a test instance of Teleport and runs a playwright test against it to test the signup flow.
+func TestSignup(t *testing.T) {
+	rc, ctx := helpers.CreateTeleportTestInstance(t)
+
+	as := rc.Process.GetAuthServer()
+
+	accessRole := services.NewPresetAccessRole()
+
+	// Create a test user.
+	testUser, err := types.NewUser("testuser")
+	require.NoError(t, err)
+	testUser.SetRoles([]string{accessRole.GetName()})
+	user, err := as.UpsertUser(ctx, testUser)
+
+	inviteToken, err := as.CreateResetPasswordToken(ctx, authclient.CreateUserTokenRequest{
+		Name: user.GetName(),
+	})
+	require.NoError(t, err)
+
+	// Generate the URL the playwright test will start from.
+	startUrl := fmt.Sprintf("START_URL=https://%s/web/invite/%s", rc.Web, inviteToken.GetName())
+
+	// Start the playwright test
+	cmd := exec.Command("pnpm", "test-e2e", "signup.spec.ts")
+	cmd.Env = append(os.Environ(), startUrl)
+	cmd.Stdout = os.Stdout
+	cmd.Stderr = os.Stderr
+	require.NoError(t, cmd.Run())
+}

package.json

@@ -17,6 +17,7 @@
     "test": "jest",
     "test-coverage": "jest --coverage && web/scripts/print-coverage-link.sh",
     "test-update-snapshot": "pnpm run test --updateSnapshot",
+    "test-e2e": "pnpm --dir=./web/e2e test",
     "tdd": "jest --watch",
     "lint": "pnpm eslint && pnpm prettier-check",
     "lint-fix": "pnpm eslint --fix && pnpm prettier-write",
@@ -112,4 +113,4 @@
   "engines": {
     "node": "^22"
   }
-}
+}

pnpm-lock.yaml

@@ -1,6 +1,7 @@
 packages:
   - web/packages/*
   - e/web/*
+  - web/e2e
 onlyBuiltDependencies:
   - '@swc/core'
   - electron

pnpm-workspace.yaml

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

web/e2e/.gitignore

@@ -0,0 +1,42 @@
+# E2E Testing with Playwright
+
+This directory contains the configuration and tests for end-to-end testing against a real Teleport instance using Playwright.
+
+E2E tests should be run by a corresponding Go test in `integration/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.
+
+### Setup
+
+Before being able to run any tests, you'll need to install the playwright package and the chromium browser.
+
+```bash
+# Install packages
+pnpm install
+
+# Install the Chromium browser
+pnpm exec playwright install chromium
+```
+
+## Running Tests
+
+### Basic Commands
+
+```bash
+# Run all tests with the default START_URL (https://localhost:3080/web/login)
+pnpm test
+
+# Run a specific test file.
+pnpm test signup.spec.ts
+
+# Run tests against a specific START_URL.
+START_URL=https://teleport.dev pnpm test
+
+# Run tests with the Playwright UI, useful for debugging.
+pnpm test --ui
+
+# Start the Playwright codegen to generate tests by recording your browser interactions.
+pnpm exec playwright codegen
+
+# View past test reports.
+pnpm report
+```

web/e2e/README.md

@@ -0,0 +1,15 @@
+{
+  "name": "playwright-e2e-testing",
+  "version": "1.0.0",
+  "description": "Playwright tests for e2e testing.",
+  "main": "index.js",
+  "scripts": {
+    "test": "playwright test --project=chromium",
+    "report": "playwright show-report"
+  },
+  "author": "",
+  "license": "ISC",
+  "devDependencies": {
+    "@playwright/test": "^1.51.1"
+  }
+}

web/e2e/package.json

@@ -0,0 +1,27 @@
+import { defineConfig, devices } from '@playwright/test';
+
+// Default to localhost:3080/web/login if START_URL is not defined.
+const baseURL = process.env.START_URL || 'http://localhost:3080/web/login';
+
+export default defineConfig({
+  testDir: './tests',
+  fullyParallel: true,
+  forbidOnly: !!process.env.CI,
+  retries: process.env.CI ? 2 : 0,
+  workers: process.env.CI ? 1 : undefined,
+  reporter: [['html', { open: 'never' }]],
+
+  use: {
+    ignoreHTTPSErrors: true,
+    baseURL,
+    trace: 'on-first-retry',
+    screenshot: 'only-on-failure',
+  },
+
+  projects: [
+    {
+      name: 'chromium',
+      use: { ...devices['Desktop Chrome'] },
+    },
+  ],
+});