Skip to content

Commit a56e392

Browse files
pftgclaude
andcommitted
feat: GitHub Actions artifact integration with inline HTML report
Upload HTML report with archive: false (v7) for inline preview in Actions UI, plus full directory zip for offline review with images. Changes: - upload-screenshots action: v6→v7, add HTML report uploads (inline single-file + full directory), configurable report-path and retention-days inputs - test.yml: add PR comment with link to artifact using peter-evans/find-comment + create-or-update-comment (avoids spam by updating existing comment) - README: updated GitHub Actions section with v7 examples, archive: false for inline preview, PR comment snippet Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
1 parent c1a53c3 commit a56e392

3 files changed

Lines changed: 119 additions & 19 deletions

File tree

Lines changed: 39 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -1,23 +1,51 @@
11
---
2-
name: 'Upload screenshots for debug'
3-
description: 'To reproduce the issue locally, download the screenshots from the failed test'
2+
name: 'Upload SnapDiff screenshots'
3+
description: 'Upload screenshot diffs and HTML report as CI artifacts'
44
inputs:
55
name:
6-
description: 'Customize the name of the artifact'
6+
description: 'Artifact name prefix'
77
required: true
8+
report-path:
9+
description: 'Path to the HTML report directory'
10+
default: 'tmp/snap_diff'
11+
retention-days:
12+
description: 'Number of days to retain artifacts'
13+
default: '2'
814
runs:
915
using: 'composite'
1016
steps:
11-
- uses: actions/upload-artifact@v6
17+
- name: Upload screenshot diffs
18+
uses: actions/upload-artifact@v7
1219
with:
1320
name: ${{ inputs.name }}-diffs
14-
retention-days: 1
15-
path: |
16-
test/fixtures/app/doc/screenshots/
21+
retention-days: ${{ inputs.retention-days }}
22+
path: test/fixtures/app/doc/screenshots/
1723

18-
- uses: actions/upload-artifact@v6
24+
- name: Upload Capybara failure screenshots
25+
uses: actions/upload-artifact@v7
1926
with:
2027
name: ${{ inputs.name }}-capybara-fails
21-
retention-days: 1
22-
path: |
23-
tmp/capybara/screenshots-diffs/
28+
retention-days: ${{ inputs.retention-days }}
29+
path: tmp/capybara/screenshots-diffs/
30+
31+
- name: Check for HTML report
32+
id: check-report
33+
shell: bash
34+
run: test -f "${{ inputs.report-path }}/index.html" && echo "exists=true" >> "$GITHUB_OUTPUT" || echo "exists=false" >> "$GITHUB_OUTPUT"
35+
36+
- name: Upload HTML report (inline preview)
37+
if: steps.check-report.outputs.exists == 'true'
38+
uses: actions/upload-artifact@v7
39+
with:
40+
name: ${{ inputs.name }}-report
41+
retention-days: ${{ inputs.retention-days }}
42+
path: ${{ inputs.report-path }}/index.html
43+
archive: false
44+
45+
- name: Upload HTML report with images (full download)
46+
if: steps.check-report.outputs.exists == 'true'
47+
uses: actions/upload-artifact@v7
48+
with:
49+
name: ${{ inputs.name }}-report-full
50+
retention-days: ${{ inputs.retention-days }}
51+
path: ${{ inputs.report-path }}/

.github/workflows/test.yml

Lines changed: 35 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -5,12 +5,21 @@ name: Test
55
on:
66
push:
77
branches: [ master ]
8+
paths:
9+
- '**.gemfile'
10+
- '**.rb'
11+
- '.github/workflows/**'
12+
- '.github/actions/**'
13+
- 'Gemfile*'
14+
- '!bin/**'
815
pull_request:
916
type: [ opened, synchronize, reopened, review_requested ]
1017
paths:
1118
- '**.gemfile'
1219
- '**.rb'
1320
- '.github/workflows/**'
21+
- '.github/actions/**'
22+
- 'Gemfile*'
1423
- '!bin/**'
1524
workflow_dispatch:
1625

