Testing Playground Viewer

Open Testing Playground URLs from your clipboard directly in VS Code.

Features

• Open from Clipboard: Copy a Testing Playground URL and open it in a VS Code webview
• Manual Entry: Paste long URLs that might get truncated
• Status Bar: Quick access to the last opened URL

Usage

Simple Workflow

1. Run your Jest tests
2. When screen.logTestingPlaygroundURL() logs a URL in the terminal, copy the entire URL
3. Press Cmd+Alt+P (Mac) or Ctrl+Alt+P (Windows/Linux)

That's it! The Testing Playground will open in a webview panel beside your code.

Alternatively, you can use the Command Palette (Cmd+Shift+P or Ctrl+Shift+P) and run "Testing Playground: Open from Clipboard".

Commands

All commands are available via the Command Palette (Cmd+Shift+P or Ctrl+Shift+P):

• Testing Playground: Open from Clipboard - Opens the URL from your clipboard
  • Keyboard shortcut: Cmd+Alt+P (Mac) / Ctrl+Alt+P (Windows/Linux)
• Testing Playground: Enter URL Manually - Opens an input box to paste very long URLs
• Testing Playground: Open Last URL - Reopens the last Testing Playground URL

Tips

• The extension shows a status bar item (link icon) when a URL has been opened - click it to reopen
• Use "Enter URL Manually" if the URL is too long and gets truncated when copying from terminal
• The webview has an "Open in Browser" button if you need the full browser experience

Requirements

• VS Code 1.106.3 or higher
• Jest tests using @testing-library with screen.logTestingPlaygroundURL()

Example Workflow

// In your test file
import { render, screen } from '@testing-library/react';

test('should find element', () => {
  render(<MyComponent />);
  screen.logTestingPlaygroundURL();
  // URL appears in terminal, copy it and run "Open from Clipboard"
});

License

MIT