test: enable video recording for UI E2E tests (codeready-toolchain#1265)

* test: enable video recording for UI E2E tests

* improvements

* requested changes

* improve comment

* improve comment

* requested changes

* fix

* mask username field

Author: rsoaresd

make/devsandbox-dashboard.mk

@@ -97,4 +97,5 @@ endif
 	  -e QUAY_NAMESPACE=$(QUAY_NAMESPACE) \
 	  -e DEPLOY_UI=true \
 	  -e PUBLISH_UI=false \
+	  -e RUNNING_IN_CONTAINER=true \
 	  $(E2E_TEST_IMAGE_NAME) make test-devsandbox-dashboard-e2e

test/e2e/devsandbox-dashboard/activities_page_test.go

@@ -12,7 +12,8 @@ import (
 
 // TestActivitiesPage opens and verifies that activities cards links are not broken
 func TestActivitiesPage(t *testing.T) {
-	page := sandboxui.Setup(t, "test-activities-page")
+	testName := "test-activities-page"
+	page := sandboxui.Setup(t, testName)
 
 	// navigate to 'Activities' link
 	activitiesLink := page.GetByRole("link", playwright.PageGetByRoleOptions{
@@ -40,7 +41,7 @@ func TestActivitiesPage(t *testing.T) {
 		Level: playwright.Int(5),
 	})
 
-	//wait for the 6th card (index 5) to appear - if it's there, all 6 are loaded
+	// wait for the 6th card (index 5) to appear - if it's there, all 6 are loaded
 	err = cards.Nth(5).WaitFor()
 	require.NoError(t, err)
 
@@ -56,7 +57,7 @@ func TestActivitiesPage(t *testing.T) {
 		require.NoError(t, err)
 
 		// open the article in a new popup and wait for it to fully load
-		popup, err := sandboxui.ClickAndWaitForPopup(page, article)
+		popup, err := sandboxui.ClickAndWaitForPopup(t, page, article, testName)
 		require.NoError(t, err)
 
 		// assert the popup heading matches the expected article title

test/e2e/devsandbox-dashboard/fresh_signup_test.go

@@ -21,7 +21,8 @@ import (
 // 3. Accessing OpenShift after signup
 func TestFreshSignup(t *testing.T) {
 	// Step 1: Setup the browser and login (LoadConfig called inside Setup)
-	page := sandboxui.Setup(t, "test-fresh-signup")
+	testName := "test-fresh-signup"
+	page := sandboxui.Setup(t, testName)
 
 	// Ensure the user signup is not present in the system
 	env := viper.GetString("ENVIRONMENT")
@@ -35,7 +36,7 @@ func TestFreshSignup(t *testing.T) {
 	performSignup(t, page, env, username)
 
 	// Step 4: Verify OpenShift access
-	verifyDevSandboxAccess(t, page, env)
+	verifyDevSandboxAccess(t, page, env, testName)
 }
 
 func ensureNoUserSignup(t *testing.T, env, username string) {
@@ -155,7 +156,7 @@ func performSignup(t *testing.T, page playwright.Page, env, username string) {
 }
 
 // verifyDevSandboxAccess tests access to OpenShift after the user is signed up
-func verifyDevSandboxAccess(t *testing.T, page playwright.Page, env string) {
+func verifyDevSandboxAccess(t *testing.T, page playwright.Page, env, testName string) {
 	imgName := "Red Hat OpenShift Service on"
 	logMessage := "Log in with…"
 	if env == sandboxui.TestEnv {
@@ -183,7 +184,7 @@ func verifyDevSandboxAccess(t *testing.T, page playwright.Page, env string) {
 	sandboxui.IsVisible(t, tryItBtn)
 
 	// open the "Try it" button in a new popup and wait for it to fully load
-	devSandboxPage, err := sandboxui.ClickAndWaitForPopup(page, tryItBtn)
+	devSandboxPage, err := sandboxui.ClickAndWaitForPopup(t, page, tryItBtn, testName)
 	require.NoError(t, err)
 
 	img := devSandboxPage.GetByRole("img", playwright.PageGetByRoleOptions{

test/e2e/devsandbox-dashboard/header_test.go

@@ -12,15 +12,16 @@ import (
 // TestHeader opens and verifies that 'Red Hat Developer Hub'
 // and 'Contact Red Hat Sales' links are not broken
 func TestHeader(t *testing.T) {
-	page := sandboxui.Setup(t, "test-header")
+	testName := "test-header"
+	page := sandboxui.Setup(t, testName)
 
 	// opens and verifies that 'Red Hat Developer Hub' popup is not broken
 	rhdhLink := page.GetByRole("link", playwright.PageGetByRoleOptions{
 		Name: "Red Hat Developer Hub , Opens",
 	})
 	sandboxui.IsVisible(t, rhdhLink)
 
-	rhdhPage, err := sandboxui.ClickAndWaitForPopup(page, rhdhLink)
+	rhdhPage, err := sandboxui.ClickAndWaitForPopup(t, page, rhdhLink, testName)
 	require.NoError(t, err)
 
 	h1Text, err := rhdhPage.Locator("h1").TextContent()
@@ -33,7 +34,7 @@ func TestHeader(t *testing.T) {
 	salesBtn := page.GetByRole("button", playwright.PageGetByRoleOptions{
 		Name: "Contact Red Hat Sales",
 	})
-	salesPage, err := sandboxui.ClickAndWaitForPopup(page, salesBtn)
+	salesPage, err := sandboxui.ClickAndWaitForPopup(t, page, salesBtn, testName)
 	require.NoError(t, err)
 
 	h1Text, err = salesPage.Locator("h1").TextContent()

testsupport/devsandbox-dashboard/login.go

@@ -64,7 +64,11 @@ func (lp *LoginPage) Navigate(t *testing.T, url string) {
 }
 
 func (lp *LoginPage) Login(t *testing.T, loginUsername, loginPw string) {
-	err := lp.LoginUsernameLoc.Fill(loginUsername)
+	// Mask username field
+	_, err := lp.LoginUsernameLoc.Evaluate(`element => element.style.webkitTextSecurity = 'disc'`, nil)
+	require.NoError(t, err)
+
+	err = lp.LoginUsernameLoc.Fill(loginUsername)
 	require.NoError(t, err)
 
 	if lp.Env == DevEnv {

testsupport/devsandbox-dashboard/popup.go

@@ -3,14 +3,16 @@ package sandboxui
 import (
 	"context"
 	"fmt"
+	"path/filepath"
 	"strings"
+	"testing"
 	"time"
 
 	"github.com/playwright-community/playwright-go"
 	"k8s.io/apimachinery/pkg/util/wait"
 )
 
-func ClickAndWaitForPopup(currentPage playwright.Page, locator playwright.Locator) (playwright.Page, error) {
+func ClickAndWaitForPopup(t *testing.T, currentPage playwright.Page, locator playwright.Locator, testName string) (playwright.Page, error) {
 	var popup playwright.Page
 	var err error
 
@@ -40,5 +42,9 @@ func ClickAndWaitForPopup(currentPage playwright.Page, locator playwright.Locato
 	if waitErr != nil {
 		return nil, fmt.Errorf("popup did not finish loading: %w", waitErr)
 	}
+
+	targetVideoPath := filepath.Join(getTraceDirectory(t), fmt.Sprintf("%s-popup.webm", testName))
+	handleRecordedVideo(t, popup, targetVideoPath)
+
 	return popup, nil
 }

testsupport/devsandbox-dashboard/setup.go

@@ -1,6 +1,7 @@
 package sandboxui
 
 import (
+	"fmt"
 	"path/filepath"
 	"runtime"
 	"sync"
@@ -53,6 +54,11 @@ func Setup(t *testing.T, testName string) playwright.Page {
 		opts.IgnoreHttpsErrors = playwright.Bool(true)
 	}
 
+	traceDirectory := getTraceDirectory(t)
+	opts.RecordVideo = &playwright.RecordVideo{
+		Dir: traceDirectory,
+	}
+
 	context, err := browser.NewContext(opts)
 	require.NoError(t, err)
 
@@ -62,6 +68,8 @@ func Setup(t *testing.T, testName string) playwright.Page {
 	page, err := context.NewPage()
 	require.NoError(t, err)
 
+	handleRecordedVideo(t, page, filepath.Join(traceDirectory, fmt.Sprintf("%s.webm", testName)))
+
 	login := NewLoginPage(page, env)
 	login.Navigate(t, baseURL)
 

testsupport/devsandbox-dashboard/trace.go

@@ -4,6 +4,7 @@ import (
 	"fmt"
 	"os"
 	"path/filepath"
+	"strings"
 	"testing"
 
 	"github.com/playwright-community/playwright-go"
@@ -20,27 +21,72 @@ func trace(t *testing.T, context playwright.BrowserContext, testName string) {
 	})
 	require.NoError(t, err)
 
+	tracePath := filepath.Join(getTraceDirectory(t), fmt.Sprintf("trace-%s.zip", testName))
+
+	t.Cleanup(func() {
+		if t.Failed() {
+			if err := context.Tracing().Stop(tracePath); err != nil {
+				t.Logf("failed to save trace: %v", err)
+			} else {
+				t.Logf("saved trace to %s", tracePath)
+			}
+		}
+	})
+}
+
+func getTraceDirectory(t *testing.T) string {
 	dir, err := os.Getwd()
 	require.NoError(t, err)
-	tracePath := filepath.Join(dir, "..", "..", "trace", fmt.Sprintf("trace-%s.zip", testName))
+
+	dirName := "trace"
+	getTraceDirectoryPath := filepath.Join(dir, "..", "..", dirName)
 
 	if os.Getenv("RUNNING_IN_CONTAINER") == "true" {
-		tracePath = filepath.Join(os.Getenv("E2E_REPO_PATH"), "trace", fmt.Sprintf("trace-%s.zip", testName))
+		getTraceDirectoryPath = filepath.Join(os.Getenv("E2E_REPO_PATH"), dirName)
 	}
 
-	if os.Getenv("CI") == "true" {
+	// Use ARTIFACT_DIR if set (CI environment)
+	if artifactDir := os.Getenv("ARTIFACT_DIR"); artifactDir != "" {
 		// save trace in the job CI artifact directory
-		// artifacts/e2e/test/artifacts/devsandbox-dashboard/trace/trace-%s.zip
-		tracePath = filepath.Join(os.Getenv("ARTIFACT_DIR"), "devsandbox-dashboard", "trace", fmt.Sprintf("trace-%s.zip", testName))
+		// artifacts/e2e/test/artifacts/devsandbox-dashboard/trace
+		getTraceDirectoryPath = filepath.Join(artifactDir, "devsandbox-dashboard", dirName)
 	}
 
+	return getTraceDirectoryPath
+}
+
+// handleRecordedVideo manages recorded videos for main pages and popups:
+// - On test failure: renames videos from auto-generated IDs to test names (popups include UUID suffix)
+// - On test success: removes videos
+func handleRecordedVideo(t *testing.T, page playwright.Page, targetVideoPath string) {
 	t.Cleanup(func() {
+		videoPath, err := page.Video().Path()
+		if err != nil || videoPath == "" {
+			t.Logf("failed to resolve video path %s: %v", videoPath, err)
+			return
+		}
+
+		// Handle failed test - rename video
 		if t.Failed() {
-			if err := context.Tracing().Stop(tracePath); err != nil {
-				t.Logf("failed to save trace: %v", err)
-			} else {
-				t.Logf("saved trace to %s", tracePath)
+			// For popup videos, rename with UUID to avoid conflicts when multiple popups exist in the same test
+			if strings.Contains(targetVideoPath, "popup") {
+				uuid := filepath.Base(videoPath)
+				uuid = strings.TrimSuffix(uuid, ".webm")
+				if len(uuid) > 8 {
+					uuid = uuid[:8] // Truncate to first 8 chars
+				}
+				targetVideoPath = strings.Replace(targetVideoPath, "popup", fmt.Sprintf("popup-%s", uuid), 1)
+			}
+
+			if err := os.Rename(videoPath, targetVideoPath); err != nil {
+				t.Logf("failed to rename video %s: %v", videoPath, err)
 			}
+			return
+		}
+
+		// Test passed - remove video
+		if err := os.Remove(videoPath); err != nil {
+			t.Logf("failed to remove video %s: %v", videoPath, err)
 		}
 	})
 }