---
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


---

# Substituir ações de teste de componente

# Substituir ações de teste de componente {#ariaid-title1}

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

Altere as propriedades de teste de um componente de página específico usando atributos HTML que são específicos para Automated Test Framework.

## Antes de Iniciar

Função necessária: administrador

## Por Que e Quando Desempenhar Esta Tarefa

Quando Automated Test Framework recupera um componente, ele determina quais interações ele suporta, por exemplo, se é um componente configurável ou clicável. Se o componente for configurável, Automated Test Framework determinará o tipo de campo que pode ser definido. Se Automated Test Framework determinar incorretamente as ações ou os tipos de campo do seu componente personalizado, ou se o seu componente contiver vários elementos DOM que devem ser tratados como uma entidade, defina-os explicitamente usando atributos HTML específicos para Automated Test Framework.

## Como usar atributos sn-atf-clickable e sn-atf-settable {#ariaid-title2}

Use os atributos `sn-atf-clickable` e `sn-atf-settable` para especificar que um elemento e seus elementos secundários devem ser tratados como um componente clicável ou configurável personalizado.

### Antes de Iniciar

Função necessária: administrador

### Procedimento

1. Abra a página de IU personalizada que você deseja testar.
2. Adicione o atributo `sn-atf-clickable` ou `sn-atf-settable` ao elemento que está sendo testado.  

       <div sn-atf-clickable="true" sn-atf-disabled id="customClickable">
       	<button id="customButton">Click me</button>
       </div>

       <div sn-atf-settable="true" id="customSettable" sn-atf-component-value="A default value">
       	<input id="customInput" value="A default value"></input>
       </div>

   Nota:  
   Você pode usar o atributo `sn-atf-clickable` ou `sn-atf-settable` para especificar se um elemento deve ser tratado como um componente clicável ou configurável personalizado. Você não pode usar ambos os atributos no mesmo elemento.
