This repository has been archived by the owner on Sep 26, 2024. It is now read-only.
Deriv Lighthouse Audit #32557
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| name: Deriv Lighthouse Audit | |
| permissions: | |
| actions: write | |
| checks: write | |
| contents: write | |
| deployments: write | |
| pull-requests: write | |
| statuses: write | |
| on: | |
| issue_comment: | |
| types: [created] | |
| jobs: | |
| generate_lighthouse_audit: | |
| timeout-minutes: 30 | |
| runs-on: ubuntu-latest | |
| steps: | |
| - name: Add comment to PR | |
| id: loading_comment_to_pr | |
| uses: marocchino/sticky-pull-request-comment@v2 | |
| with: | |
| GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }} | |
| number: ${{ github.event.issue.number }} | |
| header: lighthouse | |
| message: | | |
| Running Lighthouse audit... | |
| - name: Capture preview URL | |
| id: capture_preview_url | |
| uses: deriv-com/[email protected] | |
| with: | |
| GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }} | |
| - uses: actions/checkout@v3 | |
| - name: Audit preview URL with Lighthouse | |
| id: lighthouse_audit | |
| uses: treosh/lighthouse-ci-action@v9 | |
| with: | |
| urls: | | |
| ${{ steps.capture_preview_url.outputs.url }} | |
| uploadArtifacts: true | |
| temporaryPublicStorage: true | |
| runs: 5 | |
| - name: Format lighthouse score | |
| id: format_lighthouse_score | |
| uses: actions/github-script@v6 | |
| with: | |
| github-token: ${{secrets.GITHUB_TOKEN}} | |
| script: | | |
| const result = ${{ steps.lighthouse_audit.outputs.manifest }}[4].summary | |
| const links = ${{ steps.lighthouse_audit.outputs.links }} | |
| const formatResult = (res) => Math.round((res * 100)) | |
| Object.keys(result).forEach(key => result[key] = formatResult(result[key])) | |
| const score = res => res >= 90 ? '🟢' : res >= 50 ? '🟠' : '🔴' | |
| const full_report = Object.values(links)[0] | |
| const comment = [ | |
| `⚡️ [Lighthouse report](${full_report}) for the changes in this PR:`, | |
| '| Category | Score |', | |
| '| --- | --- |', | |
| `| ${score(result.performance)} Performance | ${result.performance} |`, | |
| `| ${score(result.accessibility)} Accessibility | ${result.accessibility} |`, | |
| `| ${score(result['best-practices'])} Best practices | ${result['best-practices']} |`, | |
| `| ${score(result.seo)} SEO | ${result.seo} |`, | |
| `| ${score(result.pwa)} PWA | ${result.pwa} |`, | |
| ' ', | |
| `*Lighthouse ran on [${Object.keys(links)[0]}](${Object.keys(links)[0]})*` | |
| ].join('\n') | |
| core.setOutput("comment", comment); | |
| core.setOutput("performance", result.performance); | |
| core.setOutput("seo", result.seo); | |
| core.setOutput("pwa", result.pwa); | |
| core.setOutput("accessibility", result.accessibility); | |
| core.setOutput("best_practices", result['best-practices']); | |
| core.setOutput("performance_color", score(result.performance)); | |
| core.setOutput("seo_color", score(result.seo)); | |
| core.setOutput("pwa_color", score(result.pwa)); | |
| core.setOutput("accessibility_color", score(result.accessibility)); | |
| core.setOutput("best_practices_color", score(result['best-practices'])); | |
| core.setOutput("full_report", full_report); | |
| - name: Add comment to PR | |
| id: comment_to_pr | |
| uses: marocchino/sticky-pull-request-comment@v2 | |
| with: | |
| GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }} | |
| number: ${{ github.event.issue.number }} | |
| header: lighthouse | |
| message: | | |
| ${{ steps.format_lighthouse_score.outputs.comment }} | |
| - name: Slack Notification 📣 | |
| uses: 8398a7/action-slack@v3 | |
| if: ${{ steps.format_lighthouse_score.outputs.performance < 0 }} | |
| with: | |
| status: custom | |
| fields: workflow,job,commit,repo | |
| custom_payload: | | |
| { | |
| "blocks": [ | |
| { | |
| "type": "section", | |
| "text": { | |
| "type": "plain_text", | |
| "emoji": true, | |
| "text": "It appears that this pull request has not met the required performance score." | |
| } | |
| }, | |
| { | |
| "type": "divider" | |
| }, | |
| { | |
| "type": "section", | |
| "text": { | |
| "type": "mrkdwn", | |
| "text": "*${{ steps.format_lighthouse_score.outputs.performance_color }} PERFORMANCE:* ${{ steps.format_lighthouse_score.outputs.performance }}\n\n*${{ steps.format_lighthouse_score.outputs.accessibility_color }} ACCESSIBILITY:* ${{ steps.format_lighthouse_score.outputs.accessibility }}\n\n*${{ steps.format_lighthouse_score.outputs.best_practices_color }} BEST PRACTICES:* ${{ steps.format_lighthouse_score.outputs.best_practices }}\n\n*${{ steps.format_lighthouse_score.outputs.seo_color }} SEO:* ${{ steps.format_lighthouse_score.outputs.seo }} \n\n*${{ steps.format_lighthouse_score.outputs.pwa_color }} PWA:* ${{ steps.format_lighthouse_score.outputs.pwa }}" | |
| } | |
| }, | |
| { | |
| "type": "divider" | |
| }, | |
| { | |
| "type": "section", | |
| "text": { | |
| "type": "mrkdwn", | |
| "text": "*User: <${{ github.event.issue.user.url }}|${{ github.event.issue.user.login }}>*\n*Link:* ${{ github.event.issue.pull_request.html_url }}\n*Title:* ${{ github.event.issue.title }}\n*Status:* ${{ github.event.issue.state }}" | |
| }, | |
| "accessory": { | |
| "type": "image", | |
| "image_url": "${{ github.event.issue.user.avatar_url }}", | |
| "alt_text": "${{ github.event.issue.user.login }}" | |
| } | |
| }, | |
| { | |
| "type": "divider" | |
| }, | |
| { | |
| "type": "context", | |
| "elements": [ | |
| { | |
| "type": "image", | |
| "image_url": "https://api.slack.com/img/blocks/bkb_template_images/notificationsWarningIcon.png", | |
| "alt_text": "notifications warning icon" | |
| }, | |
| { | |
| "type": "mrkdwn", | |
| "text": "*<!subteam^S04RV6RFCTW> please check the PR*" | |
| } | |
| ] | |
| }, | |
| { | |
| "type": "divider" | |
| }, | |
| { | |
| "type": "section", | |
| "text": { | |
| "type": "mrkdwn", | |
| "text": "Want the full lighthouse report?" | |
| }, | |
| "accessory": { | |
| "type": "button", | |
| "text": { | |
| "type": "plain_text", | |
| "text": "View", | |
| "emoji": true | |
| }, | |
| "value": "click_me_123", | |
| "url": "${{ steps.format_lighthouse_score.outputs.full_report }}", | |
| "action_id": "button-action" | |
| } | |
| }, | |
| { | |
| "type": "divider" | |
| } | |
| ] | |
| } | |
| env: | |
| SLACK_WEBHOOK_URL: ${{ secrets.SLACK_WEBHOOK_LIGHTHOUSE }} |