Back to Repositories

Testing Request Pane Tab Navigation and Configuration in Insomnia

This test suite validates the functionality of request pane tabs in the Insomnia API client, covering both HTTP and WebSocket request types. It ensures proper navigation and interaction with various request configuration tabs including Body, Auth, Headers, and Documentation.

Test Coverage Overview

The test suite provides comprehensive coverage of request pane tab interactions in Insomnia.

Key areas tested include:

HTTP request tab navigation and configuration
WebSocket request tab functionality
Tab-specific content editing and validation
Request type-specific features and options

Implementation Analysis

The tests utilize Playwright’s page object model for UI interaction testing. The implementation follows a sequential flow pattern, methodically validating each tab’s accessibility and functionality.

Technical patterns include:

Role-based element selection
Dialog interaction handling
Tab navigation verification
Content input validation

Technical Details

Testing tools and configuration:

Playwright test framework
TypeScript implementation
Role-based element selectors
Async/await pattern for UI interactions
Custom test utilities from local framework

Best Practices Demonstrated

The test suite exemplifies strong testing practices through organized and maintainable code structure.

Notable practices include:

Consistent element selection strategies
Logical test flow organization
Separate test cases for HTTP and WebSocket requests
Clear action verification steps

kong/insomnia

packages/insomnia-smoke-test/tests/smoke/request-pane-tab.test.ts

            
import { test } from '../../playwright/test';

test('Request tabs', async ({ page }) => {
  await page.getByRole('button', { name: 'New Collection' }).click();
  await page.getByRole('dialog').getByRole('button', { name: 'Create' }).click();

  await page.getByLabel('Create in collection').click();
  await page.getByRole('menuitemradio', { name: 'HTTP Request' }).press('Enter');
  await page.getByRole('tab', { name: 'Body' }).click();
  await page.getByRole('button', { name: 'Body' }).click();
  await page.getByRole('option', { name: 'JSON' }).click();
  await page.getByRole('tab', { name: 'Auth' }).click();
  await page.getByRole('button', { name: 'Auth' }).click();
  await page.getByLabel('OAuth 1.0', { exact: true }).click();
  await page.getByRole('tab', { name: 'Params' }).click();
  await page.getByRole('tab', { name: 'Headers' }).click();
  await page.getByRole('tab', { name: 'Docs' }).click();
  await page.getByTestId('CodeEditor').getByRole('textbox').fill('some docs');
  await page.getByRole('tab', { name: 'Preview' }).click();
});

test('WS tabs', async ({ page }) => {
  await page.getByRole('button', { name: 'New Collection' }).click();
  await page.getByRole('dialog').getByRole('button', { name: 'Create' }).click();

  await page.getByLabel('Create in collection').click();
  await page.getByRole('menuitemradio', { name: 'WebSocket Request' }).click();
  await page.getByRole('tab', { name: 'Body' }).click();
  await page.getByRole('button', { name: 'JSON' }).click();
  await page.getByRole('option', { name: 'JSON' }).click();
  await page.getByRole('tab', { name: 'Auth' }).click();
  await page.getByRole('tab', { name: 'Params' }).click();
  await page.getByRole('tab', { name: 'Headers' }).click();
  await page.getByRole('tab', { name: 'Docs' }).click();
  await page.getByTestId('CodeEditor').getByRole('textbox').fill('some docs');
  await page.getByRole('tab', { name: 'Preview' }).click();
});