화면 분석 도구 목록

Table of Contents

화면 분석 도구 목록 #

상황에 가장 적합한 분석 도구를 선택하는 것이 시나리오 완성도를 높이며, 가장 견고하고 빠르게 작성할 수 있는 최고의 방법입니다.
현재 Stego는 총 7가지의 화면 분석 도구와 외부 이미지를 이용한 Screenshot URL을 제공하고 있으며, 지속적인 연구 개발을 통해 업데이트를 계속 하고 있습니다.

OD(Object Detection) #

모바일 앱에서 일반적으로 사용되는 아이콘, 컴포넌트 등의 데이터를 학습한 AI 엔진이 화면을 분석하여 사용 가능한 화면 요소를 보여줍니다.

 

AI 엔진이 인식하는 화면 요소 유형은 아래와 같습니다.

  • Home
  • Back
  • HamburgerMenu
  • Search
  • SearchArea
  • Clickable
  • AD
  • More
  • Spinner
  • Swipe
  • EditText
  • Keyboard
  • Tabs
  • Close
  • Switch
  • Selectable

OD Result Inspector #

AI가 Object Detection으로 인식한 화면 요소에 대한 구체적인 정보는 화면 분석 패널 하단에 있는 “Inspector”를 클릭하면 확인할 수 있습니다.
“Inspector”를 클릭하면 인식한 화면 요소가 테이블 형태로 출력됩니다.

1. LABEL: 화면 요소의 유형을 나타냅니다.
2. TEXT: 화면 요소에 문자열이 포함되어 있을 경우 출력합니다.
3. BOX: 화면 요소의 화면상 위치 정보가 출력됩니다.

Inspector 테이블의 항목을 클릭하면 화면 분석 결과에 노란색으로 선택한 부분이 활성화됩니다.
반대로 화면 분석 결과에서 특정 화면 요소를 클릭해도 Inspector 테이블의 항목이 노란색으로 활성화됩니다.

(OD Inspector 활성화된 상태 예제)

OD Attributes #

OD를 사용한 스텝에서 화면 요소를 클릭하면 다양한 OD 속성을 설정할 수 있습니다.
OD 화면 요소 Attributes를 활용하는 방법은 “화면요소 세부설정“을 참고하세요.

  • Label: AI 엔진에서 구분하는 UI 유형
  • Text: 화면 요소에 있는 문자 정보와 테스트할 때 비교 조건을 설정할 수 있습니다.
    = : 화면 요소의 Text와 value가 똑같은지 검사합니다.
    *= : value로 설정한 값이 화면 요소의 Text에 포함되어 있는지 검사합니다.
    ^= : value로 설정한 값이 화면 요소의 Text에 시작 부분과 일치하는지 검사합니다.
    $= : value로 설정한 값이 화면 요소의 Text에 끝 부분과 일치하는지 검사합니다.
    search : 정규 표현식을 사용합니다. 화면 요소의 Text 일부 또는 전체가 정규 표현식과 일치하면 스텝을 실행합니다.
    not used : Text를 비교 조건으로 사용하지 않습니다.
  • Text Similarity(Threshold): 문자열 유사도를 뜻합니다. (비교 조건이 ‘=’ 일 때만 사용 가능)
    시나리오 작성 당시와 테스트 실행 당시 문자 정보가 얼마나 동일해야 통과할지를 설정할 수 있습니다.
    AI 특성상 동일 문자열을 인식할 때 해상도 및 기타 환경에 따라서 약간의 오인식이 발생 할 수 있습니다. 이런 경우 유사도를 조절해서 작성할 수 있습니다.
    값이 높을 수록 비교 정확도가 올라갑니다.
    – 기본값: 0.8
    – 최소값: 0
    – 최대값: 1
  • Case Sensitive: 알파벳 문자의 경우 대소문자 구분 여부를 설정할 수 있습니다.
  • Selector: 테스트를 진행할 때 화면 요소와 일치하는 요소가 여러개 나왔을 때 몇번째 요소를 사용할지 지정합니다.
    0을 제외한 정수값으로 설정 가능합니다. (참고: ‘-1’을 입력했을 경우 맨 마지막 요소를 사용합니다.)

OCR (Optical Character Recognition) #

