diff --git a/cypress/e2e/users_spec/user_homepage.cy.ts b/cypress/e2e/users_spec/user_homepage.cy.ts
new file mode 100644
index 00000000000..02d34ddda90
--- /dev/null
+++ b/cypress/e2e/users_spec/user_homepage.cy.ts
@@ -0,0 +1,39 @@
+///
+
+import { cy, describe, before, beforeEach, it, afterEach } from "local-cypress";
+import LoginPage from "../../pageobject/Login/LoginPage";
+import { UserPage } from "../../pageobject/Users/usersearch";
+
+describe("Asset Tab", () => {
+ const userPage = new UserPage();
+ const usernameToTest = "devdoctor";
+ const currentuser = "devdistrictadmin";
+ const loginPage = new LoginPage();
+ before(() => {
+ loginPage.loginAsDisctrictAdmin();
+ cy.saveLocalStorage();
+ });
+
+ beforeEach(() => {
+ cy.restoreLocalStorage();
+ cy.awaitUrl("/users");
+ });
+
+ it("Search by username", () => {
+ userPage.checkSearchInputVisibility();
+ userPage.typeInSearchInput(usernameToTest);
+ userPage.checkUrlForUsername(usernameToTest);
+ userPage.checkUsernameText(usernameToTest);
+ userPage.checkUsernameBadgeVisibility(true);
+ userPage.clearSearchInput();
+ userPage.checkUsernameBadgeVisibility(false);
+ userPage.typeInSearchInput(usernameToTest);
+ userPage.checkUsernameText(usernameToTest);
+ userPage.clickRemoveIcon();
+ userPage.checkUsernameBadgeVisibility(false);
+ userPage.checkUsernameText(currentuser);
+ });
+ afterEach(() => {
+ cy.saveLocalStorage();
+ });
+});
diff --git a/cypress/pageobject/Users/UserSearch.ts b/cypress/pageobject/Users/UserSearch.ts
new file mode 100644
index 00000000000..311a4b87c3a
--- /dev/null
+++ b/cypress/pageobject/Users/UserSearch.ts
@@ -0,0 +1,37 @@
+// UserPage.ts
+export class UserPage {
+ // Element selectors
+ searchByUsernameInput = "#search-by-username";
+ usernameText = "#username";
+ usernameBadge = "[data-testid='Username']";
+ removeIcon = "#removeicon";
+
+ checkSearchInputVisibility() {
+ cy.get(this.searchByUsernameInput).should("be.visible");
+ }
+
+ typeInSearchInput(text: string) {
+ cy.get(this.searchByUsernameInput).click().type(text);
+ }
+
+ clearSearchInput() {
+ cy.get(this.searchByUsernameInput).click().clear();
+ }
+
+ checkUrlForUsername(username: string) {
+ cy.url().should("include", `username=${username}`);
+ }
+
+ checkUsernameText(username: string) {
+ cy.get(this.usernameText).should("have.text", username);
+ }
+
+ checkUsernameBadgeVisibility(shouldBeVisible: boolean) {
+ const assertion = shouldBeVisible ? "be.visible" : "not.be.visible";
+ cy.get(this.usernameBadge).should(assertion);
+ }
+
+ clickRemoveIcon() {
+ cy.get(this.removeIcon).click();
+ }
+}
diff --git a/src/CAREUI/display/FilterBadge.tsx b/src/CAREUI/display/FilterBadge.tsx
index c0f691f48b9..2443130981a 100644
--- a/src/CAREUI/display/FilterBadge.tsx
+++ b/src/CAREUI/display/FilterBadge.tsx
@@ -18,6 +18,7 @@ const FilterBadge = ({ name, value, onRemove }: FilterBadgeProps) => {
>
{`${name}: ${value}`}
diff --git a/src/Components/Users/ManageUsers.tsx b/src/Components/Users/ManageUsers.tsx
index 8625d442f52..150c102aff1 100644
--- a/src/Components/Users/ManageUsers.tsx
+++ b/src/Components/Users/ManageUsers.tsx
@@ -543,6 +543,7 @@ export default function ManageUsers() {
updateQuery({ [e.name]: e.value })}
value={qParams.username}