Skip to content

feat(browser): support playwright tracing#8584

Merged
sheremet-va merged 14 commits intovitest-dev:mainfrom
sheremet-va:feat/trace-viewer
Sep 22, 2025
Merged

feat(browser): support playwright tracing#8584
sheremet-va merged 14 commits intovitest-dev:mainfrom
sheremet-va:feat/trace-viewer

Conversation

@sheremet-va
Copy link
Member

@sheremet-va sheremet-va commented Sep 17, 2025

Description

Fixes #7219

This PR implements the "Local example" from #7219, this PR does not cover the CI use case.

This PR also doesn't implement granular support for traces.

Please don't delete this checklist! Before submitting the PR, please make sure you do the following:

  • It's really useful if your PR references an issue where it is discussed ahead of time. If the feature is substantial or introduces breaking changes without a discussion, PR might be closed.
  • Ideally, include a test that fails without this PR but passes with it.
  • Please, don't make changes to pnpm-lock.yaml unless you introduce a new test example.
  • Please check Allow edits by maintainers to make review process faster. Note that this option is not available for repositories that are owned by Github organizations.

Tests

  • Run the tests with pnpm test:ci.

Documentation

  • If you introduce new functionality, document it. You can run documentation with pnpm run docs command.

Changesets

  • Changes in changelog are generated from PR name. Please, make sure that it explains your changes in an understandable manner. Please, prefix changeset messages with feat:, fix:, perf:, docs:, or chore:.

@sheremet-va sheremet-va marked this pull request as draft September 17, 2025 15:52
@netlify
Copy link

netlify bot commented Sep 18, 2025

Deploy Preview for vitest-dev ready!

Name Link
🔨 Latest commit 5619e5f
🔍 Latest deploy log https://app.netlify.com/projects/vitest-dev/deploys/68cec6d62390cc0008a99156
😎 Deploy Preview https://deploy-preview-8584--vitest-dev.netlify.app
📱 Preview on mobile
Toggle QR Code...

QR Code

Use your smartphone camera to open QR code link.

To edit notification comments on pull requests, go to your Netlify project configuration.

@sheremet-va sheremet-va marked this pull request as ready for review September 18, 2025 17:15
@sheremet-va sheremet-va changed the title feat(browser): support playwright's trace view feat(browser): support playwright tracing Sep 19, 2025
@sheremet-va sheremet-va merged commit 1aac59c into vitest-dev:main Sep 22, 2025
13 of 14 checks passed
@tsirlucas
Copy link
Contributor

@sheremet-va just FYI, I've been using that example from the referenced github issue in CI ever since I opened it. The additional step is having a custom upload_multi_artifacts github action to upload the generated traces. i will share here in case anyone wants to use it.

name: 'Upload Multi Artifacts'
description: 'upload-artifact action doesnt support uploading multiple artifacts from glob pattern so we need to do it programatically.'
author: 'Lucas Correia'
inputs:
  path:
    description: 'Blob format path'
    required: true
runs:
  using: 'node20'
  main: 'index.mjs'
import path from 'path'
import { DefaultArtifactClient } from '@actions/artifact'
import { getInput } from '@actions/core'
import { sync as globSync } from 'glob'

const artifactClient = new DefaultArtifactClient()

async function run() {
  const pattern = getInput('path')

  if (!pattern) {
    console.error('Error: Please provide a glob pattern as an argument.')
    process.exit(1)
  }

  console.log(`Using glob pattern: ${pattern} in dir ${process.env.GITHUB_WORKSPACE}`)

  // Find files matching the glob pattern
  const files = globSync(pattern, {
    cwd: process.env.GITHUB_WORKSPACE,
    absolute: true,
    nodir: true,
  })

  if (files.length === 0) {
    console.log('No files found matching the pattern.')
    return
  }

  console.log(`Found ${files.length} file(s):`, files)

  // Upload files in parallel
  const uploadPromises = files.map(file => {
    const artifactName = path.basename(file) // Use the file name as the artifact name
    return artifactClient.uploadArtifact(artifactName, [file], path.dirname(file))
  })

  // Wait for all uploads to complete
  await Promise.all(uploadPromises)
}