화면에 있는 문자 정보를 읽어서 화면 요소로 제공해 줍니다.
현재 읽을 수 있는 문자는 한글,  영어,  숫자,  일부 특수문자입니다.


OCR은 기본적으로 단어 단위로 인식합니다.

만약 여러개의 단어로 이루어진 문장을 하나의 화면 요소로 사용해야 할 경우에는
드래그&드롭으로 여러개의 단어를 포함하여 하나의 화면 요소로 사용할 수 있습니다.

OCR Result Inspector #

OCR로 인식한 단어에 대한 구체적인 정보는 화면 분석 패널 하단에 있는 “Inspector”를 클릭하면 확인 할 수 있습니다.
“Inspector”를 클릭하면 인식한 단어 목록이 테이블 형태로 출력됩니다.

  1. TEXT: 인식한 단어 내용이 출력됩니다.
  2. BOX: 단어의 화면상 위치 정보가 출력됩니다.

Inspector 테이블의 항목을 클릭하면 화면 분석 결과에 노란색으로 선택한 부분이 활성화 됩니다.
반대로 화면 분석 결과에서 특정 화면 요소를 클릭해도 Inspector 테이블의 항목이 노란색으로 활성화 됩니다.


(OCR Inspector 활성화된 상태 예제)

OCR Attributes #

OCR을 사용한 스텝에서 화면 요소를 클릭하면 다양한 OCR 속성을 설정할 수 있습니다.
OCR 화면 요소 Attributes를 활용하는 방법은 “화면요소 세부설정“을 참고하세요.

  • Text: 화면 요소에 있는 문자 정보와 테스트할 때 비교 조건을 설정할 수 있습니다.
    =  : 화면 요소의 Text와 value가 똑같은지 검사합니다.
    *= : value로 설정한 값이 화면 요소의 Text에 포함되어 있는지 검사합니다.
    ^= : value로 설정한 값이 화면 요소의 Text에 시작 부분과 일치하는지 검사합니다.
    $= : value로 설정한 값이 화면 요소의 Text에 끝 부분과 일치하는지 검사합니다.
    search : 정규 표현식을 사용합니다. 화면 요소의 Text 일부 또는 전체가 정규 표현식과 일치하면 자식 스텝을 실행합니다. ​
    not used : Text를 비교 조건으로 사용하지 않습니다.
  • Ignore Line Break: 줄 바꿈을 무시하고 Text가 일치하는지 판단합니다.(비교 조건이 ‘=’ 일 때만 사용 가능)
  • Text Similarity(Threshold): 문자열 유사도를 뜻합니다.(비교 조건이 ‘=’ 일 때만 사용 가능)
    시나리오 작성 당시와 테스트 실행 당시 문자 정보가 얼마나 동일해야 통과할지를 설정할 수 있습니다.
    AI 특성상 동일 문자열을 인식할 때 해상도 및 기타 환경에 따라서 약간의 오인식이 발생 할 수 있습니다. 이런 경우 유사도를 조절해서 작성할 수 있습니다.
    값이 높을 수록 비교 정확도가 올라갑니다.
    – 기본값: 0.8
    – 최소값: 0
    – 최대값: 1
  • Case Sensitive: 알파벳 문자의 경우 대소문자 구분 여부를 설정할 수 있습니다.
  • Font Style Sensitivity: 폰트 스타일의 유사도 구분 여부를 설정할 수 있습니다.
  • Selector: 테스트를 진행할 때 화면 요소와 일치하는 요소가 여러개 나왔을 때 몇번째 요소를 사용할지 지정합니다.
    0을 제외한 정수값으로 설정 가능합니다. (참고: ‘-1’을 입력했을 경우 맨 마지막 요소를 사용합니다.)

Crop Image #

화면에 나타나는 그림을 찾을 때 사용하는 화면 분석 도구입니다.

작성자가 디바이스 화면에서 직접 드래그&드롭으로 영역을 지정합니다.
이렇게 선택된 화면 요소는 해당 영역의 이미지를 “Feature Matching” 기법을 사용하여 디바이스에서 비슷한 화면을 찾습니다.

Crop Image로 화면 요소를 만들 때는 몇가지 주의 사항이 있습니다.

1. 단순한 이미지 보다는 복잡한 이미지가 인식률이 높습니다.

이미지의 특징점을 추출해서 비교대상으로 사용하기 때문에,
간단한 이미지 보다는 복잡한 이미지 일수록 추출되는 특징점들이 많아서 인식률이 높아집니다.

