Setup ci action for UI Performance Testing with Lighthouse

languages-learner · Mar 11, 2024 · 9fc16bd · 9fc16bd
1 parent 5419c00
commit 9fc16bd
Show file tree

Hide file tree

Showing 9 changed files with 540 additions and 55 deletions.
diff --git a/.github/workflows/e2e-tests.yml b/.github/workflows/e2e-tests.yml
@@ -95,3 +95,11 @@ jobs:
           path: |
             cypress/snapshots/actual
             cypress/snapshots/diff
+
+      - name: Save lighthouse report
+        if: always()
+        uses: actions/upload-artifact@v4
+        with:
+          name: ${{ inputs.platform == 'desktop' && 'e2e-chrome-lighthouse' || 'e2e-chrome-mobile-lighthouse' }}
+          path: |
+            cypress/configs/lighthouse.html
diff --git a/.gitignore b/.gitignore
@@ -14,6 +14,7 @@ dist-test
 coverage
 cypress/snapshots/actual
 cypress/snapshots/diff
+cypress/configs/lighthouse.html
 
 # misc
 npm-debug.log*

diff --git a/cypress/configs/common/overrideMobileConfig.ts b/cypress/configs/common/overrideMobileConfig.ts
@@ -2,5 +2,11 @@ export const overrideMobileConfig = (config: Cypress.ConfigOptions) => {
     config.e2e!.viewportWidth = 400
     config.e2e!.viewportHeight = 660
 
+    config.lighthouse!.options!.screenEmulation!.width = 400
+    config.lighthouse!.options!.screenEmulation!.height = 660
+
+    config.lighthouse!.options!.formFactor = 'mobile'
+    config.lighthouse!.options!.screenEmulation!.mobile = true
+
     return config
 }
diff --git a/cypress/configs/index.ts b/cypress/configs/index.ts
@@ -1,7 +1,9 @@
 import { defineConfig } from 'cypress'
 import { configureVisualRegression } from 'cypress-visual-regression/dist/plugin'
+import { lighthouse, prepareAudit } from '@cypress-audit/lighthouse'
 // https://github.com/TypeStrong/ts-node/issues/1096
 import * as dotenv from 'dotenv'
+import fs from 'fs'
 
 dotenv.config({ path: '../../.env' })
 
@@ -33,19 +35,53 @@ export default defineConfig({
         viewportHeight: 660,
         viewportWidth: 1100,
         defaultCommandTimeout: 25000,
+        taskTimeout: 120000,
         experimentalRunAllSpecs: true,
         screenshotsFolder: './cypress/snapshots/actual',
         setupNodeEvents(on) {
             configureVisualRegression(on)
 
             on('before:browser:launch', (browser, launchOptions) => {
+                prepareAudit(launchOptions)
+
                 if (browser.family === 'chromium' && browser.name !== 'electron') {
                     launchOptions.args.push('--window-size=1920,1080')
                     launchOptions.args.push('--force-device-scale-factor=1')
                 }
 
                 return launchOptions
             })
+
+            on('task', {
+                lighthouse: lighthouse((lighthouseReport) => {
+                    console.log('---- Writing lighthouse report to disk ----')
+
+                    fs.writeFile('lighthouse.html', lighthouseReport.report, (error: never) => {
+                        error ? console.log(error) : console.log('Report created successfully')
+                    })
+                }),
+            })
+        },
+    },
+    lighthouse: {
+        options: {
+            formFactor: 'desktop',
+            screenEmulation: {
+                width: 1350,
+                height: 940,
+                deviceScaleRatio: 1,
+                mobile: false,
+                disable: false,
+            },
+            throttling: {
+                rttMs: 40,
+                throughputKbps: 11024,
+                cpuSlowdownMultiplier: 1,
+                requestLatencyMs: 0,
+                downloadThroughputKbps: 0,
+                uploadThroughputKbps: 0,
+            },
+            output: 'html',
         },
     },
 })
diff --git a/cypress/e2e/landing.cy.ts b/cypress/e2e/landing.cy.ts
@@ -9,16 +9,27 @@ describe('landing', () => {
         cy.location('pathname').should('equal', withLang())
     })
 
+    it('lighthouse', {
+        env: {
+            language: 'en',
+        },
+    }, () => {
+        cy.lighthouse({
+            performance: 80,
+            accessibility: 75,
+            'best-practices': 100,
+            seo: 80,
+        })
+    })
+
     it('unauthenticated user', () => {
         cy
             .logout()
-            .visit(withLang())
             .toMatchSnapshotForEl(EDataTest.landing_layout, 'Landing page content for unauthenticated user')
     })
 
     it('authenticated user', () => {
         cy
-            .visit(withLang())
             .auth()
             .visit(withLang())
             .toMatchSnapshotForEl(EDataTest.landing_layout, 'Landing page content for authenticated user')

diff --git a/cypress/support/commands.ts b/cypress/support/commands.ts
@@ -11,6 +11,8 @@ import { EPageName } from '@/enums/EPageName'
 import { type EWordStatus } from '@/services/dbstore/dto/Words'
 import { WordStatusTranslationKey } from '@/modules/workspace/modules/words/composables/useWordStatuses'
 
+import '@cypress-audit/lighthouse/commands'
+
 Cypress.Commands.add('el', (dataTest: EDataTest, options?: Partial<Cypress.Loggable & Cypress.Timeoutable & Cypress.Withinable & Cypress.Shadow>) =>
     cy.get(elSelector(dataTest), options))
 Cypress.Commands.add('elByClass', (dataTestClass: EDataTestClass, options?: Partial<Cypress.Loggable & Cypress.Timeoutable & Cypress.Withinable & Cypress.Shadow>) =>

diff --git a/cypress/tsconfig.json b/cypress/tsconfig.json
@@ -3,7 +3,11 @@
   "include": ["./**/*.ts", "../types/cypress.d.ts"],
   "exclude": [],
   "compilerOptions": {
-    "types": ["cypress", "cypress-visual-regression"],
+    "types": [
+      "cypress",
+      "cypress-visual-regression",
+      "@cypress-audit/lighthouse"
+    ],
     "lib": ["es2017", "dom"],
     "isolatedModules": false,
     "allowJs": true,