← Back to Discord Forum

How can I add something to the actions tab in UI mode?

I am having trouble logging. console.log doesn't seem to show up anywhere, and even then I'd prefer to see it in the "actions" tab in the UI. How can I control what shows up in that tab?

This thread is trying to answer question "How can I control what shows up in the 'actions' tab in the UI?"

1 reply

(upgraded playwright and console.log shows up again, but still would like to know how to get into the action tab)


Here's how you can manage what appears in the 'Actions' tab in Playwright's UI Mode:

  1. Run npx playwright test --ui to open the UI Mode.
  2. You'll see a list of your test files in the sidebar. Expand each file and describe block to run, view, watch, and debug each test.
  3. Use the search bar to filter tests by text or tags.

Playwright records every action during a test run and displays them in the 'Actions' tab. These actions include interactions like clicks, inputs, navigations, and more.

To customize what actions are displayed, you can modify your tests. For instance, you can add conditional statements or assertions before certain actions. This ensures they only appear if specific conditions are met.

You can also organize your tests into separate describe blocks based on different scenarios or functionalities. This way, only relevant actions are shown when viewing a particular block.

Here's an example in TypeScript:

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

test.describe('Login functionality', () => {
  test('Successful login', async ({ page }) => {
    await page.goto('https://ray.run/login');
    await page.fill('input[name="username"]', 'testuser');
    await page.fill('input[name="password"]', 'testpass');
    await page.click('button[type="submit"]');
    // Add assertion to check successful login
    const welcomeMessage = await page.innerText('.welcome-message');
    test.expect(welcomeMessage).toContain('Welcome, testuser');

By structuring your tests thoughtfully and adding appropriate logic and assertions, you can control what appears in the 'Actions' tab. For more tips on writing efficient Playwright test scripts, check out this blog post.

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.