usebruno · arpit-bruno · Aug 13, 2026 · Aug 7, 2026 · Aug 9, 2026 · Aug 9, 2026
diff --git a/packages/bruno-api-docs/e2e/components/request/code-snippet.component.ts b/packages/bruno-api-docs/e2e/components/request/code-snippet.component.ts
@@ -1,18 +1,24 @@
-import type { Locator } from '@playwright/test';
+import type { Locator, Page } from '@playwright/test';
 import { BaseComponent } from '../base.component';
 
 export class CodeSnippetComponent extends BaseComponent {
-  readonly root = this.page.getByTestId('request-code-snippet');
-
-  readonly code = this.root.getByTestId('code-snippet-code');
-
-  readonly copyButton = this.root.getByTestId('code-snippet-code-copy');
-
-  readonly expandButton = this.root.getByTestId('code-snippet-expand');
-
-  readonly modal = this.page.getByTestId('code-snippet-modal');
-
-  readonly modalCode = this.modal.getByTestId('code-snippet-code');
+  readonly code: Locator;
+  readonly copyButton: Locator;
+  readonly expandButton: Locator;
+  readonly modal: Locator;
+  readonly modalCode: Locator;
+
+  constructor(
+    page: Page,
+    private readonly base = 'request-code-snippet'
+  ) {
+    super(page, page.getByTestId(base));
+    this.code = this.root.getByTestId(`${base}-code`);
+    this.copyButton = this.root.getByTestId(`${base}-code-copy`);
+    this.expandButton = this.root.getByTestId(`${base}-expand`);
+    this.modal = page.getByTestId(`${base}-modal`);
+    this.modalCode = this.modal.getByTestId(`${base}-code`);
+  }
 
   variableToken(name: string): Locator {
     return this.code.getByTestId(`variable-token-${name}`).first();
@@ -23,11 +29,11 @@ export class CodeSnippetComponent extends BaseComponent {
   }
 
   languageTab(language: string): Locator {
-    return this.root.getByTestId(`code-snippet-tab-${language}`);
+    return this.root.getByTestId(`${this.base}-tab-${language}`);
   }
 
   modalLanguageTab(language: string): Locator {
-    return this.modal.getByTestId(`code-snippet-tab-${language}`);
+    return this.modal.getByTestId(`${this.base}-tab-${language}`);
   }
 
   async selectLanguage(language: string): Promise<void> {

diff --git a/packages/bruno-api-docs/e2e/components/request/examples.component.ts b/packages/bruno-api-docs/e2e/components/request/examples.component.ts
@@ -1,7 +1,10 @@
 import type { Locator } from '@playwright/test';
 import { BaseComponent } from '../base.component';
+import { CodeSnippetComponent } from './code-snippet.component';
 
 export class ExamplesComponent extends BaseComponent {
+  readonly snippet = new CodeSnippetComponent(this.page, 'example-code-snippet');
+
   readonly root = this.page.getByTestId('request-examples');
 
   readonly items = this.root.getByTestId('example-card');
@@ -32,14 +35,14 @@ export class ExamplesComponent extends BaseComponent {
   // The snippet dialog is portalled to <body>, so it is scoped to the page, not the card.
   readonly snippetModal = this.page.getByRole('dialog', { name: 'Code snippet' });
 
-  readonly snippetCode = this.snippetModal.getByTestId('code-snippet-code');
+  readonly snippetCode = this.snippet.modalCode;
 
   snippetButton(name: string): Locator {
     return this.example(name).getByTestId('example-code-snippet-trigger');
   }
 
   snippetLanguageTab(language: string): Locator {
-    return this.snippetModal.getByTestId(`code-snippet-tab-${language}`);
+    return this.snippet.modalLanguageTab(language);
   }
 
   async openSnippet(name: string): Promise<void> {

diff --git a/packages/bruno-api-docs/e2e/components/request/grpc-messages.component.ts b/packages/bruno-api-docs/e2e/components/request/grpc-messages.component.ts
@@ -0,0 +1,34 @@
+import type { Locator, Page } from '@playwright/test';
+import { BaseComponent } from '../base.component';
+
+export class GrpcMessagesComponent extends BaseComponent {
+  readonly showToggle: Locator;
+
+  constructor(
+    page: Page,
+    private readonly base = 'grpc-messages'
+  ) {
+    super(page, page.getByTestId(base));
+    this.showToggle = page.getByTestId(`${base}-show-toggle`);
+  }
+
+  card(index: number): Locator {
+    return this.page.getByTestId(`${this.base}-card-${index}`);
+  }
+
+  toggle(index: number): Locator {
+    return this.page.getByTestId(`${this.base}-card-${index}-toggle`);
+  }
+
+  code(index: number): Locator {
+    return this.page.getByTestId(`${this.base}-card-${index}-code`);
+  }
+
+  async expand(index: number): Promise<void> {
+    await this.toggle(index).click();
+  }
+
+  async showMore(): Promise<void> {
+    await this.showToggle.click();
+  }
+}
diff --git a/packages/bruno-api-docs/e2e/pages/grpc-request.page.ts b/packages/bruno-api-docs/e2e/pages/grpc-request.page.ts
@@ -0,0 +1,48 @@
+import type { Locator } from '@playwright/test';
+import { BasePage } from './base.page';
+import { SidebarComponent } from '../components/sidebar.component';
+import { BreadcrumbComponent } from '../components/breadcrumb.component';
+import { RequestUrlBarComponent } from '../components/request/url-bar.component';
+import { ExecutionContextComponent } from '../components/request/execution-context.component';
+import { CodeSnippetComponent } from '../components/request/code-snippet.component';
+import { GrpcMessagesComponent } from '../components/request/grpc-messages.component';
+
+export class GrpcRequestPage extends BasePage {
+  readonly sidebar = new SidebarComponent(this.page);
+  readonly breadcrumb = new BreadcrumbComponent(this.page, 'grpc-request-breadcrumb');
+  readonly urlBar = new RequestUrlBarComponent(this.page);
+  readonly messages = new GrpcMessagesComponent(this.page);
+  readonly snippet = new CodeSnippetComponent(this.page, 'grpc-request-code-snippet');
+  readonly executionContext = new ExecutionContextComponent(this.page);
+
+  readonly root: Locator = this.page.getByTestId('grpc-request-page');
+  readonly title: Locator = this.page.getByTestId('grpc-request-title');
+  readonly description: Locator = this.page.getByTestId('grpc-request-description');
+
+  readonly protoFileSection: Locator = this.page.getByTestId('grpc-request-section-proto-file');
+  readonly protoFile: Locator = this.page.getByTestId('grpc-request-proto-file');
+
+  readonly methodSection: Locator = this.page.getByTestId('grpc-request-section-method');
+  readonly method: Locator = this.page.getByTestId('grpc-request-method');
+
+  readonly messagesSection: Locator = this.page.getByTestId('grpc-request-section-messages');
+
+  readonly metadataSection: Locator = this.page.getByTestId('grpc-request-section-metadata');
+  readonly metadata: Locator = this.page.getByTestId('grpc-request-metadata');
+
+  readonly authSection: Locator = this.page.getByTestId('grpc-request-section-auth');
+  readonly auth: Locator = this.page.getByTestId('grpc-request-auth');
+  readonly authInheritedBadge: Locator = this.page.getByTestId('grpc-request-auth-inherited');
+
+  readonly emptyState: Locator = this.page.getByTestId('grpc-request-config-empty');
+  readonly codeSnippet: Locator = this.snippet.code;
+
+  readonly executionContextSection: Locator = this.page.getByTestId('grpc-request-section-execution-context');
+  readonly executionContextEmpty: Locator = this.page.getByTestId('grpc-request-execution-context-empty');
+
+  async open(path: string[]): Promise<void> {
+    await this.navigate('/');
+    await this.sidebar.open(path);
+    await this.root.waitFor({ state: 'visible' });
+  }
+}
diff --git a/packages/bruno-api-docs/e2e/playwright/pages.fixture.ts b/packages/bruno-api-docs/e2e/playwright/pages.fixture.ts
@@ -5,6 +5,7 @@ import { RequestPage } from '../pages/request.page';
 import { ScriptPage } from '../pages/script.page';
 import { FolderPage } from '../pages/folder.page';
 import { UnsupportedRequestPage } from '../pages/unsupported-request.page';
+import { GrpcRequestPage } from '../pages/grpc-request.page';
 import { SidebarComponent } from '../components/sidebar.component';
 import { TooltipComponent } from '../components/tooltip.component';
 import { PlaygroundComponent } from '../components/playground.component';
@@ -24,6 +25,7 @@ type Fixtures = {
   scriptPage: ScriptPage;
   folderPage: FolderPage;
   unsupportedRequestPage: UnsupportedRequestPage;
+  grpcRequestPage: GrpcRequestPage;
   sidebar: SidebarComponent;
   tooltip: TooltipComponent;
   playground: PlaygroundComponent;
@@ -56,6 +58,9 @@ export const test = base.extend<Fixtures>({
   unsupportedRequestPage: async ({ page }, use) => {
     await use(new UnsupportedRequestPage(page));
   },
+  grpcRequestPage: async ({ page }, use) => {
+    await use(new GrpcRequestPage(page));
+  },
   sidebar: async ({ page }, use) => {
     await use(new SidebarComponent(page));
   },

diff --git a/packages/bruno-api-docs/e2e/tests/folder/folder.spec.ts b/packages/bruno-api-docs/e2e/tests/folder/folder.spec.ts
@@ -4,7 +4,7 @@ test.describe('Folder page', () => {
   test('displays the folder name and how many requests it contains', async ({ folderPage }) => {
     await folderPage.open(['Realtime']);
     await expect(folderPage.title).toHaveText('Realtime');
-    await expect(folderPage.requestCount).toHaveText('3 requests');
+    await expect(folderPage.requestCount).toHaveText('10 requests');
   });
 
   test('shows config inherited from the collection even when the folder has no own config', async ({ folderPage }) => {

diff --git a/packages/bruno-api-docs/e2e/tests/overview/overview.spec.ts b/packages/bruno-api-docs/e2e/tests/overview/overview.spec.ts
@@ -22,9 +22,9 @@ test.describe('Collection Overview', () => {
     });
   });
 
-  test('shows three stat cards with the request (41), folder (7) and environment (2) counts', async ({ overviewPage }) => {
+  test('shows three stat cards with the request (48), folder (7) and environment (2) counts', async ({ overviewPage }) => {
     await expect(overviewPage.stats.cards).toHaveCount(3);
-    await expect(overviewPage.stats.valueFor('Requests')).toHaveText('41');
+    await expect(overviewPage.stats.valueFor('Requests')).toHaveText('48');
     await expect(overviewPage.stats.valueFor('Folders')).toHaveText('7');
     await expect(overviewPage.stats.valueFor('Environments')).toHaveText('2');
   });