Merge pull request #816 from geonetwork/e2e-screenshots

Take screenshots in Cypress tests & upload them on the PR
geonetwork · Mar 20, 2024 · c9f3c31 · c9f3c31
2 parents 463b60b + 31d7091
commit c9f3c31
Show file tree

Hide file tree

Showing 26 changed files with 154 additions and 95 deletions.
diff --git a/.github/workflows/checks.yml b/.github/workflows/checks.yml
@@ -145,6 +145,8 @@ jobs:
   cypress-run:
     name: End-to-end tests
     runs-on: ubuntu-latest
+    outputs:
+      screenshotsUrl: ${{ steps.upload-screenshots.outputs.artifact-url }}
     steps:
       - uses: actions/checkout@v4
 
@@ -167,6 +169,23 @@ jobs:
       - name: Run tests
         run: npx nx run-many --target=e2e
 
+      - uses: actions/upload-artifact@v4
+        if: always()
+        id: upload-screenshots
+        with:
+          name: cypress-screenshots
+          path: |
+            apps/datahub-e2e/cypress/screenshots/**/*
+            apps/metadata-editor-e2e/cypress/screenshots/**/*
+
+      - uses: thollander/actions-comment-pull-request@v2
+        if: always() && github.event_name == 'pull_request' && steps.upload-screenshots.outputs.artifact-url
+        with:
+          message: '📷 Screenshots are [here](${{ steps.upload-screenshots.outputs.artifact-url }})!'
+          comment_tag: screenshots-url
+          pr_number: ${{ github.event.number }}
+          GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
+
   build-npm-package:
     if: github.event_name == 'pull_request' && github.event.pull_request.head.repo.full_name == github.repository && github.actor != 'dependabot[bot]'
     name: Attempt to build the NPM package

diff --git a/apps/datahub-e2e/cypress.config.js b/apps/datahub-e2e/cypress.config.js
@@ -0,0 +1,18 @@
+import { defineConfig } from 'cypress'
+import { nxE2EPreset } from '@nx/cypress/plugins/cypress-preset'
+import { cypressBrowserPermissionsPlugin } from 'cypress-browser-permissions'
+import { fileURLToPath } from 'url'
+import { configureCommonPlugins } from '../../tools/e2e/plugins.js'
+
+export default defineConfig({
+  e2e: {
+    ...nxE2EPreset(fileURLToPath(import.meta.url)),
+    video: false,
+    downloadsFolder: 'cypress/downloads',
+    screenshotsFolder: 'cypress/screenshots',
+    setupNodeEvents(on, config) {
+      cypressBrowserPermissionsPlugin(on, config)
+      configureCommonPlugins(on, config)
+    },
+  },
+})
diff --git a/apps/datahub-e2e/cypress.config.ts b/apps/datahub-e2e/cypress.config.ts
diff --git a/apps/datahub-e2e/package.json b/apps/datahub-e2e/package.json
@@ -0,0 +1,3 @@
+{
+  "type": "module"
+}
diff --git a/apps/datahub-e2e/project.json b/apps/datahub-e2e/project.json
@@ -7,9 +7,10 @@
     "e2e": {
       "executor": "@nx/cypress:cypress",
       "options": {
-        "cypressConfig": "apps/datahub-e2e/cypress.config.ts",
+        "cypressConfig": "apps/datahub-e2e/cypress.config.js",
         "devServerTarget": "datahub:serve:development",
-        "testingType": "e2e"
+        "testingType": "e2e",
+        "browser": "chrome"
       },
       "configurations": {
         "production": {

diff --git a/apps/datahub-e2e/src/e2e/datasetDetailPage.cy.ts b/apps/datahub-e2e/src/e2e/datasetDetailPage.cy.ts
@@ -72,6 +72,7 @@ describe('dataset pages', () => {
         cy.get('datahub-header-record')
           .children('header')
           .find('gn-ui-navigation-button')
+        cy.screenshot({ capture: 'fullPage' })
       })
       it('should display the data type, last update and status', () => {
         cy.visit('/dataset/01491630-78ce-49f3-b479-4b30dabc4c69')
@@ -201,6 +202,7 @@ describe('dataset pages', () => {
           .find('gn-ui-button')
           .click()
         cy.get('.basicLightbox--visible')
+        cy.screenshot({ capture: 'viewport' })
       })
     })
 
@@ -217,6 +219,7 @@ describe('dataset pages', () => {
         cy.get('gn-ui-metadata-quality gn-ui-progress-bar')
           .eq(0)
           .should('have.attr', 'ng-reflect-value', 75)
+        cy.screenshot({ capture: 'fullPage' })
       })
     })
   })
