Tester un composant pour Agent virtuel

  • Rversion finale: Zurich
  • Mis à jour 31 juil. 2025
  • 2 minutes de lecture

    • Testez votre Agent virtuel composant personnalisé avant de le déployer sur votre instance.

    Avant de commencer

    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 client pour s’assurer Agent virtuel qu’ils répondent correctement à la saisie 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 <component-name>/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 .
      Voici un exemple package.json fichier avec les dépendances correctes. 
      "dependencies": {
    "@servicenow/ui-renderer-snabbdom": "Zurich",
    "@servicenow/library-translate": "^18.0.0",
    "@servicenow/now-button": "Zurich",
    "@servicenow/now-dropdown": "Zurich",
    "@servicenow/sass-generic": "Zurich",
    "@servicenow/cli-archetype": "Zurich",
    "@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 <component-name>/example/sampleProps.json avec les propriétés initiales à afficher dans votre test.
      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 <component-name>/example/element.js dans votre projet de composant.
      2. Ajoutez des instructions pour 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 <component-name> 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="<component-name>";
el.initialExampleData=sampleProps;
document.body.appendChild(el);
      Voici un exemple example.js fichier qui ouvre le composant à l’aide de l’outil client de 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="<component-name>";
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.

      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 sur 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 à d’autres personnes en externe. Généralement défini sur 0.0.0.0 
      $ 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é .

      Outil client de test affichant un exemple de composant de curseur.

    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.

    Après avoir développé le composant et l’avoir déployé sur 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, voir Contrôles personnalisés de l’Agent virtuel.