fix e2e puppeter tests

webapp/e2e/steps/register-form.steps.js

@@ -31,17 +31,21 @@ defineFeature(feature, test => {
     given('An unregistered user', async () => {
       username = "pablo"
       password = "pabloasw"
-      await expect(page).toClick("button", { text: "Don't have an account? Register here." });
+      await page.waitFor('button')
+      await page.click("button", {id: "registerButton"});
     });
 
     when('I fill the data in the form and press submit', async () => {
-      await expect(page).toFill('input[name="username"]', username);
-      await expect(page).toFill('input[name="password"]', password);
-      await expect(page).toClick('button', { text: 'Add User' })
+      await page.type('input[name="username"]', username);
+      await page.type('input[name="password"]', password);
+      await page.click('button', { text: 'Add User' })
     });
 
-    then('A confirmation message should be shown in the screen', async () => {
-        await expect(page).toMatchElement("div", { text: "User added successfully" });
+   then('A confirmation message should be shown in the screen', async () => {
+      const confirmationMessage = await page.waitForSelector('div',"#successUserAdd");
+
+      const messageText = await page.evaluate(confirmationMessage => confirmationMessage.innerText, confirmationMessage);
+      expect(messageText).toContain('User added successfully');
     });
   })
 

webapp/package.json

@@ -24,7 +24,8 @@
     "prod": "serve -s build",
     "test": "react-scripts test --transformIgnorePatterns 'node_modules/(?!axios)/'",
     "test:e2e": "start-server-and-test 'node e2e/test-environment-setup.js' http://localhost:8000/health prod 3000 \"cd e2e && jest\"",
-    "eject": "react-scripts eject"
+    "eject": "react-scripts eject",
+    "test-only:e2e":"cd e2e && jest"
   },
   "eslintConfig": {
     "extends": [

webapp/src/components/AddUser.tsx

@@ -59,7 +59,7 @@ const AddUser = (props:ActionProps) => {
       <button color="primary" onClick={props.goBack}>
         {t('go_back')}
       </button>
-      <Snackbar open={openSnackbar} autoHideDuration={6000} onClose={handleCloseSnackbar} message="User added successfully" />
+      <Snackbar open={openSnackbar} autoHideDuration={6000} onClose={handleCloseSnackbar} message="User added successfully" id='successUserAdd'/>
       {error && (
         <Snackbar open={!!error} autoHideDuration={6000} onClose={() => setError('')} message={`Error: ${error}`} />
       )}

webapp/src/components/Init.tsx

@@ -9,11 +9,11 @@ const Init = (props:ActionProps) =>{
   const { t } = useTranslation()
     return (
         <div>
-          <button className={'app-button'}  
+          <button className={'app-button'} id='registerButton'
           onClick={() => props.changeView(false)}>
             {t('register')}
           </button>
-          <button className={'app-button'} 
+          <button className={'app-button'} id='loginButton'
           onClick={() => props.changeView(true)}>
             {t('login')}
           </button>

webapp/src/index.tsx

@@ -1,7 +1,7 @@
 import React from 'react';
 import ReactDOM from 'react-dom/client';
 import './index.css';
-import App from './App';
+import App from './App'
 import reportWebVitals from './reportWebVitals';
 
 const root = ReactDOM.createRoot(document.getElementById('root') as HTMLElement);

webapp/tsconfig.json

@@ -37,7 +37,7 @@
       "noUnusedLocals": true,
       "noUnusedParameters": true
     },
-    "include": ["./**/*.tsx"],
+    "include": ["./**/*.tsx", "src/index.tsx"],
     "exclude": [
       "node_modules/**/*"
     ]