화면요소 세부설정

Table of Contents

시나리오를 완성하고 테스트하는 과정에서 예기치 않은 스텝에서 시나리오가 실패하는 경우가 발생할 수 있습니다.
이러한 상황에서는 UIObject Field 창에서 추가한 화면 요소를 검증하는 것을 권장드립니다. 스텝의 액션 오른쪽 공간을 클릭하여 UIObject Field 창을 열어 검증을 진행할 수 있습니다.

 

화면요소 검증방법 #

검증은 다음 순서로 시작할 수 있습니다.

① 검증할 화면요소를 선택해주세요.
② 검증방법을 선택해주세요.

검증방법은 Self/Device/UIObject Selector 3가지로 나뉩니다.

        • Self : 작성당시의 이미지로 검증합니다.
        • Device : 현재 활성화되어 있는 디바이스 화면으로 검증합니다.
        • UIObject Selector : URL 주소로 불러온 이미지로 검증합니다.

③ Compare 버튼을 눌러 검증을 시작해주세요.

검증이 완료되면 다음과 같은 화면이 출력됩니다.

① 작성당시의 이미지
② 결과 이미지
③ 매칭 결과 메시지

결과 메시지는 결과상태에 따라 다르게 표시합니다.

    • 테스트 성공 :
    • 테스트 실패 :
    • 테스트 실패 (다른 UI 매칭) :

 

화면 요소 매칭 정확도 높이기 #

목표 UI 요소를 식별하는 데 실패한 경우, UIOjbect 필드 창에서 추가된 화면 요소를 보완할 필요가 있습니다.
Stego에서 목표 UI 요소를 정확하게 탐색하는 방법은 다음의 세 가지가 있습니다.

  • 화면 요소를 추가하여 OCR 조건으로 확장하는 방법
  • 화면 요소의 속성(Attribute)을 수정하여 조건을 재정의하는 방법
  • 앵커(Anchor) 기능을 활용하여 화면 요소 간의 관계를 설정하는 방법

OCR 조건으로 찾는 방법 #

대부분의 화면 요소를 AI가 정확히 인식하지만, 간혹 인식에 실패하는 경우가 발생할 수 있습니다.

아래와 같은 상황에서 객체 탐지(Object Detection, OD) 방법으로 “로그인” 버튼을 찾지 못했을 경우,
OCR(Optical Character Recognition) 방법을 사용하여 “로그인”이라는 텍스트를 인식하고 해당 위치를 눌러서 화면 요소를 처리할 수 있도록 구현 가능합니다.

  1. 스텝의 액션 오른쪽 공간을 클릭하여 UIObject Field 창을 엽니다.
  2. OCR 방법으로 분석된 화면에서 화면 요소를 지정된 영역으로 Drag and Drop 합니다.
  3. OCR로 인식된 “로그인” 텍스트 화면 요소가 추가됩니다

 

Attribute를 수정하는 방법 #

Attribute는 테스트 수행 시 동일한 정보를 가진 UI를 매칭하기 위한 기준입니다.
OD, OCR, CropImage 각각의 방법에 따라 제공되는 정보가 다르며, 상세 정보를 수정하여 원하는 타겟을 정확하게 매칭할 수 있습니다.

Attribute 수정을 통해 수행할 수 있는 작업은 다음과 같습니다.

  • 매칭 기준을 강화하여 보다 정확한 UI 매칭 시도
  • 화면에 매칭된 여러 UI 요소 중 N번째 UI를 선택하여 매칭 시도

정확한 UI 매칭 시도 #

Stego는 보다 안정적인 시나리오 작성을 위해 기본적으로 설정된 매칭 기준이 엄격하지 않습니다.

때문에 작성 당시 왼쪽 이미지에서 “launched”라는 글자를 찾을 때,
매칭 결과를 표시하는 오른쪽 이미지에서 유사한 글자인 “launche” 항목이 매칭될 수 있습니다.


(의도와 다르게 타겟이 매칭된 예시)

