diff --git a/webapp/e2e/features/users-addfriend.feature b/webapp/e2e/features/users-addfriend.feature
new file mode 100644
index 00000000..e5524cea
--- /dev/null
+++ b/webapp/e2e/features/users-addfriend.feature
@@ -0,0 +1,6 @@
+Feature: Adding a new friend
+
+Scenario: The user can add a friend
+  Given A logged-in user
+  When I click on the Users link and add a friend
+  Then The user should disappear from the Users page
\ No newline at end of file
diff --git a/webapp/e2e/steps/users-addfriend.steps.js b/webapp/e2e/steps/users-addfriend.steps.js
new file mode 100644
index 00000000..40464ba2
--- /dev/null
+++ b/webapp/e2e/steps/users-addfriend.steps.js
@@ -0,0 +1,65 @@
+const puppeteer = require("puppeteer");
+const { defineFeature, loadFeature } = require("jest-cucumber");
+const setDefaultOptions = require("expect-puppeteer").setDefaultOptions;
+const { expect } = require("expect-puppeteer");
+const feature = loadFeature("./features/register-form.feature");
+
+let page;
+let browser;
+
+defineFeature(feature, (test) => {
+  beforeAll(async () => {
+    browser = process.env.GITHUB_ACTIONS
+      ? await puppeteer.launch()
+      : await puppeteer.launch({ headless: false, slowMo: 100 });
+    page = await browser.newPage();
+    //Way of setting up the timeout
+    setDefaultOptions({ timeout: 10000 });
+
+    await page
+      .goto("http://localhost:3000", {
+        waitUntil: "networkidle0",
+      })
+      .catch(() => {});
+  });
+
+  test("The user can add a friend", ({ given, when, then }) => {
+    let username;
+    let password;
+
+    given("A logged-in user", async () => {
+      username="testuser";
+      password="Testpassword1";
+      await page.waitForSelector("#login-username");
+      await page.type("#login-username", username);
+      await page.waitForSelector("#login-password");
+      await page.type("#login-password", password);
+      await page.click("button", { text: "Login" });
+      await page.waitForNavigation({ waitUntil: "networkidle0" });
+    });
+
+    when("I click on the Users link and add a friend", async () => {
+      await page.waitForSelector('[data-testid="users"]');
+      await page.click('[data-testid="users"]');
+      await page.waitForNavigation({ waitUntil: "networkidle0" });
+    });
+
+    then("The user should disappear from the Users page", async () => {
+      const url = page.url();
+      expect(url).toContain("/social/");
+      
+      const numUsersBefore = await page.$$eval('tr', (rows) => rows.length);
+
+      await page.click('[data-testid="add-friend-button-0"]');
+      await page.waitForTimeout(1000);
+
+      const numUsersAfter = await page.$$eval('tr', (rows) => rows.length);
+
+      expect(numUsersAfter).toBeLessThan(numUsersBefore);
+    });
+  });
+
+  afterAll(async () => {
+    browser.close();
+  });
+});
diff --git a/webapp/src/pages/Social/UsersPage.js b/webapp/src/pages/Social/UsersPage.js
index 9c8b573d..bde2d5c1 100644
--- a/webapp/src/pages/Social/UsersPage.js
+++ b/webapp/src/pages/Social/UsersPage.js
@@ -30,8 +30,8 @@ const UserList = ({ users, handleAddFriend }) => {
           </Tr>
         </Thead>
         <Tbody>
-          {users.map((user) => (
-            <Tr key={user._id}>
+          {users.map((user, index) => (
+            <Tr key={index} data-testid={`user-row-${index}`}> 
               <Td>
                 <Flex flexDirection="column" alignItems="center">
                   <Avatar name={user.username} />
@@ -42,7 +42,7 @@ const UserList = ({ users, handleAddFriend }) => {
                 {user.isFriend ? (
                   <span>{t("pages.userspage.friend")}</span>
                 ) : (
-                  <Button onClick={() => handleAddFriend(user)}>
+                  <Button data-testid={`add-friend-button-${index}`} onClick={() => handleAddFriend(user)}>
                     {t("pages.userspage.addFriend")}
                   </Button>
                 )}