Skip to content

Commit 70f6659

Browse files
kvestuskvestus
committed
Add visual e2e tests
1 parent eae8d65 commit 70f6659

File tree

68 files changed

+346
-81
lines changed

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

68 files changed

+346
-81
lines changed

‎.github/workflows/main.yml‎

Lines changed: 24 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -90,7 +90,7 @@ jobs:
9090
uses: actions/download-artifact@v4
9191
with:
9292
name: dist-test
93-
path: dist
93+
path: dist-test
9494

9595
- name: Install dependencies
9696
if: steps.cache.outputs.cache-hit != 'true'
@@ -109,17 +109,14 @@ jobs:
109109
uses: cypress-io/github-action@v6
110110
with:
111111
install: false
112-
start: npm run preview
113-
wait-on: "http://localhost:8080"
114-
wait-on-timeout: 120
112+
start: npm run preview:test
115113
browser: chrome
116114
# https://github.com/languages-learner/web/issues/32 - Disable cypress logs because limit reached
117115
# record: true
118116
# parallel: true
119117
# group: "E2E - Chrome"
120118
spec: cypress/e2e/*
121-
config-file: cypress.config.ts
122-
config: "{\"e2e\":{\"baseUrl\":\"http://localhost:8080\"}}"
119+
config-file: cypress/configs/preview.ts
123120
env:
124121
TEST_USER_USERNAME: ${{ secrets.TEST_USER_USERNAME_1 }}
125122
TEST_USER_PASSWORD: ${{ secrets.TEST_USER_PASSWORD_1 }}
@@ -130,6 +127,15 @@ jobs:
130127
# COMMIT_INFO_SHA: ${{ github.event.pull_request.head.sha }}
131128
# GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
132129

130+
- name: Save cypress snapshots
131+
if: always()
132+
uses: actions/upload-artifact@v4
133+
with:
134+
name: e2e-chrome-cypress-snapshots
135+
path: |
136+
cypress/snapshots/actual
137+
cypress/snapshots/diff
138+
133139
e2e-chrome-mobile-tests:
134140
timeout-minutes: 5
135141
runs-on: ubuntu-latest
@@ -163,7 +169,7 @@ jobs:
163169
uses: actions/download-artifact@v4
164170
with:
165171
name: dist-test
166-
path: dist
172+
path: dist-test
167173

168174
- name: Install dependencies
169175
if: steps.cache.outputs.cache-hit != 'true'
@@ -182,17 +188,14 @@ jobs:
182188
uses: cypress-io/github-action@v6
183189
with:
184190
install: false
185-
start: npm run preview
186-
wait-on: "http://localhost:8080"
187-
wait-on-timeout: 120
191+
start: npm run preview:test
188192
browser: chrome
189193
# https://github.com/languages-learner/web/issues/32 - Disable cypress logs because limit reached
190194
# record: true
191195
# parallel: true
192196
# group: "E2E - Chrome - Mobile"
193197
spec: cypress/e2e/*
194-
config-file: cypress.config.ts
195-
config: "{\"e2e\":{\"baseUrl\":\"http://localhost:8080\",\"viewportWidth\":400,\"viewportHeight\":660}}"
198+
config-file: cypress/configs/mobile.preview.ts
196199
env:
197200
TEST_USER_USERNAME: ${{ secrets.TEST_USER_USERNAME_2 }}
198201
TEST_USER_PASSWORD: ${{ secrets.TEST_USER_PASSWORD_2 }}
@@ -203,6 +206,15 @@ jobs:
203206
# COMMIT_INFO_SHA: ${{ github.event.pull_request.head.sha }}
204207
# GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
205208

209+
- name: Save cypress snapshots
210+
if: always()
211+
uses: actions/upload-artifact@v4
212+
with:
213+
name: e2e-chrome-mobile-cypress-snapshots
214+
path: |
215+
cypress/snapshots/actual
216+
cypress/snapshots/diff
217+
206218
deploy_live_website:
207219
timeout-minutes: 2
208220
name: Deploy Prod

‎.github/workflows/pull-request.yml‎

Lines changed: 24 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -91,7 +91,7 @@ jobs:
9191
uses: actions/download-artifact@v4
9292
with:
9393
name: dist-test
94-
path: dist
94+
path: dist-test
9595

9696
- name: Install dependencies
9797
if: steps.cache.outputs.cache-hit != 'true'
@@ -110,17 +110,14 @@ jobs:
110110
uses: cypress-io/github-action@v6
111111
with:
112112
install: false
113-
start: npm run preview
114-
wait-on: "http://localhost:8080"
115-
wait-on-timeout: 120
113+
start: npm run preview:test
116114
browser: chrome
117115
# https://github.com/languages-learner/web/issues/32 - Disable cypress logs because limit reached
118116
# record: true
119117
# parallel: true
120118
# group: "E2E - Chrome"
121119
spec: cypress/e2e/*
122-
config-file: cypress.config.ts
123-
config: "{\"e2e\":{\"baseUrl\":\"http://localhost:8080\"}}"
120+
config-file: cypress/configs/preview.ts
124121
env:
125122
TEST_USER_USERNAME: ${{ secrets.TEST_USER_USERNAME_1 }}
126123
TEST_USER_PASSWORD: ${{ secrets.TEST_USER_PASSWORD_1 }}
@@ -131,6 +128,15 @@ jobs:
131128
# COMMIT_INFO_SHA: ${{ github.event.pull_request.head.sha }}
132129
# GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
133130

131+
- name: Save cypress snapshots
132+
if: always()
133+
uses: actions/upload-artifact@v4
134+
with:
135+
name: e2e-chrome-cypress-snapshots
136+
path: |
137+
cypress/snapshots/actual
138+
cypress/snapshots/diff
139+
134140
e2e-chrome-mobile-tests:
135141
timeout-minutes: 5
136142
environment: manual_e2e_tests
@@ -165,7 +171,7 @@ jobs:
165171
uses: actions/download-artifact@v4
166172
with:
167173
name: dist-test
168-
path: dist
174+
path: dist-test
169175

170176
- name: Install dependencies
171177
if: steps.cache.outputs.cache-hit != 'true'
@@ -184,17 +190,14 @@ jobs:
184190
uses: cypress-io/github-action@v6
185191
with:
186192
install: false
187-
start: npm run preview
188-
wait-on: "http://localhost:8080"
189-
wait-on-timeout: 120
193+
start: npm run preview:test
190194
browser: chrome
191195
# https://github.com/languages-learner/web/issues/32 - Disable cypress logs because limit reached
192196
# record: true
193197
# parallel: true
194198
# group: "E2E - Chrome - Mobile"
195199
spec: cypress/e2e/*
196-
config-file: cypress.config.ts
197-
config: "{\"e2e\":{\"baseUrl\":\"http://localhost:8080\",\"viewportWidth\":400,\"viewportHeight\":660}}"
200+
config-file: cypress/configs/mobile.preview.ts
198201
env:
199202
TEST_USER_USERNAME: ${{ secrets.TEST_USER_USERNAME_2 }}
200203
TEST_USER_PASSWORD: ${{ secrets.TEST_USER_PASSWORD_2 }}
@@ -205,6 +208,15 @@ jobs:
205208
# COMMIT_INFO_SHA: ${{ github.event.pull_request.head.sha }}
206209
# GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
207210

211+
- name: Save cypress snapshots
212+
if: always()
213+
uses: actions/upload-artifact@v4
214+
with:
215+
name: e2e-chrome-mobile-cypress-snapshots
216+
path: |
217+
cypress/snapshots/actual
218+
cypress/snapshots/diff
219+
208220
deploy_preview_website:
209221
timeout-minutes: 2
210222
environment: deploy_preview

‎.gitignore‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -12,6 +12,8 @@ dev-dist
1212
# testing
1313
dist-test
1414
coverage
15+
cypress/snapshots/actual
16+
cypress/snapshots/diff
1517

1618
# misc
1719
npm-debug.log*

‎cypress.config.ts‎

Lines changed: 0 additions & 32 deletions
This file was deleted.

‎cypress/configs/common/overrideMobileConfig.ts‎

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,6 @@
1+
export const overrideMobileConfig = (config: Cypress.ConfigOptions) => {
2+
config.e2e!.viewportWidth = 400
3+
config.e2e!.viewportHeight = 660
4+
5+
return config
6+
}

‎cypress/configs/common/overridePreviewConfig.ts‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
export const overridePreviewConfig = (config: Cypress.ConfigOptions) => {
2+
config.e2e!.baseUrl = 'http://localhost:8080'
3+
4+
return config
5+
}

‎cypress/configs/index.ts‎

Lines changed: 51 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,51 @@
1+
import { defineConfig } from 'cypress'
2+
import { configureVisualRegression } from 'cypress-visual-regression/dist/plugin'
3+
// https://github.com/TypeStrong/ts-node/issues/1096
4+
import * as dotenv from 'dotenv'
5+
6+
dotenv.config({ path: '../../.env' })
7+
8+
export default defineConfig({
9+
projectId: 'fm6ypm',
10+
chromeWebSecurity: false,
11+
env: {
12+
language: 'xx',
13+
mobileViewportWidthBreakpoint: 640,
14+
testUser: {
15+
username: process.env.TEST_USER_USERNAME,
16+
password: process.env.TEST_USER_PASSWORD,
17+
},
18+
visualRegressionType: 'regression',
19+
// TODO Change to false after fixing diff between local and ci snapshots
20+
visualRegressionFailSilently: true,
21+
visualRegressionGenerateDiff: 'fail',
22+
visualRegressionBaseDirectory: '../snapshots/base',
23+
visualRegressionDiffDirectory: '../snapshots/diff',
24+
},
25+
component: {
26+
devServer: {
27+
framework: 'vue',
28+
bundler: 'vite',
29+
},
30+
},
31+
e2e: {
32+
baseUrl: 'http://localhost:3000',
33+
viewportHeight: 660,
34+
viewportWidth: 1100,
35+
defaultCommandTimeout: 25000,
36+
experimentalRunAllSpecs: true,
37+
screenshotsFolder: './cypress/snapshots/actual',
38+
setupNodeEvents(on) {
39+
configureVisualRegression(on)
40+
41+
on('before:browser:launch', (browser, launchOptions) => {
42+
if (browser.family === 'chromium' && browser.name !== 'electron') {
43+
launchOptions.args.push('--window-size=1920,1080')
44+
launchOptions.args.push('--force-device-scale-factor=1')
45+
}
46+
47+
return launchOptions
48+
})
49+
},
50+
},
51+
})

‎cypress/configs/mobile.preview.ts‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
import defaultConfig from './index'
2+
import { overrideMobileConfig } from '@@/cypress/configs/common/overrideMobileConfig'
3+
import { overridePreviewConfig } from '@@/cypress/configs/common/overridePreviewConfig'
4+
5+
export default overridePreviewConfig(overrideMobileConfig(defaultConfig))

‎cypress/configs/mobile.ts‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,4 @@
1+
import defaultConfig from './index'
2+
import { overrideMobileConfig } from '@@/cypress/configs/common/overrideMobileConfig'
3+
4+
export default overrideMobileConfig(defaultConfig)

‎cypress/configs/preview.ts‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,4 @@
1+
import defaultConfig from './index'
2+
import { overridePreviewConfig } from '@@/cypress/configs/common/overridePreviewConfig'
3+
4+
export default overridePreviewConfig(defaultConfig)

0 commit comments

Comments
 (0)