Playwright : new chat multi model test (#13402)

### What problem does this PR solve? new test for chat multiple model and other chat parameters under playwright ### Type of change - [x] Other (please describe): new test/ data-testid
2026-05-03 16:57:48 +08:00 · 2026-03-05 18:51:57 +08:00
parent d9785ea2ce
commit d90d6026af
13 changed files with 912 additions and 69 deletions
--- a/web/src/components/large-model-form-field.tsx
+++ b/web/src/components/large-model-form-field.tsx
@ -108,7 +108,15 @@ export function LargeModelFormField({
  );
 }

-export function LargeModelFormFieldWithoutFilter() {
+type LargeModelFormFieldWithoutFilterProps = Pick<
+  NextInnerLLMSelectProps,
+  'triggerTestId' | 'optionTestIdPrefix'
+>;
+
+export function LargeModelFormFieldWithoutFilter({
+  triggerTestId,
+  optionTestIdPrefix,
+}: LargeModelFormFieldWithoutFilterProps = {}) {
  const form = useFormContext();

  return (
@ -118,7 +126,11 @@ export function LargeModelFormFieldWithoutFilter() {
      render={({ field }) => (
        <FormItem>
          <FormControl>
-            <NextLLMSelect {...field} />
+            <NextLLMSelect
+              {...field}
+              triggerTestId={triggerTestId}
+              optionTestIdPrefix={optionTestIdPrefix}
+            />
          </FormControl>
          <FormMessage />
        </FormItem>
--- a/web/src/components/llm-select/next.tsx
+++ b/web/src/components/llm-select/next.tsx
@ -15,58 +15,76 @@ export interface NextInnerLLMSelectProps {
  disabled?: boolean;
  filter?: string;
  showSpeech2TextModel?: boolean;
+  triggerTestId?: string;
+  optionTestIdPrefix?: string;
 }

 const NextInnerLLMSelect = forwardRef<
  React.ElementRef<typeof SelectPrimitive.Trigger>,
  NextInnerLLMSelectProps
->(({ value, disabled, filter, showSpeech2TextModel = false }, ref) => {
-  const { t } = useTranslation();
-  const [isPopoverOpen, setIsPopoverOpen] = useState(false);
+>(
+  (
+    {
+      value,
+      disabled,
+      filter,
+      showSpeech2TextModel = false,
+      triggerTestId,
+      optionTestIdPrefix,
+    },
+    ref,
+  ) => {
+    const { t } = useTranslation();
+    const [isPopoverOpen, setIsPopoverOpen] = useState(false);

-  const ttsModel = useMemo(() => {
-    return showSpeech2TextModel ? [LlmModelType.Speech2text] : [];
-  }, [showSpeech2TextModel]);
+    const ttsModel = useMemo(() => {
+      return showSpeech2TextModel ? [LlmModelType.Speech2text] : [];
+    }, [showSpeech2TextModel]);

-  const modelTypes = useMemo(() => {
-    if (filter === LlmModelType.Chat) {
-      return [LlmModelType.Chat];
-    } else if (filter === LlmModelType.Image2text) {
-      return [LlmModelType.Image2text, ...ttsModel];
-    } else {
-      return [LlmModelType.Chat, LlmModelType.Image2text, ...ttsModel];
-    }
-  }, [filter, ttsModel]);
+    const modelTypes = useMemo(() => {
+      if (filter === LlmModelType.Chat) {
+        return [LlmModelType.Chat];
+      } else if (filter === LlmModelType.Image2text) {
+        return [LlmModelType.Image2text, ...ttsModel];
+      } else {
+        return [LlmModelType.Chat, LlmModelType.Image2text, ...ttsModel];
+      }
+    }, [filter, ttsModel]);

-  const modelOptions = useComposeLlmOptionsByModelTypes(modelTypes);
+    const modelOptions = useComposeLlmOptionsByModelTypes(modelTypes);

-  return (
-    <Select disabled={disabled} value={value}>
-      <Popover open={isPopoverOpen} onOpenChange={setIsPopoverOpen}>
-        <PopoverTrigger asChild>
-          <SelectTrigger
-            onClick={(e) => {
-              e.preventDefault();
-              setIsPopoverOpen(true);
-            }}
-            ref={ref}
-          >
-            <SelectValue placeholder={t('common.pleaseSelect')}>
-              {
-                modelOptions
-                  .flatMap((x) => x.options)
-                  .find((x) => x.value === value)?.label
-              }
-            </SelectValue>
-          </SelectTrigger>
-        </PopoverTrigger>
-        <PopoverContent side={'left'}>
-          <LlmSettingFieldItems options={modelOptions}></LlmSettingFieldItems>
-        </PopoverContent>
-      </Popover>
-    </Select>
-  );
-});
+    return (
+      <Select disabled={disabled} value={value}>
+        <Popover open={isPopoverOpen} onOpenChange={setIsPopoverOpen}>
+          <PopoverTrigger asChild>
+            <SelectTrigger
+              onClick={(e) => {
+                e.preventDefault();
+                setIsPopoverOpen(true);
+              }}
+              ref={ref}
+              data-testid={triggerTestId}
+            >
+              <SelectValue placeholder={t('common.pleaseSelect')}>
+                {
+                  modelOptions
+                    .flatMap((x) => x.options)
+                    .find((x) => x.value === value)?.label
+                }
+              </SelectValue>
+            </SelectTrigger>
+          </PopoverTrigger>
+          <PopoverContent side={'left'}>
+            <LlmSettingFieldItems
+              options={modelOptions}
+              llmOptionTestIdPrefix={optionTestIdPrefix}
+            ></LlmSettingFieldItems>
+          </PopoverContent>
+        </Popover>
+      </Select>
+    );
+  },
+);

 NextInnerLLMSelect.displayName = 'LLMSelect';

--- a/web/src/components/llm-setting-items/llm-form-field.tsx
+++ b/web/src/components/llm-setting-items/llm-form-field.tsx
@ -7,6 +7,8 @@ import { RAGFlowFormItem } from '../ragflow-form';
 export type LLMFormFieldProps = {
  options?: any[];
  name?: string;
+  testId?: string;
+  optionTestIdPrefix?: string;
 };

 export const useModelOptions = () => {
@ -19,13 +21,22 @@ export const useModelOptions = () => {
  };
 };

-export function LLMFormField({ options, name }: LLMFormFieldProps) {
+export function LLMFormField({
+  options,
+  name,
+  testId,
+  optionTestIdPrefix,
+}: LLMFormFieldProps) {
  const { t } = useTranslation();
  const { modelOptions } = useModelOptions();

  return (
    <RAGFlowFormItem name={name || 'llm_id'} label={t('chat.model')}>
-      <SelectWithSearch options={options || modelOptions}></SelectWithSearch>
+      <SelectWithSearch
+        options={options || modelOptions}
+        testId={testId}
+        optionTestIdPrefix={optionTestIdPrefix}
+      ></SelectWithSearch>
    </RAGFlowFormItem>
  );
 }
--- a/web/src/components/llm-setting-items/next.tsx
+++ b/web/src/components/llm-setting-items/next.tsx
@ -29,6 +29,8 @@ interface LlmSettingFieldItemsProps {
  prefix?: string;
  options?: any[];
  llmId?: string;
+  llmSelectTestId?: string;
+  llmOptionTestIdPrefix?: string;
  showFields?: Array<
    | 'temperature'
    | 'top_p'
@ -67,6 +69,8 @@ export const LlmSettingSchema = {
 export function LlmSettingFieldItems({
  prefix,
  options,
+  llmSelectTestId,
+  llmOptionTestIdPrefix,
  showFields = [
    'temperature',
    'top_p',
@ -134,6 +138,8 @@ export function LlmSettingFieldItems({
      <LLMFormField
        options={options}
        name={llmId ?? getFieldWithPrefix('llm_id')}
+        testId={llmSelectTestId}
+        optionTestIdPrefix={llmOptionTestIdPrefix}
      ></LLMFormField>
      <FormField
        control={form.control}
--- a/web/src/components/message-input/next.tsx
+++ b/web/src/components/message-input/next.tsx
@ -234,6 +234,7 @@ export function NextMessageInput({
                  variant="transparent"
                  className="rounded-sm border-0"
                  disabled={isUploading || sendLoading}
+                  data-testid="chat-detail-attach"
                >
                  <Paperclip className="size-3.5" />
                  <span className="sr-only">Attach file</span>
@ -248,6 +249,7 @@ export function NextMessageInput({
                variant={enableThinking ? 'accent' : 'transparent'}
                className="border-0 h-7 text-sm"
                onClick={handleThinkingToggle}
+                data-testid="chat-detail-thinking-toggle"
              >
                <Atom />
                <span>Thinking</span>
@ -261,6 +263,7 @@ export function NextMessageInput({
                size="icon-xs"
                className="border-0"
                onClick={handleInternetToggle}
+                data-testid="chat-detail-internet-toggle"
              >
                <Globe />
              </Button>
@ -281,6 +284,7 @@ export function NextMessageInput({
                onOk={(value) => {
                  setAudioInputValue(value);
                }}
+                testId="chat-detail-audio-toggle"
              />

              <Button
@ -288,6 +292,7 @@ export function NextMessageInput({
                disabled={
                  sendDisabled || isUploading || sendLoading || !value.trim()
                }
+                data-testid="chat-detail-send"
              >
                <Send />
                <span className="sr-only">Send message</span>
--- a/web/src/components/originui/select-with-search.tsx
+++ b/web/src/components/originui/select-with-search.tsx
@ -49,6 +49,7 @@ export type SelectWithSearchFlagProps = {
  placeholder?: string;
  emptyData?: string;
  testId?: string;
+  optionTestIdPrefix?: string;
 };

 function findLabelWithoutOptions(
@ -82,6 +83,7 @@ export const SelectWithSearch = forwardRef<
      placeholder = t('common.selectPlaceholder'),
      emptyData = t('common.noDataFound'),
      testId,
+      optionTestIdPrefix,
    },
    ref,
  ) => {
@ -218,7 +220,11 @@ export const SelectWithSearch = forwardRef<
                            value={option.value}
                            disabled={option.disabled}
                            onSelect={handleSelect}
-                            data-testid="combobox-option"
+                            data-testid={
+                              optionTestIdPrefix && option.value
+                                ? `${optionTestIdPrefix}${option.value}`
+                                : 'combobox-option'
+                            }
                            className={
                              value === option.value ? 'bg-bg-card' : ''
                            }
@ -240,7 +246,11 @@ export const SelectWithSearch = forwardRef<
                      value={group.value}
                      disabled={group.disabled}
                      onSelect={handleSelect}
-                      data-testid="combobox-option"
+                      data-testid={
+                        optionTestIdPrefix && group.value
+                          ? `${optionTestIdPrefix}${group.value}`
+                          : 'combobox-option'
+                      }
                      className={cn('mb-1 min-h-10 ', {
                        'bg-bg-card ': value === group.value,
                      })}
--- a/web/src/components/ui/audio-button.tsx
+++ b/web/src/components/ui/audio-button.tsx
@ -217,8 +217,10 @@ const VoiceInputBox = ({
 };
 export const AudioButton = ({
  onOk,
+  testId,
 }: {
  onOk?: (transcript: string) => void;
+  testId?: string;
 }) => {
  // const [showInputBox, setShowInputBox] = useState(false);
  const [isRecording, setIsRecording] = useState(false);
@ -415,6 +417,7 @@ export const AudioButton = ({
              'animate-pulse !bg-state-success/20 text-state-success rounded-full',
          )}
          disabled={isProcessing}
+          data-testid={testId}
        >
          {isProcessing ? (
            <Loader2 size={16} className=" animate-spin" />