run().catch(error => {
  console.error(error)
  process.exit(1)
})

additionally, i have a custom script to download & view traces directly from github artifacts.

# Check if a parameter is provided
if [ -z "$1" ]; then
  echo "Error: An artifact ID, local path, or remote URL is required."
  echo "Usage: ./view-trace.sh <artifactId|localPath|remotePath>"
  exit 1
fi

# Capture the parameter
input=$1
tmp_dir=$(mktemp -d)

# Function to download artifact by ID
download_artifact() {
  local artifact_id=$1
  echo "Downloading artifact ID $artifact_id..."
  gh api /repos/ORG_NAME/REPO_NAME/actions/artifacts/$artifact_id/zip > "$tmp_dir/artifact.zip"
  if [ $? -ne 0 ]; then
    echo "Error: Failed to download artifact ID $artifact_id."
    exit 1
  fi
}

# Function to handle remote URL
download_remote() {
  local url=$1
  echo "Extracting artifact ID from URL..."
  # Extract the artifact ID using regex
  if [[ $url =~ artifacts/([0-9]+) ]]; then
    artifact_id="${BASH_REMATCH[1]}"
    echo "Artifact ID extracted: $artifact_id"
    download_artifact "$artifact_id"
  else
    echo "Error: Failed to extract artifact ID from URL."
    exit 1
  fi
}

# upload-artifact double-zips zip files
extract_inner_zip() {
  echo "Extracting inner artifact ZIP..."
  unzip -q "$tmp_dir/artifact.zip" -d "$tmp_dir"
  rm "$tmp_dir/artifact.zip"
  if [ $? -ne 0 ]; then
    echo "Error: Failed to extract artifact."
    exit 1
  fi
}

# Determine the input type
if [[ $input =~ ^[0-9]+$ ]]; then
  # Numeric input: Treat as artifact ID
  download_artifact "$input"
  extract_inner_zip
elif [[ $input =~ ^https?:// ]]; then
  # URL input: Treat as remote path
  download_remote "$input"
  extract_inner_zip
elif [[ $input =~ ^/ ]]; then
  # Local path: Verify file exists
  if [ -f "$input" ]; then
    echo "Using local file $input..."
    cp "$input" "$tmp_dir/artifact.zip"
  else
    echo "Error: Local file $input does not exist."
    exit 1
  fi
else
  echo "Error: Invalid input. Provide an artifact ID, local path, or remote URL."
  exit 1
fi

# Find the inner ZIP file (randomly named)
inner_zip=$(find "$tmp_dir" -name "*.zip" | head -n 1)
if [ -z "$inner_zip" ]; then
  echo "Error: No inner ZIP file found in the artifact."
  exit 1
fi

# Open the extracted folder with Playwright trace viewer
echo "Opening trace viewer..."
yarn playwright show-trace "$inner_zip"
if [ $? -ne 0 ]; then
  echo "Error: Failed to open trace viewer."
  exit 1
fi

echo "Trace viewer closed. Temporary files are in: $tmp_dir"

@sheremet-va
Copy link
Member Author

sheremet-va commented Sep 22, 2025

@sheremet-va just FYI, I've been using that example from the referenced github issue in CI ever since I opened it. The additional step is having a custom upload_multi_artifacts github action to upload the generated traces. i will share here in case anyone wants to use it.

Feel free to open a separate issue to have a better CI support. I am not familiar with GitHub Actions that much, but maybe we can have this upload/download actions built-in with the GitHub reporter.

@tsirlucas
Copy link
Contributor

@sheremet-va just FYI, I've been using that example from the referenced github issue in CI ever since I opened it. The additional step is having a custom upload_multi_artifacts github action to upload the generated traces. i will share here in case anyone wants to use it.

Feel free to open a separate issue to have a better CI support. I am not familiar with GitHub Actions that much, but maybe we can have this upload/download actions built-in with the GitHub reporter.

Github reporter is a new thing to me. Got interested in using it at work so I will take some time to open the issue and hack around probably next week.

@shairez
Copy link
Contributor

shairez commented Oct 1, 2025

this is exciting! thanks for this @sheremet-va and @tsirlucas ! 🙏

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.

add native support for playwright tracing

4 participants