feat(browser): support playwright tracing#8584
Conversation
✅ Deploy Preview for vitest-dev ready!
To edit notification comments on pull requests, go to your Netlify project configuration. |
|
@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 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"
|
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. |
|
this is exciting! thanks for this @sheremet-va and @tsirlucas ! 🙏 |
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:
pnpm-lock.yamlunless you introduce a new test example.Tests
pnpm test:ci.Documentation
pnpm run docscommand.Changesets
feat:,fix:,perf:,docs:, orchore:.