“launched”와 “launche”가 매칭된 이유는 Text Similarity 값이 0.87로 설정된 0.8보다 높기 때문입니다.
Text Similarity 값을 1로 수정하면 원하는 타겟만 매칭할 수 있습니다.


(의도와 맞게 타겟이 매칭된 예시)

Text Similarity 값 이외에도 다양한 속성값을 수정하여 원하는 타겟을 찾을 수 있습니다.
속성값에 대한 설명은 “화면 분석 도구 목록”를 참고해주세요.

N번째 UI 매칭 시도 #

화면상에 타겟의 Attribute 값과 같은 UI가 여러개가 존재할 경우, Selector 값을 수정하여 N번째 UI를 매칭할 수 있습니다.
예를 들어, 아래 화면에 “test” 단어가 8개 있을 경우, 기본 조건으로 매칭하면 URL 영역에 위치한 “test” 단어가 매칭됩니다.


(의도와 다르게 타겟이 매칭된 예시)

화면에서 다섯 번째 “test” 단어를 찾아야 할 경우, “Selector=5”로 설정하거나 화면의 아래부터 요소를 찾는 “-” 기능을 이용해 “Selector=-3”로 설정할 수 있습니다.


(의도와 맞게 타겟이 매칭된 예시)

 

Anchor 기능을 활용하는 방법 #

N번째 매칭 외에도 특정 UI를 기준으로 화면 요소를 찾는 Anchor 기능을 사용할 수 있습니다.
이 기능은 Stego 1.10.x 버전부터 지원됩니다.

기능설명 #

Anchor 기능은 다음과 같이 설명할 수 있습니다.

  1. Anchor 화면요소 매칭
    • 첫 번째 단계는 ‘Anchor’ 라고 불리는 기준이 되는 화면 요소를 식별하고 매칭하는 과정입니다. 이 단계에서는 사용자가 지정한 Anchor 요소를 화면에서 찾고 이를 확인합니다.
  2. Target 화면요소 매칭
    • 두 번째 단계에서는 ‘Target’이라고 불리는 목표 화면 요소를 찾습니다. 이 요소는 Anchor 요소와 관계를 형성하는 대상이며, Target 요소를 정확하게 식별하고 매칭하는 것이 중요합니다.
  3. Anchor와 Target의 위치정보 관계 확인
    • 마지막 단계에서는 Anchor 요소와 Target 요소 간의 위치 정보를 바탕으로 이들 간의 관계를 확인합니다. 이 관계는 주로 두 요소 간의 거리, 방향 또는 상대적인 위치 등을 포함합니다.
      이 단계에서 위치 관계가 명확하게 규명되면, 이후의 처리나 액션이 결정됩니다.

이러한 과정을 통해 시스템은 화면 내에서 특정 요소들 간의 관계를 이해하고 이를 기반으로 추가적인 작업을 수행할 수 있게 됩니다.

Points of the compass - Wikipedia

위치 정보 기준은 Anchor를 중심으로 Target이 8방향 중 어느 방향에 위치하는지 확인합니다. Anchor가 추가되면 Stego에서 자동으로 반영됩니다.

사용방법 #

Anchor 요소는 다음의 순서로 추가하실 수 있습니다.

① Authoring Screen 오른쪽의 +버튼 클릭하여, 작성당시의 이미지를 불러옵니다.
② 이미지에서 원하는 화면분석 종류를 선택하여 화면요소를 +버튼으로 Drag And Drop 합니다.

추가된 Anchor 요소는 보라색 영역으로 표시되며, 마우스로 클릭하여 수정 및 삭제하실 수 있습니다.

         

Anchor는 최대 3개까지 추가할 수 있으며, 테스트를 수행할 때 추가한 모든 Anchor가 있어야 Target과 매칭이 됩니다.

Anchor 매칭 화면 상세분석 #

Result Screen의 우측에 위치한 Show Details 스위치를 활성화하면 다양한 UIObject에 대한 분석 결과를 색상으로 확인할 수 있습니다.
또한, Result Screen의 도움말 버튼에 마우스를 오버하면 UIObject 색상에 대한 설명을 확인할 수 있습니다.