Shadow DOM 표준을 사용하는 웹 앱 자동화

일부 최신 웹 애플리케이션은 재사용 가능한 컨트롤에 대한 스타일 및 동작 캡슐화를 제공하기 위해 Shadow DOM 표준을 사용하여 이러한 컨트롤의 스타일과 스크립트가 페이지의 나머지 부분에 영향을 미치지 않도록 합니다. 일반 DOM을 통해 Shadow DOM 객체에 대한 직접 접근을 제한합니다.

레코더는 이러한 최신 애플리케이션의 객체 기반 자동화를 지원하여 원활한 자동화를 보장하고 자동화 실패의 위험을 최소화합니다.

자동화를 지원하려면 다음 속성을 사용할 수 있습니다.
  • Shadow-Root 경로: Shadow-Root 경로 속성을 사용하여 Shadow DOM 내의 요소를 식별하고 접근합니다. 이 속성은 레코더가 표준 DOM을 통해 직접 접근할 수 없는 캡슐화된 요소를 정확하게 찾고 자동화할 수 있도록 합니다. 모든 Shadow-Root 요소가 문자열 형식으로 나열된 JSON 배열로 표현되며, 레코더가 대상 요소를 검색할 경계를 정의합니다. 변수를 사용할 수 있지만, 와일드카드 문자(*)는 지원되지 않습니다. 이는 Shadow DOM 내에 있는 요소들의 기본 속성입니다.
    주: Shadow-Root 경로 속성을 선택하여 Shadow-Root 요소를 자동화하도록 하십시오. 웹 페이지 내에서 Shadow-Root 요소를 자동화할 때, 레코더는 먼저 ID로 특정 요소를 검색한 후 CSS 선택자로 검색합니다.

    Shadow-Root 요소를 자동화하는 속성

  • CSS 선택자: CSS 선택자는 DOMXPath와 유사하게 웹 페이지의 요소를 식별하고 상호작용하는 데 사용됩니다. CSS 선택자 속성을 사용하여 클래스, ID 또는 태그 이름과 같은 CSS 선택자 구문을 사용하여 DOM의 요소를 선택합니다. CSS 선택자는 속성을 기반으로 요소를 타게팅하는 데 사용됩니다. 요소가 Shadow DOM 내에 있는 경우, CSS 선택자는 Shadow-Root 경로 속성과 함께 사용해야 합니다. 변수를 사용할 수 있지만, 와일드카드 문자(*)는 지원되지 않습니다.
    주: 이 속성은 모든 HTML 요소에 사용할 수 있습니다.
    중요사항: CSS 선택자는 Google Chrome 확장 버전이 3.3.0.0 이상인 경우 최신 레코더 패키지 버전(3.3.1-20241001-095119)을 사용하지 않더라도 올바르게 작동합니다. 그러나 Google Chrome 확장 버전이 3.3.0.0보다 이전인 경우, 자동화가 성공적으로 실행되도록 CSS 선택자 속성을 선택 해제해야 합니다.
Shadow DOM 내에서 다음 요소를 캡처하고 자동화할 수 있습니다.
  • 텍스트 상자
  • 콤보 박스
  • 확인란
  • 버튼
  • 라디오 버튼
  • 링크
  • 라벨
  • 목록 보기
  • 테이블

지원 가능성

  • 이 기능은 Google ChromeMicrosoft Edge 브라우저에서 지원됩니다.
  • Frame과 IFrame(동일 도메인 및 교차 도메인)이 지원됩니다.
  • 다음 작업에서 Object existsObject does not exist 조건을 지원합니다. If, Loop > While 작업, Wait > Wait for condition 작업.
  • 모든 기존 HTML 컨트롤과 해당 작업을 지원합니다.
  • XenApp(비즈니스 애플리케이션)에 VMware Horizon, Citrix XenApp 및 XenApp(CR)을 지원합니다.

알려진 동작

  • DOMXPath 속성을 사용하여 Shadow-Root 요소를 자동화하는 것은 지원되지 않습니다.
  • 폐쇄된 Shadow-Root 요소 내의 요소에는 접근할 수 없습니다.
  • 모든 알고리즘으로 요소 검색은 지원되지 않습니다.
  • 중첩된 크로스 도메인 IFrame 내에서 Shadow-Root 요소를 자동화하는 것은 지원되지 않습니다.
  • 속성 가져오기 작업을 사용할 때 Shadow-Root 경로 속성은 값을 표시하지 않습니다.