[RPA] [UiPath] 엑셀 내용을 자동으로 웹사이트에 입력하기 - Selector / Anchor Base 활용 (수정중)

🔥 요구사항🔥

엑셀 파일에 저장된 데이터(이메일, 이름, 회사명 등의 정보)를 해당하는 항목에 맞게 자동 입력 후 사이트에 제출하는 프로그램을 만드시오.

---

 

 

 

위 태스크는 https://rpachallenge.com/?lang=EN  홈페이지에서 제공하는 과제이다.

Rpa Challenge

 

링크를 클릭해 보면 아래와 같은 구성으로 되어 있다.

• Instructions
• Download Excel -> 요 버튼을 누르면 정보 입력창에 넣을 수 있는 정보(First Name, Address, Phone Number, Email, Last name, Role in Company, Company Name)가 미리 기입되어 있는 엑셀 파일을 다운받을 수 있다.
• Start
• 정보입력창 + Submit

 

위 챌린지의 핵심은 "Selector 설정" 이다.

왜냐하면 submit을 실행할 때마다 각 정보 입력창의 위치가 바뀌기 때문이다. 때문에 selector를 설정시 UI의 위치 기반이 아닌 '항목의 텍스트 값을 기준'으로 selector를 설정해야 항목에 맞게 올바른 값이 입력된다.

 

그럼, 위 점을 기억하면서 한 번 문제를 해결해보자!

---

1. 엑셀을 먼저 열어서 해당 데이터를 DataTable로 받아와야 한다.

• Excel Application Scope : 엑셀 관련 액티비티를 사용하기 위해서는 이 친구를 꼭 먼저 써야 한다. 이 친구를 씀으로써 내 컴퓨터에 있던 excel 파일을 프로그램으로 끌어들여와 사용하겠다는 의미이다.

 

• Get Workbook Sheet : 위 경로에 있는 파일의 index 0 번째에 있는 sheet를 읽어오겠다는 소리이다. 받아온 시트명을 [ Properties > Output > Sheet ]를 통해 firstSheet 스트링 변수로 집어넣었다.
  • 🚨 잠깐!🚨 Read Range를 바로 쓰면 되는데 왜 굳이 시트값을 받아오지?
    • 왜냐하면, 실제로 현업에서 일을 할 때, 실무자가 시트명을 바꾸게 되는 경우가 있기 때문에 그런 경우를 미연에 대비하는 작업이다. :)

 

 

• Read Range : 이제! 해당 시트를 읽어서 데이터를 가져와 Datatable 변수에 저장해주자!
  • [ Properties > Input > SheetName ] : 받아온 시트명을 헷갈리지 않게 잘 입력해야 한다. 자잘한 실수는 이런 곳에서 은근히 발생한다.
  • [ Properties > Options > AddHeaders ] : 대부분의 excel 파일에는 헤더가 있는 형태로 작업되어 있을 테니 이 부분도 잊지 말고 체크해야 한다.
  • [ Properties > Output > DataTable ] : 미리 생성해둔, 엑셀 시트의 데이터를 담을 dt변수명 입력한다.

 

 

2. RPA 챌린지 웹사이트를 열고, 각 항목에 정보를 입력하고, 제출해보자.

• Use Browser : Use Browser는 브라우저 관련 작업을 하는, Modern버전의 액티비티이다. Classic 버전의 액티비티로 구성했다면, Open Browser -> Attach Browser 등을 이용했을 텐데 이번에는 체험 겸 Modern를 이용해보았다.
  • 🚨 주의🚨 이렇게 저렇게 시도해보니 Modern 액티비티와 Classic 액티비티를 섞어서 사용할 경우, 셀렉터가 잘 작동하지 않는다던지 등의 어이없는(?) 오류가 발생했던 경험이 있어, 최대한 하나의 버전으로 통일해서 써야할 것 같다. (액티비티 간의 호환성이 좋아지기 전까지는!)
  • 그리고 사실, Use Browser는 [ Properties > Options > Resize window ] 를 통해 윈도우 창 크기를 조절해줄 수 있다. (사용해보지는 않았지만, 아마 modern 버전이 나오기 전에는 maximize window로 창 크기를 키워줬을 건데 Modern 버전)

 

• Maximize Window
  • 작업 내용을 좀 더 잘 볼 수 있게 화면을 최대화 시키고, selector가 좀 더 잘 잡아주지 않을까..? 하는 마음에 .. ㅎㅎ 간단히 추가해놓은 액티비티!

 

엑셀에서 가져온 정보를 우리는 datatable 변수에 넣어두었다. 이걸 이제 해당 항목에 입력하도록 해야 하는데 이 작업을 하기 위해 데이터가 어떻게 생겼는지 한 번 보자.

항목 별로 예쁘게 잘 나열되어 있는 것을 볼 수 있다. 그렇다면 이제 우리는 이 데이터를 한 줄씩 훑어내려가면 입력을 해주면 되는 것이다!

 

• For Each Row in Data Table :  데이터를 한 줄씩 훑어내려가기 위해 사용하는 액티비티다. 데이터 테이블을 다룰 때 자주 쓰이는 액티비티이니 익숙해져야 한다.
  • Data Table : 엑셀 데이터를 저장한 데이터테이블 변수를 입력해주면 된다.
  • Item : CurrentRow 라고 이미 입력이 되어 있는데 이 친구가 이제 '한 줄씩 훑을 거다.' 하는 친구다.
• Type into : 가장 쉽게 하는 방법은, App/Web Recorder를 이용하는 방법이다. 아래 영상을 참고해서 진행해보면 어려운 점이 없을 것이다.
  • 여기서 흥미로운 포인트❕는 텍스트 input창을 선택하면 알아서 anchor까지 찾아낸다! type into 액티비티를 입력한 후 edit target에 들어가서 확인해보면 알아서 앵커를 잘 잡아준 것을 확인할 수 있다.
    • (이 기능은 아마 modern activity라 더 잘 잡는 게 아닐까 싶기도 하다.)

 

• Type this : 입력되어야 할 값을 지정해보자. 영상에 나온 것처럼 selector와 anchor를 잘 가져온 후, 텍스트 입력값만 바꿔주면 된다. 지금 작업은 For Each Row 안에서 진행되므로 CurrentRow를 적극 활용하자 :) 

입력값만 바꿔주고, submit 버튼 클릭 액티비티만 넣어주면 작업은 끝! 실행해보면 잘 돌아가는 것을 확인할 수 있다 :)

다들 한 번씩 해보면 쉽기도 하고, 금방 완성되는 걸 보면서 뿌듯함도 느낄 수 있으니 실습 꼭 한 번씩들 해보시길! (더 공부하고 싶은 사람은 아래로!)

 

 

---

( +++ Seletor 설정 심화 버전 +++ )

컴퓨터 성능에 따라 앵커를 잘 못 잡거나, 셀렉터가 잘 안 먹히는 경우가 왕왕 있다. 이럴 때는 그냥 html 개발자 도구를 열어서 class를 가져와서 입력해주면 된다.

입력은,

를 클릭하고 들어가서 Target > Fuzzy Selector에 코드 부분을 input 값만 남기고 모두 없애버리고, class 나 name 등을 넣어주면 된다.

 

 

 

---

질문은 언제든지 환영입니다☺️ 

댓글 남겨주세요!