Skip to content

Conversation

@jessejackson85
Copy link
Contributor

@jessejackson85 jessejackson85 commented Sep 7, 2025

Issue

Add support for URL contains assertions like expect(page).toHaveURL(/.category./) to enable flexible URL pattern matching without hardcoded full URLs.

Solution

Enhanced the URL assertion system to generate flexible URL patterns that can match partial URL segments, making tests more maintainable and environment-independent.

Key Changes

  • URL Contains Assertions: Added support for regex-based URL matching patterns
  • Flexible Pattern Generation: Automatically detects when to use contains vs exact matching
  • Dynamic Segment Handling: Smart detection of IDs, UUIDs, and workspace patterns
  • Non-Hardcoded URLs: Generates relative patterns instead of full URLs when possible

Benefits

  • ✅ Tests work across different environments without hardcoded hostnames
  • ✅ Flexible URL matching for dynamic content (e.g., categories, IDs)
  • ✅ More maintainable test assertions
  • ✅ Better support for SPA navigation patterns

Generate Playwright Test Output

import { test, expect } from '@playwright/test';
    
  test('User interaction replay', async ({ page }) => {
    // Navigate to the page
    await page.goto('http://localhost:3001/w/jesse-jackson-workspace');
    
    // Wait for page to load
    await page.waitForLoadState('networkidle');
    
    // Set viewport size to match recorded session
    await page.setViewportSize({ 
      width: 1488, 
      height: 711 
    });
  
    // Click on button "Tasks"
  await page.click('text=Tasks');

  // Assert URL contains tasks section
  await expect(page).toHaveURL('/tasks');

  await page.waitForTimeout(5000);

  // Click on button "User Journeys"
  await page.click('text=User Journeys');

  // Assert URL contains user-journeys section
  await expect(page).toHaveURL('/user-journeys');

  await page.waitForTimeout(5000);

  // Click on button "Settings"
  await page.click('text=Settings');

  // Assert URL contains settings section
  await expect(page).toHaveURL('/settings');

  await page.waitForTimeout(3965);

  // Click on button "Tasks"
  await page.click('text=Tasks');

  // Assert URL contains tasks section
  await expect(page).toHaveURL('/tasks');

  await page.waitForTimeout(5000);

  // Click on span
  await page.click('span');

  // Assert URL contains cmf8ypjvt0007tync8yr0qz3v section
  await expect(page).toHaveURL('/task/cmf8ypjvt0007tync8yr0qz3v');

  await page.waitForTimeout(3021);

  // Fill input: textarea.border-input.flex.field-sizing-content
  await page.fill('textarea.border-input.flex.field-sizing-content', '');

  await page.waitForTimeout(2813);

  // Click on div
  await page.click('div.flex-1.overflow-y-auto.px-4');

  await page.waitForTimeout(1871);

  // Click on button
  await page.click('button.inline-flex.items-center.justify-center');

  // Assert URL contains tasks section
  await expect(page).toHaveURL('/tasks');

  await page.waitForTimeout(2837);

  // Click on button "Dashboard"
  await page.click('text=Dashboard');

  // Assert URL path is jesse-jackson-workspace page
  await expect(page).toHaveURL('/w/jesse-jackson-workspace');


  
    await page.waitForTimeout(432);
  });

Demo:

https://www.loom.com/share/a7cb2fd3c8fc49adbaee9802735daf33

@jessejackson85
Copy link
Contributor Author

@Evanfeenstra Please review this PR.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant