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


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();

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.


Thank you!
Was this helpful?
Still have questions?

If you still have questions, please ask a question and I will try to answer it.

Related Discord Threads

Related Questions

AboutQuestionsDiscord ForumBrowser ExtensionTagsQA Jobs

Rayrun is a community for QA engineers. I am constantly looking for new ways to add value to people learning Playwright and other browser automation frameworks. If you have feedback, email luc@ray.run.