add some locators

src/app/communities/CommunityItem.tsx

@@ -20,7 +20,7 @@ export const CommunityItem = ({
   description,
   numberOfMembers,
 }: CommunityItemProps) => (
-  <div className="rounded-[8px] bg-input-bg p-[16px] w-[358px]">
+  <div className="rounded-[8px] bg-input-bg p-[16px] w-[358px]" data-testid={`${title}Card`}>
     <Link
       href={nftAddress ? `/communities/nft/${nftAddress}` : '/communities'}
       className="flex flex-col h-full"

src/app/proposals/LatestProposalsTable.tsx

@@ -77,7 +77,9 @@ const LatestProposalsTable = ({ latestProposals }: LatestProposalsTableProps) =>
           />
         </SharedProposalsTableContextProvider>
       ) : (
-        <Typography tagVariant="p">No proposals found &#x1F622;</Typography>
+        <Typography tagVariant="p" data-testid="NoProposals">
+          No proposals found &#x1F622;
+        </Typography>
       )}
     </div>
   )

src/app/proposals/page.tsx

@@ -74,7 +74,7 @@ const VotingPowerPopover = () => (
   <Popover content={<PopoverContent />}>
     <button className="flex flex-row">
       <Paragraph className="text[16px] font-[700]">My Voting Power</Paragraph>
-      <FaRegQuestionCircle className="ml-1 self-center" />
+      <FaRegQuestionCircle className="ml-1 self-center" data-testid="QuestionIcon" />
     </button>
   </Popover>
 )

src/app/user/Communities/CommunityCard.tsx

@@ -5,7 +5,7 @@ import Image from 'next/image'
 import Link from 'next/link'
 
 export const CommunityCard: FC<CommunityCardProps> = ({ img, title, description, members, link }) => (
-  <div className="rounded bg-input-bg w-[300px]">
+  <div className="rounded bg-input-bg w-[300px]" data-testId={`${title}Card`}>
     <Link href={link}>
       {/* image */}
       <Image

src/components/Input/Input.tsx

@@ -101,7 +101,7 @@ export const Input: FC<Props> = ({
     search: (
       <div className="relative">
         <div className="absolute translate-y-4 translate-x-4">
-          {loading ? <FaSpinner className="animate-spin" /> : <BsSearch />}
+          {loading ? <FaSpinner className="animate-spin" /> : <BsSearch data-testid="SearchIcon" />}
         </div>
         <input
           className={classes}
@@ -118,7 +118,7 @@ export const Input: FC<Props> = ({
         {/* Small clear button at the right of the search field */}
         {onClear && (
           <button onClick={onClear} className="absolute right-4 bottom-1/2 translate-y-1/2 cursor-pointer">
-            <BsXCircle />
+            <BsXCircle data-testid="ClearIcon" />
           </button>
         )}
       </div>