Merge pull request #2498 from nextcloud/skjnldsv/stable28-cypress-sna…

…pshot-update

cypress.config.ts

@@ -1,9 +1,8 @@
-import { configureNextcloud, startNextcloud, stopNextcloud, waitOnNextcloud } from './cypress/dockerNode'
+import { configureNextcloud, startNextcloud, stopNextcloud, waitOnNextcloud } from '@nextcloud/cypress/docker'
+import { configureVisualRegression } from 'cypress-visual-regression/dist/plugin'
 import { defineConfig } from 'cypress'
 import cypressSplit from 'cypress-split'
 
-import getCompareSnapshotsPlugin from 'cypress-visual-regression/dist/plugin'
-
 export default defineConfig({
 	projectId: 'xysa6x',
 
@@ -27,7 +26,7 @@ export default defineConfig({
 	// Visual regression testing
 	env: {
 		failSilently: false,
-		type: 'actual',
+		visualRegressionType: 'regression',
 	},
 	screenshotsFolder: 'cypress/snapshots/actual',
 	trashAssetsBeforeRuns: true,
@@ -40,8 +39,7 @@ export default defineConfig({
 		// You may want to clean this up later by importing these.
 		async setupNodeEvents(on, config) {
 			cypressSplit(on, config)
-
-			getCompareSnapshotsPlugin(on, config)
+			configureVisualRegression(on)
 
 			// Disable spell checking to prevent rendering differences
 			on('before:browser:launch', (browser, launchOptions) => {

cypress/e2e/visual-regression.cy.ts

@@ -20,7 +20,7 @@
  *
  */
 
-describe('Visual regression tests ', function() {
+describe('Visual regression tests', function() {
 	let randUser
 
 	before(function() {
@@ -36,18 +36,31 @@ describe('Visual regression tests ', function() {
 			cy.login(user)
 			cy.visit('/apps/files')
 		})
+
+		cy.window().then((win) => {
+			// Load roboto font for visual regression consistency
+			win.loadRoboto = true
+			win.document.body.style.setProperty('--font-face', 'Roboto')
+			win.document.body.style.setProperty('font-family', 'Roboto')
+		})
 	})
 
 	it('See files in the list', function() {
-		// TODO: Do we care about the file name being split by a ' ' in the text property?
 		cy.getFile('test-card.mp4', { timeout: 10000 })
 			.should('contain', 'test-card .mp4')
 		cy.getFile('test-card.png', { timeout: 10000 })
 			.should('contain', 'test-card .png')
 	})
 
 	it('Open the viewer on file click', function() {
+		cy.intercept('GET', '**/viewer/css/fonts/roboto-*').as('roboto-font')
+		cy.intercept('GET', '**/core/preview*').as('image1')
+		cy.intercept('GET', '/remote.php/dav/files/*/test-card.mp4').as('video')
 		cy.openFile('test-card.mp4')
+		cy.wait('@roboto-font')
+		cy.wait('@video')
+		// We preload images, so we can check its loading here and not when clicking next
+		cy.wait('@image1')
 		cy.get('body > .viewer').should('be.visible')
 	})
 
@@ -73,7 +86,7 @@ describe('Visual regression tests ', function() {
 			.and('not.have.class', 'icon-loading')
 	})
 
-	it('Take test-card.mp4 screenshot', function() {
+	it('Take test-card.mp4 screenshot', { retries: 0 }, function() {
 		cy.get('body > .viewer .modal-container .viewer__file.viewer__file--active video').then(video => {
 			video.get(0).pause()
 			video.get(0).currentTime = 1
@@ -99,14 +112,17 @@ describe('Visual regression tests ', function() {
 			.and('not.have.class', 'icon-loading')
 	})
 
-	it('Take test-card.png screenshot', function() {
+	it('Take test-card.png screenshot', { retries: 0 }, function() {
 		cy.compareSnapshot('image')
 	})
 
 	it('Close and open image again', function() {
 		cy.get('body > .viewer button.header-close').click()
 		cy.get('body > .viewer').should('not.exist')
+
+		// No need to intercept the request again, it's cached
 		cy.openFile('test-card.png')
+
 		cy.get('body > .viewer').should('be.visible')
 		cy.get('body > .viewer .modal-name').should('contain', 'test-card.png')
 		cy.get('body > .viewer .modal-container img').should('have.length', 1)
@@ -122,7 +138,7 @@ describe('Visual regression tests ', function() {
 			.and('not.have.class', 'icon-loading')
 	})
 
-	it('Take test-card.png screenshot 2', function() {
+	it('Take test-card.png screenshot 2', { retries: 0 }, function() {
 		cy.compareSnapshot('image2')
 	})
 
@@ -136,13 +152,14 @@ describe('Visual regression tests ', function() {
 			hasPreview: false,
 			fileid: 123,
 		}
-
+		cy.intercept('GET', '/core/img/favicon.png').as('favicon')
 		cy.window().then((win) => {
 			win.OCA.Viewer.open({
 				fileInfo,
 				list: [fileInfo],
 			})
 		})
+		cy.wait('@favicon')
 
 		cy.get('body > .viewer .modal-container img').should('have.length', 1)
 		cy.get('body > .viewer .modal-container img').should('have.attr', 'src')
@@ -157,7 +174,7 @@ describe('Visual regression tests ', function() {
 			.and('not.have.class', 'icon-loading')
 	})
 
-	it('Take non-dav logo.png screenshot', function() {
+	it('Take non-dav logo.png screenshot', { retries: 0 }, function() {
 		cy.compareSnapshot('non-dav')
 	})
 })

cypress/support/commands.ts

@@ -20,13 +20,13 @@
  *
  */
 
-import { addCommands, User } from '@nextcloud/cypress'
+import { addCommands } from '@nextcloud/cypress'
+import { addCompareSnapshotCommand } from 'cypress-visual-regression/dist/command'
 import { basename } from 'path'
 import axios from '@nextcloud/axios'
-import compareSnapshotCommand from 'cypress-visual-regression/dist/command.js'
 
 addCommands()
-compareSnapshotCommand()
+addCompareSnapshotCommand()
 
 const url = Cypress.config('baseUrl').replace(/\/index.php\/?$/g, '')
 Cypress.env('baseUrl', url)