[UiPath 기초] 4. 셀렉터(Selector) - 3

그 누가 알았으랴! Daum이 실시간 검색어 서비스를 닫을줄이야 ㅠㅠ
해당 예제는 Daum 실시간 검색어 서비스가 폐쇄된 관계로 더 이상 동작하지 않습니다.
셀렉터에 대한 개념을 익히는 자료로 봐주시기 바랍니다.

 

"이거 심각한데요? 큰 병원으로 가셔야겠습니다."

지난시간에 우리는 2의 저주(?)에 휘말려 1위 외는 다 2개씩 글자를 표시하는 결과가 나왔습니다. 이번시간엔 셀렉터의 종합병원(?) 수준인 UI Explorer 기능을 통해 왜 그렇게 나왔는지, 그리고 어떻게 해야 수정할 수 있는지 알아보는 시간을 가지겠습니다.

 

1. Internet Explorer로 다음사이트 열기

본격적인 수정작업에 앞서 정상적인 Selector 타겟팅 확인 및 편집을 위해 daum.net 사이트를 열어주세요.

 

2. UI Explorer 열기

문제가 발생한 2순위 Get Text 액티비티에서 햄버거 버튼을 눌러 'UiExplorer에서 열기'를 클릭 해주세요.

셀렉터를 정상적으로 찾을 수 있는 상태라면 아래와 같이 '유효성 검사' 정상 표시와 함께 상당히 복잡한 내용들이 나열된 화면을 만나보실 수 있을 것입니다. 다음 단계 진행전 각 뷰(View)에 대해 간략히 설명하겠습니다.

[시각적 트리]

시각적 트리는 타겟팅된 엘리먼트의 상하구조를 트리(Tree)형식으로 표시한 뷰입니다. 이번 예제가 Daum이라는 웹 사이트를 대상으로 데이터를 추출하는 자동화 예제이기 때문에 시각적 트리에 표시된 태그(</>)들은 Html 태그입니다. 

시각적 트리의 구조는 타겟팅된 대상의 상하관계와 동일합니다.

UI Explorer 에서의 트리

웹사이트의 Html 태그 트리

[속성 탐색기]

속성 탐색기는 타겟팅된 엘리먼트를 표현하는 모든 속성정보를 뜻합니다. 속성은 예시와 같이 HTML에서 사용하는 속성(class)은 물론 엘리먼트를 표시한 프로그램의 속성(app, appPath, hwnd 등)과 UI Path 자체적인 속성값 등이 표시됩니다.

속성에 대한 명칭과 값을 직접 셀렉터 태그에 입력할 수도 있습니다만, 무분별하게 사용할 경우 제대로된 타겟팅이 이뤄지지 않을 수 있으므로 추천하진 않습니다.

속성창에 명시된 app 속성과 class 속성을 직접 입력한 셀렉터 태그

[Selector 편집기]

셀렉터를 직접편집하는 화면입니다.

① 최상위 엘리먼트부터 타겟팅된 엘리먼트에 대한 셀렉터 태그가 표시되는 화면입니다. 체크버튼으로 추가하거나, 제거할 수 있습니다.

② 셀렉터에서 사용하지 않은 속성값을 추가하거나 제거할 수 있습니다.

③ 직접 셀렉터 태그를 편집하는 화면입니다.

 

3. innerText 항목 확인

이제 본론으로 돌아와 Selector 편집기 오른쪽에 있는 '선택되지 않은 항목' 중 innertext 항목에 마우스를 가져다 대보시기 바랍니다.

왜 오류가 난건지 긴가민가하지만 뭔가 실마리가 잡히는 것 같습니다. 좀 더 확실한 이해를 위해 innerText가 무엇인지 확인해볼 필요가 있겠습니다.

 

https://developer.mozilla.org/ko/docs/Web/API/Node/innerText

Node.innerText

모질라 재단의 전문적인 용어를 간략하게 풀이하자면 태그와 태그 사이에 있는 일반적인 문자열을 의미합니다.

<div>나는 innerText입니다.</div>

UiPath에선 별 다른 설정없이 웹 상에서 타겟팅한 엘리먼트의 데이터를 String 형식으로 스크래핑할 때, 보통 innerText 값을 가져오게 됩니다. 그런데 innerText는 태그 자기자신뿐만 아니라 하위 자식태그의 innerText값도 가져오는 특성이 있습니다. 따라서 "2위 ufc246 2위} ufc246"이란 문장은 현재 타겟팅된 엘리먼트(<div />)의 하위 태그들이 가지고 있는 innerText가 나열된 값입니다.

