Back to Repositories

Testing Debug Sidebar Interactions in Insomnia API Client

This test suite validates debug sidebar interactions in the Insomnia API client, focusing on request collection management and user interface operations. The tests cover essential sidebar functionality including request properties, filtering, and collection management.

Test Coverage Overview

The test suite provides comprehensive coverage of debug sidebar interactions in Insomnia.

Key areas tested include:

Request properties management for HTTP, gRPC, WebSocket, and GraphQL requests
Collection settings and workspace actions
Request filtering and search functionality
Request pinning and code generation
CRUD operations for requests and folders

Implementation Analysis

The tests utilize Playwright’s testing framework with TypeScript for robust UI automation. The implementation follows a structured approach using page object patterns and locator strategies for reliable element selection.

Notable patterns include:

Consistent use of data-test-id attributes
Role-based element selection
Modular test organization with beforeEach setup
Platform-specific test configurations

Technical Details

Testing infrastructure includes:

Playwright test runner and assertions
TypeScript for type safety
Custom fixture loading utilities
Platform-specific test configurations
Clipboard integration for test data setup
Modal and dialog handling utilities

Best Practices Demonstrated

The test suite exemplifies high-quality testing practices through organized and maintainable code.

Notable practices include:

Consistent test setup and teardown
Descriptive test naming conventions
Isolated test scenarios
Proper error handling and assertions
Platform-specific test adaptations
Efficient use of page object patterns

kong/insomnia

packages/insomnia-smoke-test/tests/smoke/debug-sidebar-interactions.test.ts

            
import { expect } from '@playwright/test';

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