@@ -52,6 +61,9 @@ jobs:
5261
name: Functional Test
5362
runs-on: ubuntu-latest
5463
timeout-minutes: 5
64+
permissions:
65+
contents: read
66+
pull-requests: write
5567

5668
steps:
5769
- name: Checkout code
@@ -73,6 +85,29 @@ jobs:
7385
with:
7486
name: base-screenshots
7587

88+
- name: Find existing report comment
89+
if: failure() && github.event_name == 'pull_request'
90+
uses: peter-evans/find-comment@v3
91+
id: find-comment
92+
with:
93+
issue-number: ${{ github.event.pull_request.number }}
94+
comment-author: 'github-actions[bot]'
95+
body-includes: 'Screenshot diffs detected'
96+
97+
- name: Comment PR with report link
98+
if: failure() && github.event_name == 'pull_request'
99+
uses: peter-evans/create-or-update-comment@v5
100+
with:
101+
comment-id: ${{ steps.find-comment.outputs.comment-id }}
102+
issue-number: ${{ github.event.pull_request.number }}
103+
edit-mode: replace
104+
body: |
105+
### Screenshot diffs detected
106+
107+
[View HTML report](${{ github.server_url }}/${{ github.repository }}/actions/runs/${{ github.run_id }}#artifacts) in Actions artifacts.
108+
109+
Click `base-screenshots-report` for inline preview, or download `base-screenshots-report-full` for images.
110+
76111
- name: Uploading Coverage Report
77112
uses: actions/upload-artifact@v7
78113
with:

README.md

Lines changed: 45 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -840,26 +840,63 @@ This sets up Capybara to serve static files and configures screenshot paths auto
840840

841841
### GitHub Actions Integration
842842

843-
Upload the HTML report as a CI artifact so reviewers can browse screenshot diffs directly:
843+
Add to your test helper to enable the HTML report:
844+
845+
```ruby
846+
require 'capybara_screenshot_diff/reporters/html'
847+
```
848+
849+
Upload the report as a CI artifact. With `archive: false`, the HTML renders inline in the Actions UI — no download needed:
844850

845851
```yaml
846852
# .github/workflows/test.yml
847853
- name: Run tests
848854
run: bundle exec rake test
849855

856+
# Inline preview (renders in browser, single HTML file)
850857
- name: Upload screenshot report
851858
if: failure()
852-
uses: actions/upload-artifact@v4
859+
uses: actions/upload-artifact@v7
860+
with:
861+
name: screenshot-report
862+
path: tmp/snap_diff/index.html
863+
archive: false
864+
retention-days: 2
865+
866+
# Full report with images (download for offline review)
867+
- name: Upload full screenshot report
868+
if: failure()
869+
uses: actions/upload-artifact@v7
853870
with:
854-
name: screenshot-diffs
855-
path: tmp/snap_diff-report/
856-
retention-days: 7
871+
name: screenshot-report-full
872+
path: tmp/snap_diff/
873+
retention-days: 2
857874
```
858875
859-
To enable the HTML report, add to your test helper:
876+
**Optional: PR comment with link to report**
860877
861-
```ruby
862-
require 'capybara_screenshot_diff/reporters/html'
878+
Automatically comment on the PR with a link to the artifact:
879+
880+
```yaml
881+
- name: Find existing comment
882+
if: failure() && github.event_name == 'pull_request'
883+
uses: peter-evans/find-comment@v3
884+
id: find-comment
885+
with:
886+
issue-number: ${{ github.event.pull_request.number }}
887+
comment-author: 'github-actions[bot]'
888+
body-includes: 'Screenshot diffs detected'
889+
890+
- name: Comment PR with report link
891+
if: failure() && github.event_name == 'pull_request'
892+
uses: peter-evans/create-or-update-comment@v5
893+
with:
894+
comment-id: ${{ steps.find-comment.outputs.comment-id }}
895+
issue-number: ${{ github.event.pull_request.number }}
896+
edit-mode: replace
897+
body: |
898+
### Screenshot diffs detected
899+
[View report](${{ github.server_url }}/${{ github.repository }}/actions/runs/${{ github.run_id }}#artifacts)
863900
```
864901
865902
## Troubleshooting

0 commit comments

Comments
 (0)