Address review round 3: read wa-button disabled property in UTM e2e

Playwright's isEnabled()/isDisabled() only recognize native/ARIA disabled
state, so on a wa-button host they always report enabled. The UTM flow used
them to branch (skip/throw) and in one tautological assertion, so the checks
were bypassed. Read wa-button's `disabled` JS property directly instead, via
a small buttonDisabled() helper.

UTM e2e spec passes (42/42 chromium).

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>

Author: bramkragten

test/e2e/utm-flow.spec.ts

@@ -47,7 +47,9 @@ test.describe("UTM Installation Flow", () => {
 
   test("step 1: shows UTM status check heading", async ({ page }) => {
     const checkView = page.locator("utm-check-view");
-    await expect(checkView.locator("h2")).toContainText("Virtual machine setup");
+    await expect(checkView.locator("h2")).toContainText(
+      "Virtual machine setup"
+    );
   });
 
   test("step 1: shows warning about testing/evaluation", async ({ page }) => {
@@ -136,13 +138,8 @@ test.describe("UTM Installation Flow", () => {
       .locator("wizard-shell")
       .locator(".footer-right wa-button");
 
-    // In mock mode, UTM should be detected as installed
-    // Button state depends on whether UTM is installed
-    const isEnabled = await nextButton.isEnabled();
-    const isDisabled = await nextButton.isDisabled();
-
-    // Should be either enabled or disabled (one must be true)
-    expect(isEnabled || isDisabled).toBe(true);
+    // UTM is installed in mock mode, so the Next button is enabled.
+    await expect(nextButton).toHaveJSProperty("disabled", false);
   });
 
   test("step 1: can navigate to step 2 when UTM is installed", async ({
@@ -156,8 +153,7 @@ test.describe("UTM Installation Flow", () => {
       .locator(".footer-right wa-button");
 
     // If button is enabled, we can proceed
-    const isEnabled = await nextButton.isEnabled();
-    if (isEnabled) {
+    if (!(await buttonDisabled(nextButton))) {
       await nextButton.click();
       await expect(page.locator("utm-configure-view")).toBeVisible();
     } else {
@@ -264,7 +260,9 @@ test.describe("UTM Installation Flow", () => {
   test("step 2: can navigate back to step 1", async ({ page }) => {
     await navigateToUtmStep2(page);
 
-    const backButton = page.locator("wizard-shell").locator(".header wa-button");
+    const backButton = page
+      .locator("wizard-shell")
+      .locator(".header wa-button");
     await expect(backButton).toHaveJSProperty("disabled", false);
     await backButton.click();
 
@@ -317,7 +315,9 @@ test.describe("UTM Installation Flow", () => {
   test("step 3: can navigate back to step 2", async ({ page }) => {
     await navigateToUtmStep3(page);
 
-    const backButton = page.locator("wizard-shell").locator(".header wa-button");
+    const backButton = page
+      .locator("wizard-shell")
+      .locator(".header wa-button");
     await expect(backButton).toHaveJSProperty("disabled", false);
     await backButton.click();
 
@@ -365,7 +365,9 @@ test.describe("UTM Installation Flow", () => {
     await expect(wizardShell.locator(".footer")).not.toBeVisible();
   });
 
-  test("step 4: back button is hidden during installation", async ({ page }) => {
+  test("step 4: back button is hidden during installation", async ({
+    page,
+  }) => {
     await navigateToUtmStep4(page);
 
     const wizardShell = page.locator("wizard-shell");
@@ -479,20 +481,25 @@ test.describe("UTM Installation Flow", () => {
       .locator("wizard-shell")
       .locator(".footer-right wa-button");
 
-    const isEnabled = await nextButton.isEnabled();
-    if (!isEnabled) {
+    if (await buttonDisabled(nextButton)) {
       test.skip(true, "UTM not detected as installed in mock mode");
     }
 
     await nextButton.click();
 
     // Step 2: Configure
     await expect(page.locator("utm-configure-view")).toBeVisible();
-    await page.locator("wizard-shell").locator(".footer-right wa-button").click();
+    await page
+      .locator("wizard-shell")
+      .locator(".footer-right wa-button")
+      .click();
 
     // Step 3: Confirm - click Install (no confirmation dialog for VM flow)
     await expect(page.locator("utm-confirm-view")).toBeVisible();
-    await page.locator("wizard-shell").locator(".footer-right wa-button").click();
+    await page
+      .locator("wizard-shell")
+      .locator(".footer-right wa-button")
+      .click();
 
     // Step 4: Progress (proceeds directly, no dialog)
     await expect(page.locator("utm-progress-view")).toBeVisible();
@@ -503,11 +510,23 @@ test.describe("UTM Installation Flow", () => {
     });
 
     // Return to welcome
-    await page.locator("wizard-shell").locator(".footer-right wa-button").click();
+    await page
+      .locator("wizard-shell")
+      .locator(".footer-right wa-button")
+      .click();
     await expect(page.locator("welcome-view")).toBeVisible();
   });
 });
 
+// Playwright's isEnabled()/isDisabled() only understand native/ARIA disabled
+// state, not a custom element's `disabled` property. Read wa-button's property
+// directly instead.
+function buttonDisabled(locator: any): Promise<boolean> {
+  return locator.evaluate(
+    (el: HTMLElement & { disabled: boolean }) => el.disabled
+  );
+}
+
 // Helper functions to navigate to specific steps
 async function navigateToUtmStep2(page: any) {
   // Wait for UTM check to complete
@@ -518,8 +537,7 @@ async function navigateToUtmStep2(page: any) {
     .locator(".footer-right wa-button");
 
   // Check if we can proceed (UTM must be installed)
-  const isEnabled = await nextButton.isEnabled();
-  if (!isEnabled) {
+  if (await buttonDisabled(nextButton)) {
     throw new Error("Cannot navigate to step 2: UTM not installed");
   }