Skip to content

Release tracking

Release tracking #4093

name: Visual test
on:
pull_request:
jobs:
ci:
if: ${{ github.repository == 'primer/brand' }}
name: Storybook
runs-on: ubuntu-24.04
env:
NODE_ENV: test
steps:
- name: Checkout repository
uses: actions/checkout@v4
- name: Set up Node
uses: actions/setup-node@v4
with:
node-version: 20
- name: Cache dependencies
uses: actions/cache@v4
with:
path: ~/.npm
key: ${{ runner.os }}-node-${{ hashFiles('**/package-lock.json') }}
restore-keys: |
${{ runner.os }}-node-
- name: Install Playwright
run: |
npx playwright install
npx playwright install-deps chromium
- name: Install dependencies
run: npm ci --legacy-peer-deps && cd apps/docs && npm ci --legacy-peer-deps
- name: Build assets
run: NODE_ENV=test npm run build:lib && cd apps/storybook && npx storybook build
- name: Run visual tests
id: playwright-step
run: NODE_ENV=test npx start-server-and-test 'npx http-server ./apps/storybook/storybook-static -p 6006' 6006 'cd packages/e2e && npx playwright test'
continue-on-error: true
- name: Upload error screenshots
uses: actions/upload-artifact@v4
if: steps.playwright-step.outcome != 'success'
with:
name: playwright-test-results
path: packages/e2e/playwright-test-results
- name: Upload test results
uses: actions/upload-artifact@v4
if: ${{ !cancelled() }}
with:
name: playwright-report
path: packages/e2e/playwright-report/
retention-days: 30
- name: Comment on the PR about no visual differences
if: steps.playwright-step.outcome != 'success'
uses: phulsechinmay/[email protected]
with:
message: |
### ⚠️ Visual differences found
<details><summary>Our visual comparison tests found UI differences.</summary>
Please review the differences by using the test artifacts to ensure that the changes were intentional.
Artifacts can be downloaded and reviewed locally.
Download links are available at the bottom of the workflow summary screen.
##### Example:
![artifacts section of workflow run](https://user-images.githubusercontent.com/13340707/181026915-2bda8a90-58e3-40ef-a2f6-c9c4af6e9c4a.png)
If the changes are expected, please run `npm run test:visual:update-snapshots` to replace the previous fixtures.
</details>
[Review visual differences](https://github.com/primer/brand/actions/runs/${{ github.run_id }})
GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
COMMENT_IDENTIFIER: 'visual-comparison-diff'
- name: Comment on the PR about no visual differences
if: steps.playwright-step.outcome == 'success'
uses: phulsechinmay/[email protected]
with:
message: |
### 🟢 No visual differences found
Our visual comparison tests did not find any differences in the UI.
GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
COMMENT_IDENTIFIER: 'visual-comparison-diff'