fix failing e2e tests

Author: david-crespo

test/e2e/breadcrumbs.e2e.ts

@@ -9,10 +9,10 @@
 import { expect, test, type Page } from '@playwright/test'
 
 async function getCrumbs(page: Page) {
-  const links = await page
-    .getByRole('navigation', { name: 'Breadcrumbs' })
-    .getByRole('link')
-    .all()
+  // CSS locator instead of getByRole so we can still read breadcrumbs while a
+  // dialog is open — base-ui sets aria-hidden on outside content, which hides
+  // the nav from the accessibility tree.
+  const links = await page.locator('nav[aria-label="Breadcrumbs"] a').all()
   return Promise.all(
     links.map(async (link) => [await link.textContent(), await link.getAttribute('href')])
   )

test/e2e/instance.e2e.ts

@@ -11,6 +11,7 @@ import {
   closeToast,
   expect,
   expectRowVisible,
+  fillNumberInput,
   test,
   type Page,
 } from './utils'
@@ -168,8 +169,8 @@ test('can resize a failed or stopped instance', async ({ page }) => {
   await clickRowAction(page, 'you-fail', 'Resize')
   const resizeModal = page.getByRole('dialog', { name: 'Resize instance' })
   await expect(resizeModal).toBeVisible()
-  await resizeModal.getByRole('textbox', { name: 'vCPUs' }).fill('10')
-  await resizeModal.getByRole('textbox', { name: 'Memory' }).fill('20')
+  await fillNumberInput(resizeModal.getByRole('textbox', { name: 'vCPUs' }), '10')
+  await fillNumberInput(resizeModal.getByRole('textbox', { name: 'Memory' }), '20')
   await resizeModal.getByRole('button', { name: 'Resize' }).click()
   await expectRowVisible(table, {
     name: 'you-fail',
@@ -195,8 +196,8 @@ test('can resize a failed or stopped instance', async ({ page }) => {
   await expect(resizeModal).toBeVisible()
   await expect(resizeModal.getByText('Current (db1): 2 vCPUs / 4 GiB')).toBeVisible()
 
-  await resizeModal.getByRole('textbox', { name: 'vCPUs' }).fill('8')
-  await resizeModal.getByRole('textbox', { name: 'Memory' }).fill('16')
+  await fillNumberInput(resizeModal.getByRole('textbox', { name: 'vCPUs' }), '8')
+  await fillNumberInput(resizeModal.getByRole('textbox', { name: 'Memory' }), '16')
   await resizeModal.getByRole('button', { name: 'Resize' }).click()
   await expectRowVisible(table, {
     name: 'db1',
@@ -214,8 +215,8 @@ test('resize modal stays open on server error', async ({ page }) => {
   const resizeModal = page.getByRole('dialog', { name: 'Resize instance' })
   await expect(resizeModal).toBeVisible()
 
-  await resizeModal.getByRole('textbox', { name: 'vCPUs' }).fill('10')
-  await resizeModal.getByRole('textbox', { name: 'Memory' }).fill('20')
+  await fillNumberInput(resizeModal.getByRole('textbox', { name: 'vCPUs' }), '10')
+  await fillNumberInput(resizeModal.getByRole('textbox', { name: 'Memory' }), '20')
   await resizeModal.getByRole('button', { name: 'Resize' }).click()
 
   // Error renders inline inside the modal; modal stays open so the user can

test/e2e/nav-guard-modal.e2e.ts

@@ -10,14 +10,20 @@ import { expect, expectObscured, test } from './utils'
 
 test('navigating away from SideModal form triggers nav guard', async ({ page }) => {
   const floatingIpsPage = '/projects/mock-project/floating-ips'
-  const formModal = page.getByRole('dialog', { name: 'Create floating IP' })
+  // CSS locator for the form modal: when the confirmModal opens on top of
+  // it, base-ui aria-hides the form modal (it's outside the inner dialog's
+  // portal tree), so role-based locators can't find it.
+  const formModal = page.locator('[role=dialog]:has(h2:text-is("Create floating IP"))')
   const confirmModal = page.getByRole('dialog', { name: 'Confirm navigation' })
 
   await page.goto(floatingIpsPage)
 
   // we don't have to force click here because it's not covered by the modal overlay yet
   await expect(formModal).toBeHidden()
-  const somethingOnPage = page.getByRole('heading', { name: 'Floating IPs' })
+  // CSS locator so we can still find the heading while the dialog is open —
+  // base-ui sets aria-hidden on outside content, which hides it from the
+  // accessibility tree that getByRole walks.
+  const somethingOnPage = page.locator('h1:has-text("Floating IPs")')
   await somethingOnPage.click({ trial: true }) // test that it's not obscured
 
   // now open the modal

test/e2e/vpcs.e2e.ts

@@ -126,8 +126,9 @@ test('can create and delete subnet', async ({ page }) => {
 
 test('can create and update subnets with a custom router', async ({ page }) => {
   await page.goto('/projects/mock-project/vpcs/mock-vpc/subnets')
-  await page.getByRole('link', { name: 'New VPC subnet' }).click()
 
+  // Check initial table state before opening the dialog — once it's open the
+  // table is aria-hidden and role-based locators won't find it.
   const table = page.getByRole('table')
   const rows = table.getByRole('row')
   await expect(rows).toHaveCount(3)
@@ -137,6 +138,7 @@ test('can create and update subnets with a custom router', async ({ page }) => {
     'IP Block': expect.stringContaining('10.1.1.1/24'),
   })
 
+  await page.getByRole('link', { name: 'New VPC subnet' }).click()
   const dialog = page.getByRole('dialog', { name: 'Create VPC subnet' })
   await expect(dialog).toBeVisible()
 

test/e2e/z-index.e2e.ts

@@ -30,8 +30,10 @@ test('Dropdown content in SidebarModal shows on screen', async ({ page }) => {
 
   const sidebar = page.getByRole('dialog', { name: 'Add network interface' })
 
-  // verify that the SideModal header is positioned above the TopBar
-  await expectObscured(page.getByRole('button', { name: 'User menu' }))
+  // verify that the SideModal header is positioned above the TopBar. CSS
+  // locator instead of getByRole because base-ui sets aria-hidden on outside
+  // content while the dialog is open.
+  await expectObscured(page.locator('button[aria-label="User menu"]'))
 
   // test that the form can be submitted and a new network interface is created
   await sidebar.getByRole('button', { name: 'Add network interface' }).click()