2. 이미지를 선택할때 되도록 바탕화면이 포함되지 않도록 지정하면 인식률이 높아집니다.

이는 단색 영역의 비중이 높아질수록 상대적으로 특징점 비율이 낮아지기 때문입니다.
바탕화면 영역까지 포함해서 지정했을 때 보다 바탕화면 영역을 최소한으로 잡히도록 지정하는 것이 인식률이 더 높습니다.

    • 바탕화면 영역까지 포함해서 지정했을 때 :
    • 바탕화면 영역을 최소한으로 지정했을 때 : 

Crop Image Attributes #

Crop Image를 사용한 스텝에서 화면 요소를 클릭하면, 이미지 좌표를 수정할 수 있습니다.

  • Left: 화면 요소의 좌측 상단 X 좌표
  • Top: 화면 요소의 좌측 상단 Y 좌표
  • Right: 화면 요소의 우측 하단 X 좌표
  • Bottom: 화면 요소의 우측 하단 Y 좌표

 

Custom Box #

화면에서 특정 범위를 지정할 때 사용하는 화면 분석 도구입니다.

작성자가 디바이스 화면에서 직접 드래그&드롭으로 영역을 지정합니다.
주로 스크롤, 스와이프 등 특정 화면 요소보다는 면적 기반의 액션을 수행할 때 사용됩니다.

Custom Box Attributes #

Custom Box를 사용한 스텝에서 화면 요소를 클릭하면, 영역 좌표를 수정할 수 있습니다.

  • Left: 화면 요소의 좌측 상단 X 좌표
  • Top: 화면 요소의 좌측 상단 Y 좌표
  • Right: 화면 요소의 우측 하단 X 좌표
  • Bottom: 화면 요소의 우측 하단 Y 좌표

 

Full Screen #

화면 전체를 화면 요소로 설정할 때 사용됩니다.


주로 전체 영역을 스크롤하거나 스와이프 할 때 쓰입니다.
Custom Box와 유사하지만 영역을 지정할 필요 없이 전체 화면을 바로 사용할 수 있는 점이 다릅니다.

Full Screen Attributes #

Full Screen의 경우 속성을 수정할 수 없습니다.

  • Left: 화면 요소의 좌측 상단 X 좌표
  • Top: 화면 요소의 좌측 상단 Y 좌표
  • Right: 화면 요소의 우측 하단 X 좌표
  • Bottom: 화면 요소의 우측 하단 Y 좌표

 

Accessibility #

DRM으로 인해 미러링 화면이 정상적으로 보여지지 않을 경우(검은 화면 혹은 보안 영역이 노출되지 않는 경우)에 사용합니다.

Accessibility의 경우 Inspector를 사용해서 선택 후 드래그&드롭으로 설정하는 것이 좋습니다.

 

Accessibility Result Inspector #

Accessibility로 분석된 화면 요소는 화면 분석 패널 하단에 있는 “Inspector”를 클릭하면 확인할 수 있습니다.
“Inspector”를 클릭하면 인식한 화면 요소가 테이블 형태로 출력됩니다.

  1. IDENTIFIER: 화면 요소를 식별하는 문자열이 제공될 경우 출력합니다. 
  2. TYPE: 화면 요소의 유형을 나타냅니다.
  3. TEXT: 화면 요소에 문자열이 포함되어 있을 경우 출력합니다.
  4. BOX: 화면 요소의 화면상 위치 정보가 출력됩니다.

Inspector 테이블의 항목을 클릭하면 화면 분석 결과에 노란색으로 선택한 부분이 활성화됩니다.
반대로 화면 분석 결과에서 특정 화면 요소를 클릭해도 Inspector 테이블의 항목이 노란색으로 활성화됩니다.


(Accessibility Inspector 활성화된 예제)

 

Accessibility Attributes #

