---
sourceDocument: Criar ou modificar aplicações do Xanadu
sourceDocumentLink: https://servicenow-prod.fluidtopics.net/r/pt-BR/xanadu/application-development

 Release :

    - xanadu

ft:locale :

    - pt-BR

ft:publication_title :

    - Criar ou modificar aplicações do Xanadu

ft:clusterId :

    - cadev

bundleId :

    - cadev

workflow :

    - Creator


---

# Testar um componente para Virtual Agent

# Testar um componente para Virtual Agent {#ariaid-title1}

* Versão de lançamento: Xanadu
* 
* Atualizado 1 de ago. de 2024
* 
* ![](https://www.servicenow.com/docs/portal-asset/ico-clock) 2 min. de leitura

Teste o componente personalizado Virtual Agent antes de implantá-lo na instância.

## Antes de Iniciar

* [Configurar seu ambiente](https://servicenow-prod.fluidtopics.net/ourC0hNhETgWb0BLV0Q8jA "Prepare seu ambiente local instalando o ambiente de tempo de execução JavaScript Node.js, o gerenciador de pacotes Node (npm) e o extensão do componente iu. Essas ferramentas permitem desenvolver e criar componentes localmente e implantá-los em sua instância.")
* [Configurar seu projeto](https://servicenow-prod.fluidtopics.net/Qf9laGAcmi1rtkVokT5uOQ "Crie o projeto de componente e o conjunto de arquivos necessários para desenvolver um componente. Você pode se conectar à sua instância e criar um escopo da aplicação para o seu componente ou pode reservar um escopo para verificar mais tarde.")
* [Desenvolver um componente](https://servicenow-prod.fluidtopics.net/eyOObVZdwtqEOVvfiyGNyw "Adicione seu código de componente e teste-o usando um servidor de desenvolvimento local.")
* [Adicionar propriedades com as quais se comunicar Virtual Agent](https://servicenow-prod.fluidtopics.net/6eHt1HafKTmB5dwr64b5SA "Para desenvolver um componente para Virtual Agent, adicione propriedades e ações específicas para interagir com a interface do cliente Virtual Agent. As propriedades necessárias dependem do tipo de componente que você está criando.")

{#test-va-component__ul_wb3_xbn_tkb}

Função necessária: virtual_agent_admin ou admin

## Por Que e Quando Desempenhar Esta Tarefa

Virtual Agent componentes devem ser testados no bate-papo do cliente Virtual Agent para garantir que o componente responda corretamente à entrada do usuário. Você pode definir propriedades em seu projeto de componente para testar seu componente em uma ferramenta de cliente de teste fictícia Virtual Agent.

## Procedimento

1. Adicione uma dependência na ferramenta cliente de teste ao seu projeto de componente.
   1. Abrir o\<component-name\> Arquivo /package.json em seu projeto de componente.
   2. Adicione `"@servicenow/sdk-ci": "1.0.8"` e `"@servicenow/library-translate": "^18.0.0"` ao objeto `devDependencies`.

   {#test-va-component__substeps_uwb_fjf_vmb}  
   Aqui está um exemplo de arquivo package.json com as dependências corretas.

       "dependencies": {
           "@servicenow/ui-renderer-snabbdom": "xanadu",
           "@servicenow/library-translate": "^18.0.0",
           "@servicenow/now-button": "xanadu",
           "@servicenow/now-dropdown": "xanadu",
           "@servicenow/sass-generic": "xanadu",
           "@servicenow/cli-archetype": "xanadu",
           "@servicenow/sdk-ci": "1.0.8"
       }

2. Adicione propriedades de amostra para usar como o estado inicial do componente em seu teste.
   1. Adicionar um\<component-name\> Arquivo /example/sampleProps.json com propriedades iniciais a serem renderizadas no teste.

   {#test-va-component__substeps_v2f_flf_vmb}  
   Aqui está um exemplo de arquivo sampleProps.json com propriedades iniciais definidas para um componente de controle deslizante.

       {	
       	"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. Atualize o arquivo example.js para abrir o componente por meio da ferramenta de cliente de teste usando as propriedades de amostra que você criou.
   1. Abrir o\<component-name\> Arquivo /example/element.js em seu projeto de componente.
   2. Adicione instruções para importar `@servicenow/sdk-ci` e o arquivo de propriedades de amostra que você criou.
   3. Adicione a seguinte declaração, substituindo\<component-name\> com o nome do seu componente para criar a ferramenta de teste com dados iniciais de suas propriedades de amostra.  

          const el = document.createElement('tool-ci-custom-control-tester');
          el.componentTagName="<component-name>";
          el.initialExampleData=sampleProps;
          document.body.appendChild(el);

   {#test-va-component__substeps_odn_hjf_vmb}  
   Este é um exemplo de arquivo example.js que abre o componente usando a ferramenta de cliente de teste.

       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. Execute o comando do servidor de desenvolvimento para exibir seu componente em um navegador de teste.  

       $ snc ui-component develop [--entry entry --open --port port --host host]

   Passe valores para esses parâmetros.  
   {#test-va-component__table_lnx_bzt_vkb__entry__2}

   | Nome | Descrição |
   |-|-|
   | entrada | Caminho para o módulo de teste no seu projeto de componente. Padrão: example/index.js. |
   | em aberto | Abre o navegador padrão e navega até a página de teste. Padrão: falso. |
   | porta | Porta em que o servidor de desenvolvimento é executado. Padrão: 8081. |
   | Host | Endereço de host a ser usado se você quiser que o servidor de desenvolvimento local seja acessível externamente por outras pessoas. Normalmente definido como `0.0.0.0` |
   [ ]

   {#test-va-component__table_lnx_bzt_vkb}  

       $ snc ui-component develop --entry example/hello.js --open --port 3000

   O componente é aberto na ferramenta de cliente de teste. Você pode ver os dados iniciais fornecidos no campo Dados de entrada JSON de controle personalizado e a saída do componente no campo Dados de retorno de controle personalizado.

## O que Fazer Depois

Se o componente estiver funcionando conforme o esperado, implante-o na instância. Consulte [Implantar um componente em uma instância](https://servicenow-prod.fluidtopics.net/FShv4NrX1MNtp0SZ8Apwvg "Implante seu componente para ser exibido em sua instância como um plug-in de aplicação.").

Depois de desenvolver o componente e implantá-lo em sua instância, adicione-o a Designer do Virtual Agent usando um controle e uma definição personalizados. Para obter mais informações, consulte [Controles personalizados do Virtual Agent](https://www.servicenow.com/docs/access?context=custom-controls&version=xanadu&pubname=xanadu-conversational-interfaces&ft:locale=en-US).
**Conceitos relacionados**   

* [Construtor de componente personalizado](https://servicenow-prod.fluidtopics.net/1fP78Qyn79GbWRJSiJ9ZaQ "Desenvolva componentes personalizados usando o Estrutura de IU do Next Experience e o extensão do componente iu.")