E2E/action.yml at main · SillyLittleTech/E2E · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
name: 'E2E Testing Suite'
description: 'Automatically capture screenshots of your website in web/mobile and light/dark modes, plus a11y tests with Playwright'
author: 'SillyLittleTech'

branding:
  icon: 'camera'
  color: 'purple'

inputs:
  port:
    description: 'Port for the preview server and Playwright tests'
    required: false
    default: '4173'
  node-version:
    description: 'Node.js version to use'
    required: false
    default: '20'
  build-command:
    description: 'Command to build the site'
    required: false
    default: 'npm run build'
  preview-command:
    description: 'Command to start the preview server'
    required: false
    default: 'npm run preview'
  test-files:
    description: 'Playwright test files to run (space-separated)'
    required: false
    default: 'tests/e2e.spec.ts tests/a11y.spec.ts'
  screenshot-prefix:
    description: 'Prefix for screenshot filenames'
    required: false
    default: 'portfolio'

runs:
  using: 'composite'
  steps:
    - name: Use Node
      uses: actions/setup-node@v4
      with:
        node-version: ${{ inputs.node-version }}

    - name: Install deps
      shell: bash
      run: npm ci

    - name: Build site
      shell: bash
      run: ${{ inputs.build-command }}

    - name: Start preview server
      shell: bash
      run: ${{ inputs.preview-command }} -- --port ${{ inputs.port }} &

    - name: Wait for server to be ready
      shell: bash
      run: npx wait-on http://localhost:${{ inputs.port }}

    - name: Cache Playwright browsers
      id: playwright-cache
      uses: actions/cache@v4
      with:
        path: ~/.cache/ms-playwright
        key: ${{ runner.os }}-playwright-${{ hashFiles('package-lock.json') }}

    - name: Install Playwright browsers
      if: steps.playwright-cache.outputs.cache-hit != 'true'
      shell: bash
      run: npx playwright install --with-deps

    - name: Run Playwright tests (screenshots & accessibility)
      shell: bash
      run: |
        npx playwright test ${{ inputs.test-files }}

    - name: Upload artifacts
      uses: actions/upload-artifact@v4
      with:
        name: e2e-test-results
        path: |
          playwright-logs/${{ inputs.screenshot-prefix }}-web-light.png
          playwright-logs/${{ inputs.screenshot-prefix }}-web-dark.png
          playwright-logs/${{ inputs.screenshot-prefix }}-mobile-light.png
          playwright-logs/${{ inputs.screenshot-prefix }}-mobile-dark.png
          playwright-report/**
          axe-report.json

    - name: Add screenshot to job summary
      shell: bash
      run: |
        web_light="playwright-logs/${{ inputs.screenshot-prefix }}-web-light.png"
        web_dark="playwright-logs/${{ inputs.screenshot-prefix }}-web-dark.png"
        mobile_light="playwright-logs/${{ inputs.screenshot-prefix }}-mobile-light.png"
        mobile_dark="playwright-logs/${{ inputs.screenshot-prefix }}-mobile-dark.png"

        has_any=false
        if [ -f "$web_light" ] || [ -f "$web_dark" ] || [ -f "$mobile_light" ] || [ -f "$mobile_dark" ]; then
          has_any=true
        fi

        if [ "$has_any" = true ]; then
          {
            echo "## Web Render"
            if [ -f "$web_light" ] || [ -f "$web_dark" ]; then
              echo
              echo "### Web"
              if [ -f "$web_light" ]; then
                echo
                echo "#### Light"
                echo
                echo "![Web Light Render]($web_light)"
              fi
              if [ -f "$web_dark" ]; then
                echo
                echo "#### Dark"
                echo
                echo "![Web Dark Render]($web_dark)"
              fi
            fi
            if [ -f "$mobile_light" ] || [ -f "$mobile_dark" ]; then
              echo
              echo "### Mobile"
              if [ -f "$mobile_light" ]; then
                echo
                echo "#### Light"
                echo
                echo "![Mobile Light Render]($mobile_light)"
              fi
              if [ -f "$mobile_dark" ]; then
                echo
                echo "#### Dark"
                echo
                echo "![Mobile Dark Render]($mobile_dark)"
              fi
            fi
            echo
            echo "_This screenshot was generated by Playwright during the latest workflow run._"
          } >> "$GITHUB_STEP_SUMMARY"
        else
          echo "⚠️ Screenshots not found." >> "$GITHUB_STEP_SUMMARY"
        fi