Use Cypress Testing Library syntax

ui/.eslintrc.js

@@ -50,5 +50,15 @@ module.exports = createConfig({
         'jest/require-top-level-describe': 'off', // filename should already be meaningful, extra nesting is unnecessary
       },
     }),
+    {
+      files: ['cypress/**/*.js'],
+      rules: {
+        'testing-library/await-async-query': 'off', // Cypress has its own way of dealing with asynchronicity
+        'testing-library/await-async-utils': 'off', // Cypress has its own way of dealing with asynchronicity
+        'testing-library/prefer-screen-queries': 'off', // Cypress provides `cy` object instead of `screen`
+        'sonarjs/no-duplicate-string': 'off', // incompatible with Cypress testing syntax
+        'unicorn/numeric-separators-style': 'off', // not supported
+      },
+    },
   ],
 });

ui/.gitignore

@@ -7,6 +7,7 @@
 
 # testing
 /coverage
+/cypress/debug
 
 # production
 /build

ui/cypress.config.js

@@ -2,8 +2,8 @@ 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',
   },
 });

ui/cypress/e2e/app.cy.js

@@ -1,36 +1,22 @@
-Cypress.Commands.add('login', (username, password) => {
-  cy.visit('http://localhost:8081');
-  cy.get('input[placeholder*="Login ID"]').type('idtest0');
-  cy.get('input[placeholder*="Password"]').type('0000');
-  cy.get('button[type=submit]').click();
-  cy.get('[class=navbar-brand]').contains('MXCuBE');
-});
-
 describe('login', () => {
-  it('cant login with invalid credentials', () => {
-    cy.visit('http://localhost:8081');
-    cy.get('input[placeholder*="Login ID"]').type('idte0');
-    cy.get('input[placeholder*="Password"]').type('0000');
-    cy.get('button[type=submit]').click();
-    cy.get('pre*[class^="Login_error"]').should('be.visible');
+  it("can't login with invalid credentials", () => {
+    cy.login('idte0', '0000');
+    cy.findByText('Could not authenticate').should('be.visible');
   });
 
   it('can login with valid credentials', () => {
-    cy.visit('http://localhost:8081');
-    cy.get('input[placeholder*="Login ID"]').type('idtest0');
-    cy.get('input[placeholder*="Password"]').type('0000');
-    cy.get('button[type=submit]').click();
-    cy.get('[class=navbar-brand]').contains('MXCuBE');
+    cy.login();
+    cy.findByRole('link', { name: 'MXCuBE-Web (OSC)' }).should('be.visible');
   });
 });
 
 describe('app', () => {
   beforeEach(() => {
     cy.login();
+    cy.findByRole('link', { name: 'MXCuBE-Web (OSC)' }).should('be.visible');
   });
 
   it('displays collection page', () => {
-    cy.visit('http://localhost:8081');
-    cy.get('[class=navbar-brand]').contains('MXCuBE');
+    cy.findByRole('button', { name: /Beamline Actions/u }).should('be.visible');
   });
 });

ui/cypress/support.js

@@ -0,0 +1,9 @@
+import '@testing-library/cypress/add-commands';
+
+Cypress.Commands.add('login', (username = 'idtest0', password = '0000') => {
+  cy.visit('/');
+  cy.findByRole('heading', { name: 'MXCuBE' }).should('be.visible');
+  cy.findByLabelText('Login ID').type(username);
+  cy.findByLabelText('Password').type(password);
+  cy.findByRole('button', { name: 'Sign in' }).click();
+});