3. Use o atributo `sn-atf-clickable` ou `sn-atf-settable`.  
   * `sn-atf-clickable`: se você adicionou o atributo `sn-atf-clickable`, o ATF clicará no componente enviando um evento `sn-atf-click` para o elemento DOM com o atributo `sn-atf-clickable`. Você deve adicionar um ouvinte de eventos (por exemplo, usando `addEventListener`) a este elemento DOM e implementar sua lógica de clique personalizada para o componente. Você pode interagir com um componente clicável personalizado usando a etapa de teste [Clicar no componente](https://servicenow-prod.fluidtopics.net/pRfV~dTqcBA3QhT9TLmapA#atf-click-component "Clique em um componente em uma página de IU personalizada."). {#atf-override-component-class-02__table_r5q_gry_cgb__entry__2}

     | Nome de atributo | Descrição |
     |-|-|
     | sn-atf-disabled | A presença deste atributo opcional (independentemente do seu valor) informa ao ATF que este componente está desabilitado Nota: Se este atributo estiver ausente, o ATF considerará que este componente está habilitado por padrão. |
     | sn-atf-component-value | Uma cadeia de caracteres ou objeto JSON que informa ao ATF o valor atual deste componente |
     [Tabela 1. Atributos de componente clicável]

     {#atf-override-component-class-02__table_r5q_gry_cgb}
   * `sn-atf-settable`: se você adicionou o atributo `sn-atf-settable`, o ATF definirá o valor do componente enviando um evento `sn-atf-setvalue` para o elemento DOM com o atributo `sn-atf-settable`. Você deve adicionar um ouvinte de eventos (por exemplo, usando `addEventListener`) a este elemento DOM e implementar sua lógica de valor de conjunto personalizado para o componente. O valor que precisa ser definido pode ser acessado com `event.detail.newvalue`. O argumento do `evento` é passado para o manipulador de eventos. Você pode interagir com um componente configurável personalizado usando a etapa de teste [Definir valores de componente](https://servicenow-prod.fluidtopics.net/pRfV~dTqcBA3QhT9TLmapA#atf-set-component-values "Defina valores de componente em uma página de IU personalizada."). {#atf-override-component-class-02__table_kml_csy_cgb__entry__2}

     | Nome de atributo | Descrição |
     |-|-|
     | sn-atf-disabled | A presença deste atributo opcional (independentemente do seu valor) informa ao ATF que este componente está desabilitado. Nota: Se este atributo estiver ausente, o ATF considerará que este componente está habilitado por padrão. |
     | sn-atf-component-value | Uma cadeia de caracteres ou objeto JSON que informa ao ATF o valor atual deste componente. |
     | sn-atf-data-type | Tipo opcional de campo a ser apresentado ao usuário ao criar uma etapa. O padrão é cadeia de caracteres. Por exemplo, `glide_date_time`, reference, booliano etc. |
     | sn-atf-data-type-params | Objeto JSON com mais detalhes de tipo de dados. |
     [Tabela 2. Atributos do componente configurável]

     {#atf-override-component-class-02__table_kml_csy_cgb}
   {#atf-override-component-class-02__ul_xst_3rq_slb}
{#atf-override-component-class-02__steps_jyp_gkz_1gb}

### Exemplo

    //A custom clickable component

    <div sn-atf-clickable="true" sn-atf-disabled id="customClickable">
    	<button id="customButton">Click me</button>
    </div>
    <script>
    	var customClickableDiv = document.getElementById("customClickable");
    	customClickableDiv.addEventListener('sn-atf-click', function() {
    		document.getElementById('customButton').click();
    	});
    </script>

    //A custom settable component

    <div sn-atf-settable="true" id="customSettable" sn-atf-component-value="A default value">
    	<input id="customInput" value="A default value"></input>
    </div>
    <script>
    	var customSettableDiv = document.getElementById("customSettable");
    	customSettableDiv.addEventListener('sn-atf-setvalue', function(event) {
    		var newValue = event.detail.newValue;
    		document.getElementById("customInput").value = newValue;
    	});
    </script>

## Como usar o atributo sn-atf-class {#ariaid-title3}

Use o atributo `sn-atf-class` para especificar o objeto JavaScript a ser usado ao testar um componente clicável ou configurável personalizado. Grave um objeto JavaScript personalizado para especificar as ações de teste disponíveis para um componente personalizado.

### Antes de Iniciar

Função necessária: administrador

### Por Que e Quando Desempenhar Esta Tarefa

Os designers de teste podem especificar manualmente as ações de teste disponíveis para um componente personalizado escrevendo um objeto JavaScript personalizado e atribuindo ao componente um atributo `sn-atf-class`. Defina o valor do atributo como o nome do objeto JavaScript que contém as ações de teste do componente. Os componentes personalizados testáveis devem ser clicáveis ou configuráveis, e essa classificação determina as funções e propriedades que seu objeto JavaScript requer. Consulte [Etapas de teste da IU personalizada](https://servicenow-prod.fluidtopics.net/BxmrxFbHKnBp7ZoGfaqp4w "Teste interfaces de usuário personalizadas, como páginas de IU e macros de IU, recuperando seus componentes de página HTML e JavaScript e identificando as ações de teste compatíveis.") para obter os requisitos do componente de página testável.

### Procedimento

1. Abra a página de IU personalizada que você deseja testar.
2. Adicione o atributo `sn-atf-class` ao elemento que está sendo testado e defina o valor com o nome do objeto JavaScript incorporado na página que lida com as funções getValue(), setValue(), click() ou isDisabled().  

       <div sn-atf-class="MyClickableComponent">
           <label for="a_clickable_checkbox">MyClickableComponent</label>
           <input type="checkbox" id="a_clickable_checkbox" checked="true"/>
       </div>

3. Crie o objeto JavaScript especificado no atributo `sn-atf-class` e adicione as funções e o atributo necessários para identificar o componente de página personalizada como um componente de página clicável ou configurável.  
   {#override-component-class__table_r5q_gry_cgb__entry__2}

   | Nome da função | Descrição |
   |-|-|
   | inicializar () | Obtém os valores iniciais do componente. Insira: $super(element, area) |
   | clique () | Seleciona o componente. Retorna um objeto JSON com estas propriedades: `sucesso`: verdadeiro se for possível clicar no componente. Nota: Aciona o mecanismo de espera inteligente da etapa de teste de IU. |
   | getValue() | Obtém o valor do elemento. Retorna um objeto JSON com estas propriedades: * `sucesso`: verdadeiro se o valor for recuperado. * `resultado`: o valor do componente. {#override-component-class__ul_jym_3mm_wfb} |
   | estáDesativado() | Se o componente está desabilitado. Retorna um objeto JSON com estas propriedades: * `sucesso`: verdadeiro se o componente estiver desabilitado. * `resultado`: verdadeiro se o componente estiver desabilitado. {#override-component-class__ul_ont_4qm_wfb} |
   [Tabela 3. Funções do componente clicável]

   {#override-component-class__table_r5q_gry_cgb}  
   {#override-component-class__table_kml_csy_cgb__entry__2}

   | Nome da função | Descrição |
   |-|-|
   | inicializar () | Obtém os valores iniciais do componente. Insira: $super(element, area) |
   | setValue(newValue) | Define o valor do componente. Veja o segundo exemplo abaixo. Retorna um objeto JSON com estas propriedades: `sucesso`: verdadeiro se o valor estiver definido. Nota: Aciona o mecanismo de espera inteligente da etapa de teste de IU. |
   | getValue() | Obtém o valor do elemento. Retorna um objeto JSON com estas propriedades: * `sucesso`: verdadeiro se o valor for recuperado. * `resultado`: o valor do componente. {#override-component-class__ul_mml_csy_cgb} |
   | estáDesativado() | Se o componente está desabilitado. Retorna um objeto JSON com estas propriedades: * `sucesso`: verdadeiro se o componente estiver desabilitado. * `resultado`: verdadeiro se o componente estiver desabilitado. {#override-component-class__ul_nml_csy_cgb} |
   [Tabela 4. Funções do componente configurável]

   {#override-component-class__table_kml_csy_cgb}  
   {#override-component-class__table_p2n_psy_cgb__entry__2}

   | Nome de atributo | Descrição |
   |-|-|
   | isSettable: verdadeiro | Identifica o componente como um componente de página configurável. |
   [Tabela 5. Atributo de componente configurável]

   {#override-component-class__table_p2n_psy_cgb}
4. Ao criar seu componente personalizado no Jelly, adicione\<g2:atf_only\> marcadores em torno do objeto JavaScript especificado no atributo `sn-atf-class` .  
   Esses marcadores garantem que o sistema execute somente o objeto JavaScript durante o teste automatizado.
{#override-component-class__steps_jyp_gkz_1gb}

### Exemplo

    //A custom clickable component

    <form>
         <div sn-atf-class="MyClickableComponent">
             <label for="a_clickable_checkbox">MyClickableComponent</label>
             <input type="checkbox" id="a_clickable_checkbox" checked="true"/>
         </div>
    </form>
    <script>
    var MyClickableComponent = {

        // The constructor must have this signature, but you can perform additional setup after the $super(element, area) call
        initialize: function($super, element, area) {
            $super(element, area);
        },

        click: function() {
            document.getElementById('a_clickable_checkbox').click();
            return {success: true};
        },

        // The function returns an object with a result attribute of type String
        getValue: function() {
            var isChecked = document.getElementById('a_clickable_checkbox').checked ? "true" : "false";
            return {success: true, result: isChecked};
        },

        // The function returns an object with a result attribute of type Boolean
        isDisabled: function() {
            if (document.getElementById('a_clickable_checkbox').disabled)
                return {success: true, result: true};

            return {success: true, result: false};
        },

    };
    </script>

    //A custom settable component

    <form>
        <div sn-atf-class="MySettableComponent">
            <label for="a_settable_checkbox">MySettableComponent</label>
            <input type="checkbox" id="a_settable_checkbox" checked="true"/>
        </div>
    </form>
    <script>
    var MySettableComponent = {

        // This attribute is required for settable components
        isSettable: true,

        // The constructor must have this signature, but you can perform additional setup after the $super(element, area) call
        initialize: function($super, element, area) {
            $super(element, area);
        },

        // The value parameter is a string
        setValue: function(value) {
            document.getElementById('a_settable_checkbox').checked = (value == "true");
            return {success: true};
        },

        // The function returns an object with a result attribute of type String
        getValue: function() {
            var isChecked = document.getElementById('a_settable_checkbox').checked ? "true" : "false";
            return {success: true, result: isChecked};
        },

        // The function returns an object with a result attribute of type Boolean
        isDisabled: function() {
            if (document.getElementById('a_settable_checkbox').disabled)
                return {success: true, result: true};

            return {success: true, result: false};
        },

    };
    </script>

## Seletor de referência e registro {#ariaid-title4}

Use etapas de IU personalizadas para manipular os valores das diretivas angulares `sn-reference-picker` e `sn-record-picker`. O valor em um seletor de referência retorna o `sys_id` do registro escolhido. O valor em um seletor de registro retorna o campo de valor escolhido para esse seletor de registro. Ambos os elementos podem ser definidos selecionando um registro para definir como seu valor.