Fix e2e tests (#2256)

ui/desktop/src/components/ChatView.tsx

@@ -391,7 +391,11 @@ export default function ChatView({
           <ScrollArea ref={scrollRef} className="flex-1" autoScroll>
             <SearchView>
               {filteredMessages.map((message, index) => (
-                <div key={message.id || index} className="mt-4 px-4">
+                <div
+                  key={message.id || index}
+                  className="mt-4 px-4"
+                  data-testid="message-container"
+                >
                   {isUserMessage(message) ? (
                     <UserMessage message={message} />
                   ) : (

ui/desktop/src/components/Input.tsx

@@ -194,6 +194,7 @@ export default function Input({
       className="flex relative h-auto px-[16px] pr-[68px] py-[1rem] border-t border-borderSubtle"
     >
       <textarea
+        data-testid="chat-input"
         autoFocus
         id="dynamic-textarea"
         placeholder="What can goose help with?   ⌘↑/⌘↓"

ui/desktop/src/components/LoadingGoose.tsx

@@ -4,7 +4,10 @@ import GooseLogo from './GooseLogo';
 const LoadingGoose = () => {
   return (
     <div className="w-full pb-[2px]">
-      <div className="flex items-center text-xs text-textStandard mb-2 mt-2 pl-4 animate-[appear_250ms_ease-in_forwards]">
+      <div
+        data-testid="loading-indicator"
+        className="flex items-center text-xs text-textStandard mb-2 mt-2 pl-4 animate-[appear_250ms_ease-in_forwards]"
+      >
         <GooseLogo className="mr-2" size="small" hover={false} />
         goose is working on it…
       </div>

ui/desktop/src/components/WelcomeView.tsx

@@ -50,7 +50,10 @@ export default function WelcomeScreen({ onSubmit }: WelcomeScreenProps) {
 
             {/* ProviderGrid */}
             <div className="w-full">
-              <h2 className="text-3xl font-medium text-textStandard tracking-tight mb-2">
+              <h2
+                className="text-3xl font-medium text-textStandard tracking-tight mb-2"
+                data-testid="provider-selection-heading"
+              >
                 Choose a Provider
               </h2>
               <p className="text-xl text-textStandard mb-4">

ui/desktop/src/components/more_menu/MoreMenu.tsx

@@ -52,6 +52,7 @@ const ThemeSelect: React.FC<ThemeSelectProps> = ({ themeMode, onThemeChange }) =
       <div className="text-sm mb-2">Theme</div>
       <div className="grid grid-cols-3 gap-2">
         <button
+          data-testid="light-mode-button"
           onClick={() => onThemeChange('light')}
           className={`flex items-center justify-center gap-2 p-2 rounded-md border transition-colors ${
             themeMode === 'light'
@@ -64,6 +65,7 @@ const ThemeSelect: React.FC<ThemeSelectProps> = ({ themeMode, onThemeChange }) =
         </button>
 
         <button
+          data-testid="dark-mode-button"
           onClick={() => onThemeChange('dark')}
           className={`flex items-center justify-center gap-2 p-2 rounded-md border transition-colors ${
             themeMode === 'dark'
@@ -76,6 +78,7 @@ const ThemeSelect: React.FC<ThemeSelectProps> = ({ themeMode, onThemeChange }) =
         </button>
 
         <button
+          data-testid="system-mode-button"
           onClick={() => onThemeChange('system')}
           className={`flex items-center justify-center gap-2 p-2 rounded-md border transition-colors ${
             themeMode === 'system'
@@ -162,9 +165,9 @@ export default function MoreMenu({
     <Popover open={open} onOpenChange={setOpen}>
       <PopoverTrigger asChild>
         <button
+          data-testid="more-options-button"
           className={`z-[100] absolute top-2 right-4 w-[20px] h-[20px] transition-colors cursor-pointer no-drag hover:text-textProminent ${open ? 'text-textProminent' : 'text-textSubtle'}`}
           role="button"
-          aria-label="More options"
         >
           <More />
         </button>
@@ -265,6 +268,7 @@ export default function MoreMenu({
 
               {settingsV2Enabled && (
                 <MenuButton
+                  data-testid="reset-provider-button"
                   onClick={async () => {
                     await remove('GOOSE_PROVIDER', false);
                     await remove('GOOSE_MODEL', false);
@@ -282,6 +286,7 @@ export default function MoreMenu({
 
               {!settingsV2Enabled && (
                 <MenuButton
+                  data-testid="reset-provider-button"
                   onClick={() => {
                     localStorage.removeItem('GOOSE_PROVIDER');
                     setOpen(false);

ui/desktop/src/components/settings/providers/BaseProviderGrid.tsx

@@ -67,7 +67,10 @@ function BaseProviderCard({
   const tooltipText = numRequiredKeys === 1 ? `Add ${name} API Key` : `Add ${name} API Keys`;
 
   return (
-    <div className="relative h-full p-[2px] overflow-hidden rounded-[9px] group/card bg-borderSubtle hover:bg-transparent hover:duration-300">
+    <div
+      className="relative h-full p-[2px] overflow-hidden rounded-[9px] group/card bg-borderSubtle hover:bg-transparent hover:duration-300"
+      data-testid={`provider-card-${name.toLowerCase()}`}
+    >
       {/* Glowing ring */}
       <div
         className={`absolute pointer-events-none w-[260px] h-[260px] top-[-50px] left-[-30px] origin-center bg-[linear-gradient(45deg,#13BBAF,#FF4F00)] animate-[rotate_6s_linear_infinite] z-[-1] ${
@@ -195,6 +198,7 @@ function BaseProviderCard({
               <Tooltip>
                 <TooltipTrigger asChild>
                   <Button
+                    data-testid="provider-launch-button"
                     variant="default"
                     size="sm"
                     onClick={(e) => {

ui/desktop/src/components/settings_v2/providers/ProviderSettingsPage.tsx

@@ -98,7 +98,10 @@ export default function ProviderSettings({ onClose, isOnboarding }: ProviderSett
         <div className="px-8 pt-6 pb-4">
           {/* Only show back button if not in onboarding mode */}
           {!isOnboarding && <BackButton onClick={onClose} />}
-          <h1 className="text-3xl font-medium text-textStandard mt-1">
+          <h1
+            className="text-3xl font-medium text-textStandard mt-1"
+            data-testid="provider-selection-heading"
+          >
             {isOnboarding ? 'Configure your providers' : 'Provider Configuration Settings'}
           </h1>
           {isOnboarding && (

ui/desktop/src/components/settings_v2/providers/subcomponents/CardContainer.tsx

@@ -5,6 +5,7 @@ interface CardContainerProps {
   body: React.ReactNode;
   onClick: () => void;
   grayedOut: boolean;
+  testId?: string;
 }
 
 function GlowingRing() {
@@ -31,9 +32,11 @@ export default function CardContainer({
   body,
   onClick,
   grayedOut = false,
+  testId,
 }: CardContainerProps) {
   return (
     <div
+      data-testid={testId}
       className={`relative h-full p-[1px] overflow-hidden rounded-[9px] group/card 
                  ${
                    grayedOut

ui/desktop/src/components/settings_v2/providers/subcomponents/ProviderCard.tsx

@@ -37,6 +37,7 @@ export const ProviderCard = memo(function ProviderCard({
 
   return (
     <CardContainer
+      testId={`provider-card-${provider.name.toLowerCase()}`}
       grayedOut={!provider.is_configured && isOnboarding} // onboarding page will have grayed out cards if not configured
       onClick={handleCardClick}
       header={

ui/desktop/src/components/settings_v2/providers/subcomponents/buttons/CardButtons.tsx

@@ -110,6 +110,7 @@ export function ConfigureSettingsButton({ tooltip, className, ...props }: Action
 export function RocketButton({ tooltip, className, ...props }: ActionButtonProps) {
   return (
     <ActionButton
+      data-testid="provider-launch-button"
       icon={Rocket}
       tooltip={tooltip}
       className={className}