@@ -258,6 +261,7 @@ describe('dataset pages', () => {
           .find('tbody')
           .children('tr')
           .should('have.length.gt', 0)
+        cy.screenshot({ capture: 'fullPage' })
       })
       it('should display the chart & dropdowns', () => {
         cy.get('@previewSection')
@@ -280,6 +284,7 @@ describe('dataset pages', () => {
             .find('button')
             .should('have.length.greaterThan', 0)
         })
+        cy.screenshot({ capture: 'fullPage' })
       })
     })
     describe('features', () => {
@@ -386,6 +391,7 @@ describe('dataset pages', () => {
                 expect(formatOutput).to.eq(filterFormat)
               })
           })
+          cy.screenshot({ capture: 'fullPage' })
         })
         it('downloads a file on click', () => {
           cy.get('datahub-record-downloads')
@@ -509,6 +515,7 @@ describe('record with file distributions', () => {
       .children('button')
       .then((options) => options.toArray().map((el) => el.innerText.trim()))
       .should('deep.eq', ['csv (csv)', 'json (json)', 'geojson (geojson)'])
+    cy.screenshot({ capture: 'viewport' })
   })
 })
 
@@ -527,6 +534,7 @@ describe('api cards', () => {
   it('should open and close the panel on click on open panel button', () => {
     cy.get('@firstCard').click()
     cy.get('gn-ui-record-api-form').should('be.visible')
+    cy.screenshot({ capture: 'fullPage' })
     cy.get('@firstCard').click()
     cy.get('gn-ui-record-api-form').should('not.be.visible')
   })

diff --git a/apps/datahub-e2e/src/e2e/datasets.cy.ts b/apps/datahub-e2e/src/e2e/datasets.cy.ts
@@ -41,6 +41,7 @@ describe('datasets', () => {
         .find('[data-cy=filters-expand]')
         .filter(':visible')
         .should('have.length', 1)
+      cy.screenshot({ capture: 'viewport' })
     })
     it('should sort by relevance initially', () => {
       cy.get('@sortBy')
@@ -109,6 +110,7 @@ describe('datasets', () => {
           .find('a')
           .invoke('attr', 'href')
           .should('include', 'catalog.signin')
+        cy.screenshot({ capture: 'viewport' })
       })
     })
     describe('when logged in', () => {
@@ -125,6 +127,7 @@ describe('datasets', () => {
           .then((text) => {
             cy.get('@initialCount').should('not.eq', text)
           })
+        cy.screenshot({ capture: 'viewport' })
       })
     })
   })
@@ -190,6 +193,7 @@ describe('datasets', () => {
           'resourceType',
           'representationType',
         ])
+      cy.screenshot({ capture: 'viewport' })
     })
 
     describe('publisher filter', () => {
@@ -294,6 +298,7 @@ describe('datasets', () => {
           'Service public de Wallonie (SPW) (2)',
           "Société Publique de Gestion de l'Eau (SPGE) (1)",
         ])
+        cy.screenshot({ capture: 'viewport' })
       })
     })
 
@@ -480,6 +485,7 @@ describe('datasets', () => {
             'eql',
             'Cartographie des sols agricoles de la plaine du Rhône'
           )
+        cy.screenshot({ capture: 'viewport' })
       })
     })
   })
@@ -560,6 +566,7 @@ describe('datasets', () => {
         cy.get('gn-ui-progress-bar')
           .eq(0)
           .should('have.attr', 'ng-reflect-value', 100)
+        cy.screenshot({ capture: 'viewport' })
       })
     })
   })

diff --git a/apps/datahub-e2e/src/e2e/header.cy.ts b/apps/datahub-e2e/src/e2e/header.cy.ts
@@ -63,6 +63,7 @@ describe('header', () => {
         .find('a')
         .first()
         .should('have.attr', 'title', 'Accroches vélos MEL')
+      cy.screenshot({ capture: 'viewport' })
     })
     it('should display the search results on enter touch', () => {
       cy.get('gn-ui-fuzzy-search').type('velo{enter}')
@@ -138,6 +139,7 @@ describe('header', () => {
         .getActiveDropdownOption()
         .invoke('attr', 'data-cy-value')
         .should('equal', 'desc,createDate')
+      cy.screenshot({ capture: 'viewport' })
     })
     it('should filter results by popularity', () => {
       cy.get('gn-ui-fuzzy-search').next().find('button').eq(1).click()

diff --git a/apps/datahub-e2e/src/e2e/home.cy.ts b/apps/datahub-e2e/src/e2e/home.cy.ts
@@ -20,6 +20,10 @@ describe('home', () => {
     })
     it('should display the "show more" button', () => {
       cy.get('[data-cy="addMoreBtn"]').should('be.visible')
+      cy.get('body').then((body$) => {
+        cy.viewport(body$.width(), body$.height())
+        cy.screenshot({ capture: 'viewport' })
+      })
     })
     it('should display the orga and dataset link buttons', () => {
       cy.get('gn-ui-figure').should('have.length', 2)
@@ -108,6 +112,7 @@ describe('home', () => {
         .then(function (resultTitle) {
           expect(resultTitle).to.eql(this.favoriteTitle)
         })
+      cy.screenshot({ capture: 'viewport' })
     })
   })
 })
diff --git a/apps/datahub-e2e/src/e2e/organizations.cy.ts b/apps/datahub-e2e/src/e2e/organizations.cy.ts
@@ -48,6 +48,7 @@ describe('organizations', () => {
       cy.get('@organizationsRecordsCount')
         .its('text')
         .should('have.length.above', 0)
+      cy.screenshot({ capture: 'viewport' })
     })
     it('should display organization information', () => {
       cy.get('@organizationsName')
@@ -182,6 +183,7 @@ describe('organizations', () => {
         .eq(0)
         .invoke('text')
         .should('contain', 'Géo2France')
+      cy.screenshot({ capture: 'viewport' })
     })
   })
 })
