Files
supabase/e2e/studio/utils/realtime-helpers.ts
T
Danny White e351e8a1a4 test(studio): scope realtime broadcast helper (#50164)
## What kind of change does this PR introduce?

Bug fix

## What is the current behavior?

The Realtime Inspector has two buttons named “Broadcast a message” after
joining a channel: one in the listening status toolbar and one in the
empty grid state. The shared E2E helper matches both and fails with a
Playwright strict mode violation.

## What is the new behavior?

The helper scopes the action to the listening status region, where the
persistent broadcast control lives.

## To test

Run the Realtime Inspector E2E tests:

```bash
pnpm --prefix e2e/studio run e2e -- features/realtime-inspector.spec.ts

<!-- This is an auto-generated comment: release notes by coderabbit.ai -->

## Summary by CodeRabbit

* **Tests**
  * Improved end-to-end test reliability when opening the broadcast message modal.

<!-- end of auto-generated comment: release notes by coderabbit.ai -->
2026-09-09 15:07:35 +10:00

72 lines
3.0 KiB
TypeScript

import { expect, Page } from '@playwright/test'
import { toUrl } from './to-url.js'
export async function navigateToRealtimeInspector(page: Page, ref: string) {
await page.goto(toUrl(`/project/${ref}/realtime/inspector`))
await expect(page.locator('text=Join a channel')).toBeVisible({ timeout: 30000 })
}
export async function joinChannel(page: Page, channelName: string) {
await page.getByRole('button', { name: /Join a channel|Channel:/ }).click()
await expect(page.getByPlaceholder('Enter a channel name')).toBeVisible({ timeout: 5000 })
await page.getByPlaceholder('Enter a channel name').fill(channelName)
await page.getByRole('button', { name: 'Listen to channel' }).click()
await expect(page.getByText('Listening', { exact: true })).toBeVisible({ timeout: 10000 })
}
export async function leaveChannel(page: Page) {
await page.getByRole('button', { name: /Channel:/ }).click()
await expect(page.getByRole('button', { name: 'Leave channel' })).toBeVisible({ timeout: 5000 })
await page.getByRole('button', { name: 'Leave channel' }).click()
await expect(page.getByRole('button', { name: 'Join a channel' })).toBeVisible({ timeout: 5000 })
}
export async function startListening(page: Page) {
const listenButton = page.getByRole('button', { name: 'Start listening' })
await expect(listenButton).toBeVisible({ timeout: 5000 })
await listenButton.click()
await expect(page.getByText('Listening', { exact: true })).toBeVisible({ timeout: 10000 })
}
export async function stopListening(page: Page) {
const stopButton = page.getByRole('button', { name: 'Stop listening' })
await expect(stopButton).toBeVisible({ timeout: 5000 })
await stopButton.click()
await expect(page.getByRole('button', { name: 'Start listening' })).toBeVisible({ timeout: 5000 })
}
export async function openBroadcastModal(page: Page) {
const broadcastButton = page
.getByRole('status')
.getByRole('button', { name: 'Broadcast a message' })
await expect(broadcastButton).toBeVisible({ timeout: 5000 })
await broadcastButton.click()
await expect(page.getByText('Broadcast a message to all clients')).toBeVisible({ timeout: 5000 })
}
export async function waitForRealtimeMessage(page: Page, options?: { timeout?: number }) {
const timeout = options?.timeout ?? 30000
const gridRow = page.getByRole('row').filter({ hasText: /^\d{4}-\d{2}-\d{2}/ }).first()
await expect(gridRow).toBeVisible({ timeout })
return gridRow
}
export async function getMessageCount(page: Page): Promise<number> {
const countText = page.locator('text=/Found \\d+ messages/')
if ((await countText.count()) === 0) {
const noMessages = page.locator('text=No message found yet')
if ((await noMessages.count()) > 0) {
return 0
}
const maxMessages = page.locator('text=/showing only the latest 100/')
if ((await maxMessages.count()) > 0) {
return 100
}
return 0
}
const text = await countText.textContent()
const match = text?.match(/Found (\d+) messages/)
return match ? parseInt(match[1], 10) : 0
}