--- sourceDocument: Yokohama Créer ou modifier des applications sourceDocumentLink: https://servicenow-prod.fluidtopics.net/r/fr-FR/yokohama/application-development Release : - yokohama ft:locale : - fr-FR ft:publication_title : - Yokohama Créer ou modifier des applications ft:clusterId : - cadev bundleId : - cadev workflow : - Creator --- Tester un composant pour Agent virtuel ====================================== Tester un composant pour Agent virtuel {#ariaid-title1} ======================================================= * Rversion finale: Yokohama * * Mis à jour 30 janv. 2025 * * ![](https://www.servicenow.com/docs/portal-asset/ico-clock) 2 minutes de lecture Testez votre Agent virtuel composant personnalisé avant de le déployer sur votre instance. Avant de commencer ------------------ * Configurez votre environnement. Pour obtenir des instructions, consultez le [ServiceNow® Site Developer](https://developer.servicenow.com/dev.do#!/reference/next-experience/xanadu/cli/getting-started). * Configurez votre projet de composant. Pour obtenir des instructions, consultez le [ServiceNow® Site Developer](https://developer.servicenow.com/dev.do#!/reference/next-experience/xanadu/cli/cli) * Développez votre composant. Pour obtenir des instructions, consultez le [ServiceNow® Site Developer](https://servicenow.com/docs/bundle/xanadu-application-development/page/build/components/task/develop-component.html) * [Ajouter des propriétés pour communiquer avec Agent virtuel](https://servicenow-prod.fluidtopics.net/nHbYEsRufPgkkXruapsi5Q "Pour développer un composant pour Agent virtuel, ajoutez des propriétés et des actions spécifiques afin d’interagir avec l’interface Agent virtuel client. Les propriétés requises dépendent du type de composant que vous créez.") {#test-va-component__ul_wb3_xbn_tkb} Rôle requis : virtual_agent_admin ou admin Pourquoi et quand exécuter cette tâche -------------------------------------- Agent virtuel Les composants doivent être testés dans la messagerie instantanée du client pour s'assurer Agent virtuel qu'ils répondent correctement aux entrées de l'utilisateur. Vous pouvez définir des propriétés dans votre projet de composant pour tester votre composant dans un outil client de test fictif Agent virtuel . Procédure --------- 1. Ajoutez une dépendance de l'outil client de test à votre projet de composant. 1. Ouvrez le fichier \/package.json dans votre projet de composant. 2. Ajoutez `<< @servicenow/sdk-ci >> : << 1.0.8 >>` et `<< @servicenow/library-translate >> : << ^18.0.0 >>` à l'objet `devDependencies` . {#test-va-component__substeps_uwb_fjf_vmb} Voici un exemple package.json fichier avec les dépendances correctes. "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. Ajoutez des exemples de propriétés à utiliser comme état initial du composant dans votre test. 1. Ajoutez un fichier \/example/sampleProps.json avec les propriétés initiales à afficher dans votre test. {#test-va-component__substeps_v2f_flf_vmb} Voici un exemple de fichier sampleProps.json avec des propriétés initiales définies pour un composant de curseur. { "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. Mettez à jour le fichier example.js pour ouvrir le composant via l'outil client de test à l'aide des exemples de propriétés que vous avez créés. 1. Ouvrez le fichier \/example/element.js dans votre projet de composant. 2. Ajoutez des instructions à importer `@servicenow/sdk-ci` et l'exemple de fichier de propriétés que vous avez créé. 3. Ajoutez l'instruction suivante, en remplaçant `` par le nom de votre composant pour créer l'outil de test avec les données initiales de vos exemples de propriétés. 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} Voici un exemple example.js fichier qui ouvre le composant à l'aide de l'outil client test. 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. Exécutez la commande du serveur de développement pour afficher votre composant dans un navigateur de test. $ snc ui-component develop [--entry entry --open --port port --host host] Transmettez les valeurs de ces paramètres. {#test-va-component__table_lnx_bzt_vkb__entry__2} | Nom | Description | |--------|-----------------------------------------------------------------------------------------------------------------------------------------------------------------------------| | entry | Chemin d'accès au module de test dans votre projet de composant. Par défaut : exemple/index.js. | | ouvert | Ouvre le navigateur par défaut et accède à la page de test. Valeur par défaut : faux. | | port | Port dans lequel le serveur de développement s'exécute. Par défaut : 8081. | | hôte | Adresse de l'hôte à utiliser si vous souhaitez que votre serveur de développement local soit accessible en externe par d'autres serveurs. Généralement défini sur `0.0.0.0` | [ ] {#test-va-component__table_lnx_bzt_vkb} $ snc ui-component develop --entry example/hello.js --open --port 3000 Le composant s'ouvre dans l'outil client de test. Vous pouvez voir les données initiales fournies dans le champ Données d'entrée JSON de contrôle personnalisé et la sortie du composant dans le champ Données de retour de contrôle personnalisé . Que faire ensuite ----------------- Si votre composant fonctionne comme prévu, déployez-le sur votre instance. Pour obtenir des instructions, consultez le [ServiceNow® Site Developer](https://developer.servicenow.com/dev.do#!/reference/next-experience/xanadu/cli/development-flow). Après avoir développé le composant et l'avoir déployé dans votre instance, ajoutez-le à Concepteur d'agent virtuel l'aide d'un contrôle et d'une définition personnalisés. Pour plus d'informations, consultez [Contrôles personnalisés de l'Agent virtuel](https://www.servicenow.com/docs/access?context=custom-controls&version=yokohama&pubname=yokohama-conversational-interfaces&ft:locale=en-US). **Concepts associés** * [Générateur de composants personnalisé](https://servicenow-prod.fluidtopics.net/wE6qVctGYLBvlRz_NPRnag "Développez des composants personnalisés à l’aide de la Cadre de travail de l'interface utilisateur Next Experience commande et de la commande extension de composant ui.")