--- sourceDocument: Yokohama Erstellen oder ändern Sie Anwendungen sourceDocumentLink: https://servicenow-prod.fluidtopics.net/r/de-DE/yokohama/application-development Release : - yokohama ft:locale : - de-DE ft:publication_title : - Yokohama Erstellen oder ändern Sie Anwendungen ft:clusterId : - cadev bundleId : - cadev workflow : - Creator --- Testen Sie eine Komponente für Virtual Agent ============================================ Testen Sie eine Komponente für Virtual Agent {#ariaid-title1} ============================================================= * Freigeben Version: Yokohama * * Aktualisiert 30. Januar 2025 * * ![](https://www.servicenow.com/docs/portal-asset/ico-clock) 2 Minuten Lesedauer Testen Sie Ihre anwenderdefinierte Komponente Virtual Agent, bevor Sie sie in Ihrer -Instanz bereitstellen. Vorbereitungen -------------- * Richten Sie Ihre Umgebung ein. Anweisungen hierzu finden Sie unter [ServiceNow® Developer Site](https://developer.servicenow.com/dev.do#!/reference/next-experience/xanadu/cli/getting-started). * Richten Sie Ihr Komponentenprojekt ein. Anweisungen hierzu finden Sie unter [ServiceNow® Developer Site](https://developer.servicenow.com/dev.do#!/reference/next-experience/xanadu/cli/cli) * Entwickeln Sie Ihre Komponente. Anweisungen hierzu finden Sie unter [ServiceNow® Developer Site](https://servicenow.com/docs/bundle/xanadu-application-development/page/build/components/task/develop-component.html) * [Fügen Sie Eigenschaften für die Kommunikation mit hinzu Virtual Agent](https://servicenow-prod.fluidtopics.net/D2PEZaRlM2SYh8sWwKHJvg "Um eine -Komponente für Virtual Agentzu entwickeln, fügen Sie bestimmte Eigenschaften und Aktionen für die Interaktion mit der Clientschnittstelle Virtual Agent hinzu. Die erforderlichen Eigenschaften hängen vom Typ der Komponente ab, die Sie erstellen.") {#test-va-component__ul_wb3_xbn_tkb} Erforderliche Rolle: virtual_agent_admin oder admin Warum und wann dieser Vorgang ausgeführt wird --------------------------------------------- Virtual Agent -Komponenten müssen im Virtual Agent -Client-Chat getestet werden, um sicherzustellen, dass die Komponente richtig auf Benutzereingaben reagiert. Sie können Eigenschaften in Ihrem Komponentenprojekt festlegen, um Ihre Komponente in einem Mock-Test-Client-Tool Virtual Agent zu testen. Prozedur -------- 1. Fügen Sie Ihrem Komponentenprojekt eine Abhängigkeit vom Testclient-Tool hinzu. 1. Öffnen Sie\ Datei /package.json in Ihrem Komponentenprojekt. 2. Fügen Sie `„@servicenow/sdk-ci": „1.0.8"` und `„@servicenow/library-translate": „^18.0.0"` dem `devDependencies-` Objekt hinzu. {#test-va-component__substeps_uwb_fjf_vmb} Hier ist eine Beispieldatei des Typs „package.json" mit den richtigen Abhängigkeiten. "dependencies": { "@servicenow/ui-renderer-snabbdom": "Yokohama", "@servicenow/library-translate": "^18.0.0", "@servicenow/now-button": "Yokohama", "@servicenow/now-dropdown": "Yokohama", "@servicenow/sass-generic": "Yokohama", "@servicenow/cli-archetype": "Yokohama", "@servicenow/sdk-ci": "1.0.8" } 2. Fügen Sie Beispieleigenschaften hinzu, die Sie als Anfangsstatus der Komponente in Ihrem Test verwenden möchten. 1. Fügen Sie eine hinzu\ /example/sampleProps.json mit anfänglichen Eigenschaften zum Rendern in Ihrem Test. {#test-va-component__substeps_v2f_flf_vmb} Hier ist eine Beispieldatei vom Typ „sampleProps.json" mit anfänglichen Eigenschaften, die für eine Schiebereglerkomponente festgelegt sind. { "label": "How many penguins do you want to buy?", "defaultValue": 10, "sliderMin": 20, "sliderMax": 80, "unitName": "penguins", "unitIcon": "https://image.flaticon.com/icons/svg/141/141836.svg" } 3. Aktualisieren Sie die Datei „example.js", um die Komponente über das Test-Client-Tool mit den von Ihnen erstellten Beispieleigenschaften zu öffnen. 1. Öffnen Sie\ Datei /example/element.js in Ihrem Komponentenprojekt. 2. Fügen Sie Anweisungen zum Importieren `von @servicenow/sdk-ci` und der von Ihnen erstellten Beispieleigenschaftendatei hinzu. 3. Fügen Sie die folgende Aussage hinzu und ersetzen Sie\ mit dem Namen Ihrer Komponente, um das Test-Tool mit den ursprünglichen Daten aus Ihren Beispieleigenschaften zu erstellen. const el = document.createElement('tool-ci-custom-control-tester'); el.componentTagName=""; el.initialExampleData=sampleProps; document.body.appendChild(el); {#test-va-component__substeps_odn_hjf_vmb} Hier ist eine Beispieldatei vom Typ „example.js", die die Komponente mit dem Test-Client-Tool öffnet. import '../src/now-chat-control-slider'; import '@servicenow/sdk-ci'; import sampleProps from './sampleProps.json'; const el = document.createElement('tool-ci-custom-control-tester'); el.componentTagName=""; el.initialExampleData=sampleProps; document.body.appendChild(el); 4. Führen Sie den Entwicklungsserverbefehl aus, um Ihre Komponente in einem Testbrowser anzuzeigen. $ snc ui-component develop [--entry entry --open --port port --host host] Übergeben Sie Werte für diese Parameter. {#test-va-component__table_lnx_bzt_vkb__entry__2} | Name | Beschreibung | |---------|----------------------------------------------------------------------------------------------------------------------------------------| | Eintrag | Pfad zum Testmodul in Ihrem Komponentenprojekt. Standard: example/index.js. | | offen | Öffnet den Standardbrowser und navigiert zur Testseite. Standard: false. | | port | Port, auf dem der Entwicklungsserver ausgeführt wird. Standard: 8081. | | host | Zu verwendende Hostadresse, wenn Ihr lokaler Entwicklungsserver von extern zugänglich sein soll. Normalerweise auf `0.0.0.0`festgelegt | [ ] {#test-va-component__table_lnx_bzt_vkb} $ snc ui-component develop --entry example/hello.js --open --port 3000 Die Komponente wird im Testclient-Tool geöffnet. Sie können die anfänglich bereitgestellten Daten im Feld JSON-Eingabedaten für anwenderdefiniertes Steuerelement und die Ausgabe der Komponente im Feld Rückgabedaten für anwenderdefiniertes Steuerelement sehen. Nächste Maßnahme ---------------- Wenn Ihre Komponente wie erwartet funktioniert, stellen Sie sie in Ihrer -Instanz bereit. Anweisungen hierzu finden Sie unter [ServiceNow® Developer Site](https://developer.servicenow.com/dev.do#!/reference/next-experience/xanadu/cli/development-flow). Nachdem Sie die Komponente entwickelt und in Ihrer Instanz bereitgestellt haben, fügen Sie sie mithilfe eines anwenderdefinierten Steuerelements und einer Definition zu Virtual Agent-Designer hinzu. Weitere Informationen finden Sie unter [Anwenderdefinierte Steuerungen für Virtual Agent](https://www.servicenow.com/docs/access?context=custom-controls&version=yokohama&pubname=yokohama-conversational-interfaces&ft:locale=en-US). **Zugehörige Konzepte** * [Generator für anwenderdefinierte Komponenten](https://servicenow-prod.fluidtopics.net/i5pvIoJ0n6__JcNRKWHq6g "Entwickeln Sie anwenderdefinierte Komponenten mit Next Experience UI Framework und Erweiterung der UI-Komponente.")