What are some of the debugging and inspecting features available in Playwright UI Mode?

Answer

Sure, you can clear the browser cache in Playwright UI Mode without rerunning the command. But, there's no specific button for this. However, Playwright UI Mode offers several features that can help you with debugging and inspecting elements.

You can pop out and inspect the DOM snapshot into its own window. Just click on the pop out icon above the DOM snapshot. This opens the browser DevTools where you can inspect HTML, CSS, Console, and more. While this doesn't directly clear the browser cache, it helps you analyze and debug elements in your test.

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

test('inspect DOM snapshot', async ({ page }) => {
  await page.goto('https://ray.run');
  const snapshot = await page.accessibility.snapshot();
  console.log(snapshot);
});

There's also a pick locator button. Click on this button and hover over the DOM snapshot. You'll see locators for each element highlighted as you hover. This doesn't clear the browser cache either, but it helps you identify specific elements in your test.

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

test('pick locator', async ({ page }) => {
  await page.goto('https://ray.run');
  const locator = page.locator('.your-element');
  await locator.click();
});

Playwright UI Mode also offers a timeline view of each action in your test. Hover back and forth to see an image snapshot for each action. This doesn't clear the browser cache, but it helps you visualize actions taken during your test execution.

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

test('timeline view', async ({ page }) => {
  await page.goto('https://ray.run');
  // Perform actions and view them in the timeline
});

So, while there's no direct way to clear browser cache in Playwright UI Mode, these features can assist with debugging and analyzing elements within your tests.