diff --git a/webapp/e2e/features/jugar-form.feature b/webapp/e2e/features/jugar-form.feature
new file mode 100644
index 0000000..f0d5a13
--- /dev/null
+++ b/webapp/e2e/features/jugar-form.feature
@@ -0,0 +1,7 @@
+Feature: Game Initialization
+
+  Scenario: User Initiates a Game
+    Given a registered user exists
+    When the user enters their details on the login form and submits
+    And the user clicks the "Play" button on the homepage
+    Then the questions should be displayed
\ No newline at end of file
diff --git a/webapp/e2e/steps/jugar-form.steps.js b/webapp/e2e/steps/jugar-form.steps.js
new file mode 100644
index 0000000..cf489cd
--- /dev/null
+++ b/webapp/e2e/steps/jugar-form.steps.js
@@ -0,0 +1,65 @@
+const puppeteer = require('puppeteer');
+const { defineFeature, loadFeature } = require('jest-cucumber');
+const setDefaultOptions = require('expect-puppeteer').setDefaultOptions;
+const feature = loadFeature('./features/jugar-form.feature');
+
+let page;
+let browser;
+
+defineFeature(feature, (test) => {
+    let username;
+    let password;
+
+    beforeAll(async () => {
+        browser = process.env.GITHUB_ACTIONS
+            ? await puppeteer.launch()
+            : await puppeteer.launch({ headless: false, slowMo: 100 });
+        page = await browser.newPage();
+        setDefaultOptions({ timeout: 10000 });
+
+        await page.goto("http://localhost:3000/login", {
+            waitUntil: "networkidle0",
+        }).catch(() => {});
+    }, 60000);
+
+    test('User Initiates a Game', ({ given, when, then }) => {
+
+        given('a registered user exists', async () => {
+            username = "zohaib"
+            password = "zohaib"
+        });
+
+        when('the user enters their details on the login form and submits', async () => {
+            await expect(page).toFill('input[name="username"]', username);
+            await expect(page).toFill('input[name="password"]', password);
+            await expect(page).toClick('button', { text: 'Entrar' })
+        });
+
+        when('the user clicks the "Play" button on the homepage', async () => {
+            await expect(page).toClick('button', { text: 'JUGAR' })
+        });
+
+        then('the questions should be displayed', async () => {
+            await expect(page).toMatchElement('.quiz-header');
+
+            // Recuperar y verificar el texto de la pregunta actual
+            const questionText = await page.$eval('.quiz-header h2', el => el.textContent);
+            expect(questionText).toBeTruthy();
+
+            // Opcionalmente, puedes verificar el número de la pregunta actual vs. el total
+            const questionIndicatorText = await page.$eval('.quiz-header div', el => el.textContent);
+            expect(questionIndicatorText).toMatch(/Pregunta \d+ de \d+/);
+
+            // Verificar que las opciones de respuesta se muestran
+            const answersCount = await page.$$eval('.answers-list li', answers => answers.length);
+            expect(answersCount).toBe(4);
+
+        });
+
+    });
+
+    afterAll(async () => {
+        await browser.close();
+    });
+
+});
diff --git a/webapp/e2e/test-environment-setup.js b/webapp/e2e/test-environment-setup.js
index 7b7ed51..392dbc2 100644
--- a/webapp/e2e/test-environment-setup.js
+++ b/webapp/e2e/test-environment-setup.js
@@ -5,7 +5,7 @@ let mongoserver;
 let userservice;
 let authservice;
 let gatewayservice;
-
+let questionservice;
 async function startServer() {
     console.log('Starting MongoDB memory server...');
     mongoserver = await MongoMemoryServer.create();
@@ -14,6 +14,7 @@ async function startServer() {
     userservice = await require("../../users/userservice/user-service");
     authservice = await require("../../users/authservice/auth-service");
     gatewayservice = await require("../../gatewayservice/gateway-service");
+    questionservice = await requiree("../../questionservice/question-service");
   }
 
   startServer();
diff --git a/webapp/src/components/pages/Login.js b/webapp/src/components/pages/Login.js
index 72fdbc3..eb3faf1 100644
--- a/webapp/src/components/pages/Login.js
+++ b/webapp/src/components/pages/Login.js
@@ -42,6 +42,7 @@ const Login = () => {
             Entrar
           </Typography>
           <TextField
+              name ="username"
               margin="normal"
               fullWidth
               label="Nombre de Usuario"
@@ -49,6 +50,7 @@ const Login = () => {
               onChange={(e) => setUsername(e.target.value)}
           />
           <TextField
+              name = "password"
               margin="normal"
               fullWidth
               label="Contraseña"