Accessibility를 사용한 스텝에서 화면 요소를 클릭하면 Accessibility 속성을 설정할 수 있습니다.

  • Identifier: 테스트 디바이스에서 제공하는 UIObject 식별용 문자열을 나타냅니다.
    =  : 화면 요소의 Identifier와 value가 똑같은지 검사합니다.
    not used : Identifier를 비교 조건으로 사용하지 않습니다.
  • Type: 테스트 디바이스에서 제공하는 UIObject 유형
    =  : 화면 요소의 Type과 value가 똑같은지 검사합니다.
    not used : Type을 비교 조건으로 사용하지 않습니다.
  • Text: 화면 요소에 있는 문자 정보와 테스트할 때 비교 조건을 설정할 수 있습니다.
    =  : 화면 요소의 Text와 value가 똑같은지 검사합니다.
    *= : value로 설정한 값이 화면 요소의 Text에 포함되어 있는지 검사합니다.
    ^= : value로 설정한 값이 화면 요소의 Text에 시작 부분과 일치하는지 검사합니다.
    $= : value로 설정한 값이 화면 요소의 Text에 끝 부분과 일치하는지 검사합니다.
    search : 정규 표현식을 사용합니다. 화면 요소의 Text 일부 또는 전체가 정규 표현식과 일치하면 자식 스텝을 실행합니다. ​
    not used : Text를 비교 조건으로 사용하지 않습니다.
  • Text Similarity(Threshold): 문자열 유사도를 뜻합니다.(비교 조건이 ‘=’ 일 때만 사용 가능)
    시나리오 작성 당시와 테스트 실행 당시 문자 정보가 얼마나 동일해야 통과할지를 설정할 수 있습니다.
    AI 특성상 동일 문자열을 인식할 때 해상도 및 기타 환경에 따라서 약간의 오인식이 발생 할 수 있습니다. 이런 경우 유사도를 조절해서 작성할 수 있습니다.
    값이 높을 수록 비교 정확도가 올라갑니다.
    – 기본값: 0.8
    – 최소값: 0
    – 최대값: 1
  • Case Sensitive: 알파벳 문자의 경우 대소문자 구분 여부를 설정할 수 있습니다.
  • Selector: 테스트를 진행할 때 화면 요소와 일치하는 요소가 여러개 나왔을 때 몇번째 요소를 사용할지 지정합니다.
    0을 제외한 정수값으로 설정 가능합니다. (참고: ‘-1’을 입력했을 경우 맨 마지막 요소를 사용합니다.)

 

Relative #

내용이 실시간으로 바뀌어서 OD나 OCR로 화면 요소를 지정하기 애매할 경우,
변하지 않는 화면 요소를 기준 삼아 상대 위치 기반으로 화면 요소를 지정해야 할 때 사용합니다.

기준점은 OD나 OCR, Crop Image 를 사용해 설정한 화면 요소가 사용되며 노란색으로 표시되고,
실제로 사용될 화면 요소는 드래그&드롭으로 선택해서 설정하며 파란색으로 표시됩니다.

자세한 사용법은 아래 예제를 참고하세요.
– 예제3. 특정 위치 단어 확인
– 예제5. 조건문 액션 사용하기

Relative Attributes #

Relative 화면 요소는 기준점과 Relative 두 가지에 대한 Attributes를 각각 제공합니다.

기준점 Attributes
기준점 설정에 사용한 화면 분석 도구의 Attributes를 참고하세요.

OD Attributes
OCR Attributes
Crop Image Attributes

Relative Attributes

  • Left : 화면 요소의 좌측 상단 X 좌표
  • Top : 화면 요소의 좌측 상단 Y 좌표
  • Right : 화면 요소의 우측 하단 X 좌표
  • Bottom: 화면 요소의 우측 하단 Y 좌표

Screenshot URL   #

디바이스의 미러링 화면을 분석하는 것 뿐만 아니라 디바이스 연결 없이 이미지 URL을 이용해 불러온 이미지의 화면을 분석할 수도 있습니다.
테스트 실행 결과에서 시나리오 수정 사항이 발견되었을 때 디바이스를 연결하여 상황을 재현하는 것 보다 해당 기능을 사용하면 편리하게 시나리오를 수정할 수 있습니다.


① ‘Add screenshot URL’ 버튼을 클릭합니다.
② Screenshot URL 입력 팝업의 입력창에 화면 분석할 외부 이미지의 URL(이미지 주소)을 입력합니다.
③ ‘OK’ 버튼을 클릭하면 URL을 통해 이미지를 가져온 다음 화면 분석을 실시합니다. 


(apptest.ai의 Blog 게시글 중 이미지 URL을 이용하여 OCR로 화면 분석한 화면)