Fix E2E test

.gitignore

@@ -64,3 +64,6 @@ npm-debug.log*
 /supervisord.pid
 log
 mxcube3/static
+
+# Cypress debug screenshots
+/cypress/debug/

ui/.eslintrc.js

@@ -50,5 +50,11 @@ module.exports = createConfig({
         'jest/require-top-level-describe': 'off', // filename should already be meaningful, extra nesting is unnecessary
       },
     }),
+    {
+      files: ['**/*.cy.js'],
+      rules: {
+        'sonarjs/no-duplicate-string': 'off', // incompatible with Cypress testing syntax
+      },
+    },
   ],
 });

ui/cypress.config.js

@@ -2,8 +2,10 @@ const { defineConfig } = require('cypress');
 
 module.exports = defineConfig({
   e2e: {
-    setupNodeEvents(on, config) {
-      // implement node event listeners here
-    },
+    baseUrl: 'http://localhost:8081',
+    supportFile: 'cypress/support.js',
   },
+  screenshotsFolder: 'cypress/debug',
+  fixturesFolder: false,
+  video: false,
 });

ui/cypress/e2e/app.cy.js

@@ -1,8 +1,11 @@
 describe('app', () => {
+  beforeEach(() => {
+    cy.visit('/');
+  });
+
   it('loads the login page', () => {
-    cy.visit('http://localhost:8081');
-    cy.get('input[placeholder*="LoginID"]').should('be.visible');
-    cy.get('input[placeholder*="Password"]').should('be.visible');
-    cy.get('button[type=submit]').should('be.visible');
+    cy.findByRole('textbox', { label: 'Login ID' }).should('be.visible');
+    cy.findByRole('textbox', { label: 'Password' }).should('be.visible');
+    cy.findByRole('button', { label: 'Sign in' }).should('be.visible');
   });
 });

ui/cypress/support.js

@@ -0,0 +1 @@
+import '@testing-library/cypress/add-commands';

ui/package.json

@@ -6,8 +6,10 @@
     "start": "GENERATE_SOURCEMAP=false react-scripts start",
     "build": "react-scripts build",
     "test": "react-scripts test",
+    "e2e": "cypress run",
     "format": "npm run prettier -- --write",
     "fix": "npm run eslint -- --fix",
+    "cypress": "cypress open --e2e --browser firefox",
     "prettier": "prettier . --cache --check",
     "eslint": "eslint \"**/*.{js,jsx}\""
   },