diff --git a/apps/datahub-e2e/src/plugins/index.js b/apps/datahub-e2e/src/plugins/index.js
diff --git a/apps/datahub-e2e/src/support/e2e.ts b/apps/datahub-e2e/src/support/e2e.ts
@@ -13,11 +13,11 @@
 // https://on.cypress.io/configuration
 // ***********************************************************
 
-// Import commands.js using ES2015 syntax:
 import './commands'
+import { VIEWPORT_SIZE } from '../../../../tools/e2e/settings.js'
 
 beforeEach(() => {
-  cy.viewport(1900, 1400)
+  cy.viewport(VIEWPORT_SIZE[0], VIEWPORT_SIZE[1])
 
   // all tests should show english translations
   window.localStorage.setItem('geonetwork-ui-language', 'en')

diff --git a/apps/datahub-e2e/tsconfig.json b/apps/datahub-e2e/tsconfig.json
@@ -3,8 +3,8 @@
   "compilerOptions": {
     "sourceMap": false,
     "outDir": "../../dist/out-tsc",
-    "allowJs": true,
+    "allowJs": false,
     "types": ["cypress", "node"]
   },
-  "include": ["src/**/*.ts", "src/**/*.js", "cypress.config.ts"]
+  "include": ["src/**/*.ts"]
 }
diff --git a/apps/metadata-editor-e2e/cypress.config.js b/apps/metadata-editor-e2e/cypress.config.js
@@ -0,0 +1,18 @@
+import { defineConfig } from 'cypress'
+import { nxE2EPreset } from '@nx/cypress/plugins/cypress-preset'
+import { configureCommonPlugins } from '../../tools/e2e/plugins'
+import { cypressBrowserPermissionsPlugin } from 'cypress-browser-permissions'
+import { fileURLToPath } from 'url'
+
+export default defineConfig({
+  e2e: {
+    ...nxE2EPreset(fileURLToPath(import.meta.url)),
+    video: false,
+    downloadsFolder: 'cypress/downloads',
+    screenshotsFolder: 'cypress/screenshots',
+    setupNodeEvents(on, config) {
+      cypressBrowserPermissionsPlugin(on, config)
+      configureCommonPlugins(on, config)
+    },
+  },
+})
diff --git a/apps/metadata-editor-e2e/cypress.config.ts b/apps/metadata-editor-e2e/cypress.config.ts
diff --git a/apps/metadata-editor-e2e/package.json b/apps/metadata-editor-e2e/package.json
@@ -0,0 +1,3 @@
+{
+  "type": "module"
+}
diff --git a/apps/metadata-editor-e2e/project.json b/apps/metadata-editor-e2e/project.json
@@ -7,9 +7,10 @@
     "e2e": {
       "executor": "@nx/cypress:cypress",
       "options": {
-        "cypressConfig": "apps/metadata-editor-e2e/cypress.config.ts",
+        "cypressConfig": "apps/metadata-editor-e2e/cypress.config.js",
         "devServerTarget": "metadata-editor:serve:development",
-        "testingType": "e2e"
+        "testingType": "e2e",
+        "browser": "chrome"
       },
       "configurations": {
         "production": {

diff --git a/apps/metadata-editor-e2e/src/plugins/index.js b/apps/metadata-editor-e2e/src/plugins/index.js
diff --git a/apps/metadata-editor-e2e/src/support/e2e.ts b/apps/metadata-editor-e2e/src/support/e2e.ts
@@ -15,3 +15,11 @@
 
 // Import commands.js using ES2015 syntax:
 import './commands'
+import { VIEWPORT_SIZE } from '../../../../tools/e2e/settings'
+
+beforeEach(() => {
+  cy.viewport(VIEWPORT_SIZE[0], VIEWPORT_SIZE[1])
+
+  // all tests should show english translations
+  window.localStorage.setItem('geonetwork-ui-language', 'en')
+})
diff --git a/apps/metadata-editor-e2e/tsconfig.json b/apps/metadata-editor-e2e/tsconfig.json
@@ -3,8 +3,7 @@
   "compilerOptions": {
     "sourceMap": false,
     "outDir": "../../dist/out-tsc",
-    "allowJs": true,
     "types": ["cypress", "node"]
   },
-  "include": ["src/**/*.ts", "src/**/*.js", "cypress.config.ts"]
+  "include": ["src/**/*.ts"]
 }