하위 태그들이 가진 innerText (준비과정중에 검색어 단어 순위가 바뀌었습니다. ㅜ_ㅜ)

이제 왜 오류가 난건지 정확하게 짚을 수 있게 된 것 같습니다. 너무 상위 태그를 선택했었군요. <li>태그 바로 아래에 잡혔던 <div> 태그보다 바로 아랫단계인 <div> 태그를 셀렉터로 설정하면 될 것 같습니다.

 

4. 하위 셀렉터로 변경

'시각적 트리' 뷰에서 선택된 <div> 태그의 하위태그를 마우스 오른쪽 버튼으로 선택한 뒤, "타겟 엘리먼트로 설정" 버튼을 눌러주시기 바랍니다.

 

선택후엔 셀렉터가 변경된 것을 확인할 수 있습니다.

뭔가 우리가 원하는 형태가 된것 같진 않습니다. 하지만 다행히도 '선택되지 않은 항목' 중에 필요한 속성이 눈에 보입니다.

 

5. parentClass 선택

변경된 '선택되지 않은 항목' 중 parentClass 속성을 선택해주세요.

parentClass는 타겟팅된 엘리먼트의 상위 엘리먼트가 가진 class 속성을 의미합니다. 사용되진 않았지만, 처음 타겟팅되었던 div 태그의 class 속성입니다. 해당 속성을 사용하도록 설정하면, "roll_txt @2" class 값을 가진 태그가 상위 태그임을 가리킵니다.

 

6. aaname 수정

지난시간에 익혔던 와일드카드(WildCard)를 이용해 aaname을 수정해 주세요.

7. 다른 순위(1,3,4,5)에 대해서도 설정완료 후 테스트

완성된 셀렉터 태그값을 복사한 뒤, 다른 순위(1,3,4,5)에도 동일하게 적용해주세요. 

 

* 1순위는 정상적으로 출력되었지만, 통일해서 셀렉터를 맞춰주시는게 관리적으로 유리합니다.

* 적용시 aaname 및 parentClass 값이 순위별로 다르다는 점을 유의하세요.

8. 테스트

F5를 눌러 출력된 로그를 확인합니다.

9. 뿌듯해하기

제대로 출력된 로그를 보며 셀렉터에 익숙해진 자신의 실력을 뿌듯해하시기 바랍니다.

 

이것으로 셀렉터를 선택하고 수정하여 원하는 데이터를 가져오는 방법을 익혀보았습니다.
그런데 뭔가 한가지 찜찜하게 있습니다.

"1순위는 왜 잘되었던 걸까?"

 

사실 지난 시간에 다뤘던 예제에서 1순위와 2~5순위간 셀렉터가 살짝 달랐던 부분이 있습니다. 그게 무엇일까요?

1순위 Selector

2순위 Selector

순서가 약간 달라 비교하기 어려울 수 있지만, aaname을 제외하고 속성값이 다른점이 1가지 더 있습니다. 바로 idx 인데요. 1순위의 idx는 '2'를 가리키지만 문제가 발생했던 2~5순위는 idx 값이 1을 가리키고 있었습니다.

그리고 이번 과정을 통해 수정한 Selector에선 idx 속성이 없어졌습니다.

없어진 idx 속성

무엇을 의미하는지 감이 오시나요? idx는 aaname과 마찬가지로, HTML 태그에선 존재하지 않는 UiPath만의 자체 속성입니다. 만약 셀렉터 태그값에 부합하는 엘리먼트가 2개 이상 존재할 경우, 정확하게 몇 번째 태그가 목표인지 설정하기위해 사용합니다. 지난시간의 경우 1순위가 가리킨 idx='2' 와 나머지순위가 가리킨 idx='1'을 비교하면 아래와 같습니다.

1순위와 나머지순위가 가리킨 div 태그의 차이

따라서 이번시간에 편집했던 과정을 생략하고 1순위처럼 idx값을 2로만 바꿔줘도 간단히 해결할 수 있긴합니다. 하지만 idx가 생긴다는건 그만큼 타겟을 식별할 수 있는 속성이 부족하다는 것을 의미하기도 하므로 가급적 idx가 없이 추출될 수 있도록 만드는게 좋습니다.

물론 추출해야할 대상 웹사이트가 매우 그지(?) 같은 경우엔 필수적으로 필요할 수 있으므로 적절한 판단이 필요합니다. 😅

 

4_셀렉터_3.zip

0.06MB