안녕하세요. 엔지엠소프트웨어입니다. 웹업무 자동화를 하다보면 엘리먼트를 찾아서 클릭 및 텍스트 입력이 안될때가 있습니다. 이런 경우 대부분은 크게 2가지 문제가 있을 수 있습니다. 첫번째는 iframe안에 클릭하거나 텍스트를 입력할 엘리먼트가 존재하는 경우입니다. 두번째는 Shadow DOM으로 페이지가 만들어진 경우입니다. 첫번째 iframe의 경우에는 아래 예제글을 참고하세요.

[ 엔지엠 RPA 매크로 - 웹API를 사용해서 iframe에서 값 추출하는 방법. (정규식 액션 포함.) ]

 

오늘 알아볼 내용은 쉐도우 돔을 탐색하는 방법입니다. 테스트를 위해 엔지엠 매크로 에디터를 실행하세요.

 

 

테스트에 사용할 예제 사이트의 주소는 아래와 같습니다.

[ 쉐도우 돔 테스트 사이트 ]

 

 

구조를 보면 루트 쉐도우 돔(shadow_host)과 안에 서브 쉐도우 돔(nested_shadow_host)이 있습니다.

 

 

우선 첫번째 쉐도우 돔안에 있는 파일 선택 버튼을 클릭 해보도록 할께요. 스크립트 구조는 아래와 같습니다.

 

 

[ 연결 ] 액션에서 현재 실행중인 웹브라우저에 세션을 연결합니다. 웹드라이버도 자동으로 설치하도록 True로 변경하세요.

 

 

쉐도우 돔은 일반적인 엘리먼트 탐색으로는 가져올 수 있습니다. 따라서, 엘리먼트 목록 액션으로 가져온 쉐도우 돔의 엘리먼트를 변수에 저장해야 합니다.

 

 

[ 엘리먼트 목록 ] 액션을 추가하고, 속성을 아래와 같이 설정하세요. 여기에서 주의할점은 쉐도우 돔을 탐색할 때는 항상 CssSelector를 사용해야 합니다.

• 쉐도우 요소 이름: //*[@id="shadow_host"]
• 쉐도우 요소 형식: XPath
• 요소 이름: input[type=file]:nth-child(6)
• 요소 형식: CssSelector

 

 

엘리먼트 목록에서 쉐도우 엘리먼트를 가져왔습니다. 이 엘리먼트를 변수에 추가해주세요.

 

 

버튼은 아래와 같이 외부 엘리먼트로 쉐도우 돔에서 찾은 엘리먼트를 가져오면 됩니다.

 

 

매크로를 실행하면 아래와 같이 파일 선택 버튼을 클릭하고, 윈도우 탐색기가 실행됩니다.

 

 

이번에는 쉐도우 돔 안에 서브 쉐도우 돔을 어떻게 처리하는지 알아볼께요. 모든 내용은 동일하지만, 쉐도우 돔 안에 쉐도우 돔을 찾아야 해서 엘리먼트 목록 액션을 하나 더 사용해야 합니다. 변수로부터 외부 엘리먼트를 가져오고, 요소 형식과 요소 이름을 입력해야 합니다. 쉐도우 돔에서 탐색하기 때문에 CssSelector를 사용해야 합니다.

 

 

서브 쉐도우 돔에는 단순한 div 태그 하나만 있습니다. 그래서, div 태그 안에 텍스트 내용을 가져오도록 했습니다. 이미 엘리먼트를 가져왔기 때문에 외부 엘리먼트로 넣어주면 됩니다.

 

 

매크로를 실행하면 결과에 내용을 가져옵니다.

 

 

이 예제는 파일로 첨부되어 있습니다. 좀 더 디테일하게 분석하고 싶으시면 첨부 스크립트를 다운로드 받아서 열어보세요^^

 

개발자에게 후원하기

 

추천, 구독, 홍보 꼭~ 부탁드립니다.

여러분의 후원이 빠른 귀농을 가능하게 해줍니다~ 답답한 도시를 벗어나 귀농하고 싶은 개발자~

감사합니다~

추천0 비추천0