---
sourceDocument: 호주 애플리케이션 빌드 또는 수정
sourceDocumentLink: https://servicenow-prod.fluidtopics.net/r/ko-KR/application-development

 Release :

    - australia

ft:locale :

    - ko-KR

ft:publication_title :

    - 호주 애플리케이션 빌드 또는 수정

ft:clusterId :

    - cadev

bundleId :

    - cadev

workflow :

    - Development, Data, and Analytics


---

# 구성요소 테스트 작업 재정의

# 구성요소 테스트 작업 재정의 {#ariaid-title1}

* 릴리스 버전: Australia
* 
* 업데이트 날짜 2026년 03월 12일
* 
* ![](https://www.servicenow.com/docs/portal-asset/ico-clock) 소요 시간: 12분

에 특정한 HTML 속성을 사용하여 특정 페이지 구성요소의 테스트 속성을 변경합니다 Automated Test Framework.

## 시작하기 전에

필요한 역할: 관리자

## 이 태스크 정보

구성요소를 검색할 때 Automated Test Framework 설정 가능한 구성요소인지 또는 클릭 가능한 구성요소인지 여부와 같이 지원하는 상호 작용을 결정합니다. 구성요소를 설정할 수 있는 Automated Test Framework 경우 설정할 수 있는 필드 유형을 결정합니다. 사용자 지정 구성요소의 작업 또는 필드 유형을 잘못 결정하거나 구성요소에 하나의 엔터티로 처리해야 하는 여러 DOM 요소가 포함된 경우 Automated Test Framework 와 관련된 Automated Test FrameworkHTML 속성을 사용하여 명시적으로 설정합니다.

## sn-atf-clickable 및 sn-atf-settable 속성 사용 {#ariaid-title2}

`sn-atf-clickable` 및 `sn-atf-settable` 속성을 사용하여 요소와 해당 하위 요소를 사용자 지정 클릭 가능 또는 사용자 지정 설정 가능 구성요소로 처리하도록 지정합니다.

### 시작하기 전에

필요한 역할: 관리자

### 프로시저

1. 테스트하려는 사용자 지정 UI 페이지를 엽니다.
2. 테스트 중인 요소에 `sn-atf-clickable` 또는 `sn-atf-settable` 속성을 추가합니다.  

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

   주:  
   `sn-atf-clickable` 또는 `sn-atf-settable` 속성을 사용하여 요소를 사용자 지정 클릭 가능 또는 사용자 지정 설정 가능 구성요소로 처리해야 하는지 지정할 수 있습니다. 같은 요소에서 두 속성을 모두 사용할 수는 없습니다.
3. `sn-atf-clickable` 또는 `sn-atf-settable` 속성을 사용합니다.  
   * `sn-atf-clickable`: `sn-atf-clickable` 속성을 추가한 경우 ATF는 `sn-atf-clickable` 속성을 사용하여 DOM 요소에 `sn-atf-click` 이벤트를 전송하여 구성요소를 클릭합니다. 이 DOM 요소에 이벤트 수신기를 추가하고(예: `addEventListener` 사용) 구성요소에 대한 사용자 지정 클릭 논리를 구현해야 합니다. 구성요소 테스트 단계 [클릭을](https://servicenow-prod.fluidtopics.net/RzRZ4XjDBfT1Vi2RhpHiOA#atf-click-component "사용자 지정 UI 페이지에서 구성요소를 클릭합니다.") 사용하여 클릭 가능한 사용자 지정 구성요소와 상호작용할 수 있습니다. {#atf-override-component-class-02__table_r5q_gry_cgb__entry__2}

     | 속성 이름 | 설명 |
     |-|-|
     | sn-atf-비활성화 | 이 선택적 속성이 있으면(값에 관계없이) 이 구성요소가 비활성화되었음을 ATF에 알립니다. 주: 이 속성이 누락된 경우 ATF는 이 구성요소가 기본적으로 사용하도록 설정된 것으로 간주합니다. |
     | sn-atf-component-value | 이 구성요소의 현재 값을 ATF에 알려주는 문자열 또는 JSON 객체 |
     [표 1. 클릭 가능한 구성요소 속성]

     {#atf-override-component-class-02__table_r5q_gry_cgb}
   * `sn-atf-settable`: `sn-atf-settable` 속성을 추가한 경우 ATF는 `sn-atf-settable` 속성을 사용하여 DOM 요소에 `sn-atf-setvalue` 이벤트를 전송하여 구성요소 값을 설정합니다. 이 DOM 요소에 이벤트 수신기를 추가하고(예: `addEventListener` 사용) 구성요소에 대한 사용자 지정 세트 값 논리를 구현해야 합니다. 설정해야 하는 값은 `event.detail.newvalue`로 액세스할 수 있습니다. `이벤트` 인수가 이벤트 핸들러에 전달됩니다. [구성요소 값 설정](https://servicenow-prod.fluidtopics.net/RzRZ4XjDBfT1Vi2RhpHiOA#atf-set-component-values "사용자 지정 UI 페이지에서 구성요소 값을 설정합니다.") 테스트 단계를 사용하여 사용자 지정 설정 가능 구성요소와 상호작용할 수 있습니다. {#atf-override-component-class-02__table_kml_csy_cgb__entry__2}

     | 속성 이름 | 설명 |
     |-|-|
     | sn-atf-비활성화 | 값에 관계없이, 이 선택적 속성이 있으면 이 구성요소가 비활성화되었음을 ATF에 알립니다. 주: 이 속성이 누락된 경우 ATF는 이 구성요소가 기본적으로 사용하도록 설정된 것으로 간주합니다. |
     | sn-atf-component-value | ATF에 이 구성요소의 현재 값을 알려주는 문자열 또는 JSON 객체입니다. |
     | sn-atf 데이터 유형 | 단계를 빌드할 때 사용자에게 표시할 필드 유형(선택 사항)입니다. 기본값은 문자열입니다. 예를 들어 `glide_date_time`, 참조, 부울 등이 있습니다. |
     | sn-atf-data-type-params | 더 많은 데이터 유형 세부 정보가 포함된 JSON 객체입니다. |
     [표 2. 설정 가능한 구성요소 속성]

     {#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}

### 예

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

## sn-atf-class 속성 사용 {#ariaid-title3}

`sn-atf-class` 속성을 사용하여 클릭 가능하거나 설정 가능한 사용자 지정 구성요소를 테스트할 때 사용할 JavaScript 객체를 지정합니다. 사용자 지정 JavaScript 객체를 작성하여 사용자 지정 구성요소에 사용할 수 있는 테스트 작업을 지정합니다.

### 시작하기 전에

필요한 역할: 관리자

### 이 태스크 정보

테스트 디자이너는 사용자 지정 JavaScript 객체를 작성하고 구성요소에 `sn-atf-class` 속성을 할당하여 사용자 지정 구성요소에 사용할 수 있는 테스트 작업을 수동으로 지정할 수 있습니다. 속성 값을 구성요소 테스트 작업을 포함하는 JavaScript 객체의 이름으로 설정합니다. 테스트 가능한 사용자 지정 구성요소는 클릭 가능하거나 설정 가능해야 하며 이 분류는 JavaScript 객체에 필요한 기능과 속성을 결정합니다. 테스트 가능한 페이지 구성요소 요구 사항은 문서를 참조하십시오 [사용자 지정 UI 테스트 단계](https://servicenow-prod.fluidtopics.net/lTtOQRp8Xl0pTlVX0K6fdg "HTML 및 JavaScript 페이지 구성요소를 검색하고 이들이 지원하는 테스트 작업을 식별하여 UI 페이지 및 UI 매크로와 같은 사용자 지정 사용자 인터페이스를 테스트합니다.") .

### 프로시저

1. 테스트하려는 사용자 지정 UI 페이지를 엽니다.
2. 테스트 중인 요소에 `sn-atf-class` 속성을 추가하고 getValue(), setValue(), click() 또는 isDisabled() 함수를 처리하는 페이지에 포함된 JavaScript 객체의 이름으로 값을 설정합니다.  

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

3. `sn-atf-class` 속성에 지정된 JavaScript 객체를 만들고 사용자 지정 페이지 구성요소를 클릭 가능하거나 설정 가능한 페이지 구성요소로 식별하는 데 필요한 함수와 속성을 추가합니다.  
   {#override-component-class__table_r5q_gry_cgb__entry__2}

   | 함수 이름 | 설명 |
   |-|-|
   | 초기화() | 구성요소의 초기 값을 가져옵니다. 입력: $super(element, area) |
   | 클릭() | 구성요소를 선택합니다. 다음 속성이 있는 JSON 객체를 반환합니다. `성공`: 구성요소를 클릭할 수 있으면 예입니다. 주: UI 테스트 단계 지능형 대기 메커니즘을 트리거합니다. |
   | getValue() | 요소의 값을 가져옵니다. 다음 속성이 있는 JSON 객체를 반환합니다. * `성공`: 값이 검색되면 예입니다. * `결과`: 구성요소의 값입니다. {#override-component-class__ul_jym_3mm_wfb} |
   | isDisabled() | 구성요소를 사용하지 않도록 설정할지 여부입니다. 다음 속성이 있는 JSON 객체를 반환합니다. * `성공`: 구성요소가 비활성화된 경우 예입니다. * `결과`: 구성요소가 비활성화된 경우 예입니다. {#override-component-class__ul_ont_4qm_wfb} |
   [표 3. 클릭 가능한 구성요소 기능]

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

   | 함수 이름 | 설명 |
   |-|-|
   | 초기화() | 구성요소의 초기 값을 가져옵니다. 입력: $super(element, area) |
   | setValue(새 값) | 구성요소의 값을 설정합니다. 아래의 두 번째 예시를 참조하십시오. 다음 속성이 있는 JSON 객체를 반환합니다. `성공`: 값이 설정된 경우 예입니다. 주: UI 테스트 단계 지능형 대기 메커니즘을 트리거합니다. |
   | getValue() | 요소의 값을 가져옵니다. 다음 속성이 있는 JSON 객체를 반환합니다. * `성공`: 값이 검색되면 예입니다. * `결과`: 구성요소의 값입니다. {#override-component-class__ul_mml_csy_cgb} |
   | isDisabled() | 구성요소를 사용하지 않도록 설정할지 여부입니다. 다음 속성이 있는 JSON 객체를 반환합니다. * `성공`: 구성요소가 비활성화된 경우 예입니다. * `결과`: 구성요소가 비활성화된 경우 예입니다. {#override-component-class__ul_nml_csy_cgb} |
   [표 4. 설정 가능한 구성요소 기능]

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

   | 속성 이름 | 설명 |
   |-|-|
   | isSettable: 예 | 구성요소를 설정 가능한 페이지 구성요소로 식별합니다. |
   [표 5. 설정 가능한 구성요소 속성]

   {#override-component-class__table_p2n_psy_cgb}
4. Jelly에서 사용자 지정 구성요소를 만들 때 `sn-atf-class` 속성에 지정된 JavaScript 객체 주위에 `<g2:atf_only>` 태그를 추가합니다.  
   이러한 태그는 시스템이 자동화된 테스트 중에 JavaScript 객체만 실행하도록 합니다.
{#override-component-class__steps_jyp_gkz_1gb}

### 예

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

## 참조 및 기록 선택기 {#ariaid-title4}

사용자 지정 UI 단계를 사용하여 `sn-reference-picker` 및 `sn-record-picker` 각도 지시문의 값을 조작합니다. 참조 선택기의 값은 선택한 기록의 `sys_id` 반환합니다. 기록 선택기의 값은 해당 기록 선택기에 대해 선택된 값 필드를 반환합니다. 두 요소 모두 해당 값으로 설정할 기록을 선택하여 설정할 수 있습니다.