test.describe('Debug-Sidebar', async () => {
  test.slow(process.platform === 'darwin' || process.platform === 'win32', 'Slow app start on these platforms');
  test.beforeEach(async ({ app, page }) => {
    const text = await loadFixture('simple.yaml');
    await app.evaluate(async ({ clipboard }, text) => clipboard.writeText(text), text);
    await page.getByLabel('Import').click();
    await page.locator('[data-test-id="import-from-clipboard"]').click();
    await page.getByRole('button', { name: 'Scan' }).click();
    await page.getByRole('dialog').getByRole('button', { name: 'Import' }).click();
    await page.getByLabel('simple').click();
  });

  test.describe('Interact with sidebar', async () => {
    test('Open Properties in Request Sidebar', async ({ page }) => {
      const requestLocator = page.getByLabel('Request Collection').getByRole('row', { name: 'example http' });
      await requestLocator.click();
      await requestLocator.getByLabel('Request Actions').click();
      await page.getByRole('menuitemradio', { name: 'Settings' }).click();
      // Close settings modal
      await page.locator('.app').press('Escape');

      const grpc = page.getByLabel('Request Collection').getByRole('row', { name: 'example grpc' });
      await grpc.click();
      await grpc.getByLabel('Request Actions').click();
      await page.getByRole('menuitemradio', { name: 'Settings' }).click();
      // Close settings modal
      await page.locator('.app').press('Escape');

      const ws = page.getByLabel('Request Collection').getByRole('row', { name: 'example websocket' });
      await ws.click();
      await ws.getByLabel('Request Actions').click();
      await page.getByRole('menuitemradio', { name: 'Settings' }).click();
      // Close settings modal
      await page.locator('.app').press('Escape');

      const gql = page.getByLabel('Request Collection').getByRole('row', { name: 'example graphql' });
      await gql.click();
      await gql.getByLabel('Request Actions').click();
      await page.getByRole('menuitemradio', { name: 'Settings' }).click();
      // Close settings modal
      await page.locator('.app').press('Escape');
      const folderLocator = page.getByLabel('Request Collection').getByRole('row', { name: 'test folder' });
      await folderLocator.click();
      await folderLocator.getByLabel('Request Group Actions').click();
      await page.getByRole('menuitemradio', { name: 'Settings' }).click();
      // Close settings modal
      await page.locator('.app').press('Escape');
    });

    test('Open properties of the collection', async ({ page }) => {
      await page.getByLabel('Workspace actions', { exact: true }).click();
      await page.getByRole('menuitemradio', { name: 'Settings' }).click();
      await page.getByText('Collection Settings').click();
    });

    test('Filter by request name', async ({ page }) => {
      await page.getByLabel('Request filter').click();
      await page.getByLabel('Request filter').fill('example http');
      await page.getByLabel('Request Collection').getByRole('row', { name: 'example http' }).click();
    });

    test('Filter by a folder name', async ({ page }) => {
      await page.getByLabel('Request filter').click();
      await page.getByLabel('Request filter').fill('test folder');
      await page.getByLabel('Request filter').press('Enter');
      await page.getByLabel('Request Collection').getByRole('row', { name: 'test folder' }).click();
    });

    test('Open Generate code', async ({ page }) => {
      const requestLocator = page.getByLabel('Request Collection').getByRole('row', { name: 'example http' });
      await requestLocator.click();
      await requestLocator.getByLabel('Request Actions').click();
      await page.getByRole('menuitemradio', { name: 'Generate Code' }).click();
      await page.locator('[data-testid="CodeEditor"] >> text=curl').click();
      await page.locator('text=Done').click();
    });

    test('Pin a Request', async ({ page }) => {
      const requestLocator = page.getByLabel('Request Collection').getByRole('row', { name: 'example http' });
      await requestLocator.click();
      await requestLocator.getByLabel('Request Actions').click();
      await page.getByRole('menuitemradio', { name: 'Pin' }).click();
      // Click pinned request on pinned request list
      const pinnedRequestLocator = page.getByLabel('Pinned Requests').getByRole('row', { name: 'example http' });
      await pinnedRequestLocator.click();

      await requestLocator.click();
    });

    test.skip('Delete Request', async ({ page }) => {
      const requestLocator = page.getByLabel('Request Collection').getByRole('row', { name: 'example http' });
      await requestLocator.click();
      const numberOfRequests = await page.getByLabel('Request Collection').getByRole('row').count();
      await requestLocator.getByLabel('Request Actions').click();
      await page.getByRole('menuitemradio', { name: 'Delete' }).click();
      await page.locator('.modal__content').getByRole('button', { name: 'Delete' }).click();

      expect(page.getByLabel('Request Collection').getByRole('row')).toHaveCount(numberOfRequests - 1);
    });

    test('Rename a request', async ({ page }) => {
      const requestLocator = page.getByLabel('Request Collection').getByRole('row', { name: 'example http' });
      await requestLocator.click();
      await requestLocator.getByLabel('Request Actions').click();
      await page.getByRole('menuitemradio', { name: 'Rename' }).click();

      await page.getByRole('textbox', { name: 'GET example http' }).fill('example http1');
      await requestLocator.click();
      await page.getByLabel('Request Collection').getByRole('row', { name: 'example http1' }).click();
    });

    test('Update a request folder via settings', async ({ page }) => {
      const folderLocator = page.getByLabel('Request Collection').getByRole('row', { name: 'test folder' });
      await folderLocator.click();
      await folderLocator.getByLabel('Request Group Actions').click();
      await page.getByRole('menuitemradio', { name: 'Settings' }).click();
      await page.getByPlaceholder('test folder').fill('test folder1');
      await page.locator('.app').press('Escape');
      await page.getByLabel('Request Collection').getByRole('row', { name: 'test folder1' }).click();
    });

    test('Rename a request by clicking', async ({ page }) => {
      await page.getByTestId('example http').getByLabel('GET example http', { exact: true }).dblclick();
      await page.getByRole('textbox', { name: 'GET example http' }).fill('new name');
      await page.getByLabel('Request Collection').click();
      await expect(page.getByTestId('new name').getByLabel('GET new name', { exact: true })).toContainText('new name');
    });

    test('Create a new HTTP request', async ({ page }) => {
      await page.getByLabel('Create in collection').click();
      await page.getByRole('menuitemradio', { name: 'Http Request' }).click();
      await page.getByLabel('Request Collection').getByRole('row', { name: 'New Request' }).click();
    });
  });
});