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

  • 릴리스 버전: Xanadu
  • 업데이트 날짜 2024년 08월 01일
  • 읽기12분
  • 에 특정한 Automated Test FrameworkHTML 속성을 사용하여 특정 페이지 구성 요소의 테스트 속성을 변경합니다.

    시작하기 전에

    필요한 역할: admin

    이 태스크 정보

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

    sn-atf-clickable 및 sn-atf-settable 속성 사용

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

    시작하기 전에

    필요한 역할: admin

    프로시저

    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 사용)를 추가하고 구성 요소에 대한 사용자 지정 클릭 로직을 구현해야 합니다. 클릭 구성요소 테스트 단계를 사용하여 클릭 가능한 사용자 지정 구성요소와 상호 작용할 수 있습니다.
        표 1. 클릭 가능한 구성요소 속성
        특성 이름 설명
        sn-atf-disabled 값에 관계없이 이 선택적 특성이 있으면 ATF에 이 구성요소가 비활성화되었음을 알 수 있습니다
        주:
        이 속성이 누락된 경우 ATF는 이 구성 요소가 기본적으로 활성화된 것으로 간주합니다.
        sn-atf-component-value ATF에 이 구성요소의 현재 값을 알려주는 문자열 또는 JSON 객체
      • sn-atf-settable: sn-atf-settable 속성을 추가한 경우 ATF는 sn-atf-settable 속성이 있는 DOM 요소에 sn-atf-setvalue 이벤트를 전송하여 구성요소 값을 설정합니다. 이 DOM 요소에 이벤트 리스너(예: addEventListener 사용)를 추가하고 구성 요소에 대한 사용자 지정 값 설정 논리를 구현해야 합니다. 설정해야 하는 값은 event.detail.newvalue로 액세스할 수 있습니다. event 인수는 이벤트 처리기로 전달됩니다. 구성요소 값 설정 테스트 단계를 사용하여 사용자 지정 설정 가능 구성요소와 상호 작용할 수 있습니다.
        표 2. 설정 가능한 구성요소 속성
        특성 이름 설명
        sn-atf-disabled 값에 관계없이 이 선택적 특성이 있으면 ATF에 이 구성 요소가 비활성화되었음을 알 수 있습니다.
        주:
        이 속성이 누락된 경우 ATF는 이 구성 요소가 기본적으로 활성화된 것으로 간주합니다.
        sn-atf-component-value ATF에 이 구성요소의 현재 값을 알려주는 문자열 또는 JSON 객체입니다.
        sn-atf-데이터 유형 단계를 빌드할 때 사용자에게 표시할 필드의 선택적 유형입니다. 기본값은 문자열입니다. 예를 들어, glide_date_time, 참조, 부울 등이 있습니다.
        sn-atf-data-type-params 더 많은 데이터 유형 세부 정보가 포함된 JSON 객체입니다.

    //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 속성 사용

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

    시작하기 전에

    필요한 역할: admin

    이 태스크 정보

    테스트 디자이너는 사용자 정의 JavaScript 객체를 작성하고 컴포넌트에 sn-atf-class 속성을 할당하여 사용자 정의 컴포넌트에 사용할 수 있는 테스트 조치를 수동으로 지정할 수 있습니다. 속성 값을 구성요소 테스트 작업을 포함하는 JavaScript 객체의 이름으로 설정합니다. 테스트 가능한 사용자 지정 구성 요소는 클릭 가능하거나 설정할 수 있어야 하며, 이 분류에 따라 JavaScript 개체에 필요한 함수와 속성이 결정됩니다. 테스트 가능한 페이지 구성요소 요구 사항을 확인하십시오 사용자 지정 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 객체를 만들고 사용자 지정 페이지 구성요소를 클릭 가능 또는 설정 가능한 페이지 구성요소로 식별하는 데 필요한 함수와 속성을 추가합니다.
      표 3. 클릭 가능한 구성요소 기능
      함수 이름 설명
      초기화() 구성요소의 초기 값을 가져옵니다. 입력:
      $super(element, area)
      클릭() 구성요소를 선택합니다. 다음 속성을 가진 JSON 객체를 반환합니다.

      success: 구성요소를 클릭할 수 있으면 true입니다.

      주:
      UI 테스트 단계 지능형 대기 메커니즘을 트리거합니다.
      getValue()를 호출합니다. 요소의 값을 가져옵니다. 다음 속성을 가진 JSON 객체를 반환합니다.
      • success: 값이 검색되면 true입니다.
      • 결과: 구성 요소의 값입니다.
      isDisabled()를 호출합니다. 구성요소가 비활성화되었는지 여부입니다. 다음 속성을 가진 JSON 객체를 반환합니다.
      • success: 구성요소가 비활성화된 경우 true입니다.
      • 결과: 구성요소가 비활성화된 경우 true입니다.
      표 4. 설정 가능한 구성요소 기능
      함수 이름 설명
      초기화() 구성요소의 초기 값을 가져옵니다. 입력:
      $super(element, area)
      setValue(새 값) 구성요소의 값을 설정합니다. 아래의 두 번째 예를 참조하십시오. 다음 속성을 가진 JSON 객체를 반환합니다.

      success: 값이 설정된 경우 true입니다.

      주:
      UI 테스트 단계 지능형 대기 메커니즘을 트리거합니다.
      getValue()를 호출합니다. 요소의 값을 가져옵니다. 다음 속성을 가진 JSON 객체를 반환합니다.
      • success: 값이 검색되면 true입니다.
      • 결과: 구성 요소의 값입니다.
      isDisabled()를 호출합니다. 구성요소가 비활성화되었는지 여부입니다. 다음 속성을 가진 JSON 객체를 반환합니다.
      • success: 구성요소가 비활성화된 경우 true입니다.
      • 결과: 구성요소가 비활성화된 경우 true입니다.
      표 5. 설정 가능한 구성요소 속성
      특성 이름 설명
      isSettable: 참 구성요소를 설정 가능한 페이지 구성요소로 식별합니다.
    4. Jelly에서 사용자 지정 구성 요소를 만들 때 sn-atf-class 속성에 지정된 JavaScript 개체 주위에 <g2:atf_only> 태그를 추가합니다.
      이러한 태그는 시스템이 자동화된 테스트 중에 JavaScript 객체를 실행하도록 합니다.

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

    참조 및 기록 선택기

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