CloudWatch Canary GUI 워크플로 빌더에서 사용할 DOM 선택기 또는 XPath를 어떻게 식별할 수 있습니까?

최종 업데이트 날짜: 2020년 12월 14일

GUI 워크플로 빌더를 사용하여 Amazon CloudWatch에서 Canary를 만들려고합니다. 그러나 잘못된 DOM 요소를 선택했음을 나타내는 오류가 표시됩니다. 사용할 올바른 DOM 선택기 또는 XPath를 찾으려면 어떻게 해야합니까?

간략한 설명

GUI 워크플로 빌더로 Canary를 만들 때 잘못된 DOM 요소를 선택한 경우 다음과 같은 오류가 발생할 수 있습니다.

  • “오류: 노드가 표시되지 않거나 HTMLElement가 아닙니다.(Error: Node is either not visible or not an HTMLElement.)“
  • “테스트 결과가 반환되지 않았습니다.(No test result returned.) 오류: 브라우저 연결이 끊어졌기 때문에 탐색이 실패했습니다!“(Error: Navigation failed because browser has disconnected!")
  • “시간 초과 오류: 선택기 대기 중”("TimeoutError: Waiting for selector")
  • “시간 초과오류: XPath를 기다리는 중”("TimeoutError: Waiting for XPath")

해결 방법

올바른 선택기 유형 결정

GUI 워크플로 빌더에는 다섯 가지 작업이 있습니다. 필요한 선택기 유형은 사용하는 작업 및 런타임 버전에 따라 다릅니다.

Node.js 및 Puppeteer를 사용하는 런타임 버전에서는 [텍스트 확인] 작업은 XPath 선택기를 사용합니다. 다음 작업은 DOM 선택기를 사용합니다.

  • 클릭하기
  • 선택기 확인
  • 텍스트 입력
  • 내비게이션으로 클릭

Python과 Selenium 웹 드라이버를 사용하는 런타임 버전의 경우, 모든 작업은 XPath 선택기를 사용합니다.

올바른 선택기 식별

DOM 선택기

DOM에 대한 고유한 속성을 찾으려면 다음을 수행합니다.

  1. 요소에 대한 컨텍스트 메뉴(예: 버튼, 입력 필드, div, span 또는 h1)를 엽니다(오른쪽 클릭).
  2. [요소 검사(Inspect element)](Mozilla Firefox) 또는 [검사(Inspect)](Google Chrome)를 선택합니다.
  3. 요소를 식별하는 데 사용할 고유 DOM 속성(예: id, class 또는 name)에 유의하십시오.

DOM에 고유한 속성이 없으면 다음 방법 중 하나를 사용하여 요소를 찾습니다.

  • 하위 선택기를 사용하여 지정된 경로 또는 속성을 기반으로 요소를 일치시킵니다(정확한 경로를 사용해야 함). 예를 들어, <div class='new' id='newId'> <a href="/test1">test1</a> <a href="/test2">test2</a> <a href="/test3">test3</a> </div>를 찾으려면 div.new > a:first-child를 사용합니다.
  • 속성 선택기를 사용하여 지정된 속성의 존재 또는 값을 기준으로 요소를 일치시킵니다. 예를 들어, <div class="user-panel main" id="userId"> <input name="login"/> </div>를 찾으려면 div.user-panel.main input[name='login']을 사용합니다.

인터넷 브라우저의 개발자 모드를 사용하여 DOM 요소에 대한 고유한 DOM 선택기를 다운로드할 수도 있습니다.

Chrome:

  1. 요소에 대한 컨텍스트 메뉴를 열고(오른쪽 클릭) [검사(Inspect)]를 선택합니다.
  2. [요소(Elements)] 탭에서 강조 표시된 선에 대한 컨텍스트 메뉴를 엽니다(오른쪽 클릭).
  3. [복사(Copy)]를 선택한 다음 [선택기 복사(Copy selector)]를 선택합니다.

Firefox:

  1. 요소에 대한 컨텍스트 메뉴를 열고(오른쪽 클릭) [요소 검사(Inspect Elements)]를 선택합니다.
  2. [검사기(Inspector)] 탭에서 강조 표시된 선에 대한 컨텍스트 메뉴를 엽니다(오른쪽 클릭).
  3. [복사(Copy)]를 선택한 다음 [CSS 선택기(CSS selector)]를 선택합니다.

참고: HTML 문서에서 선택기의 여러 인스턴스가 있는 경우, Canary는 반환된 배열에서 첫 번째 요소를 선택합니다. display:none; CSS 속성을 포함하는 요소는 선택하지 마세요. 이러한 요소는 보이지 않으며 선택기의 실패 원인이 됩니다.

XPath 선택기

인터넷 브라우저의 개발자 모드를 사용하여 DOM 요소에 대한 고유 XPath 선택기를 가져옵니다.

Chrome:

  1. 요소에 대한 컨텍스트 메뉴를 열고(오른쪽 클릭) [검사(Inspect)]를 선택합니다.
  2. [요소(Elements)] 탭에서 강조 표시된 선에 대한 컨텍스트 메뉴를 엽니다(오른쪽 클릭).
  3. [복사(Copy)]를 선택한 다음 [XPath 복사(Copy XPath)]를 선택합니다.

Firefox:

  1. 요소에 대한 컨텍스트 메뉴를 열고(오른쪽 클릭) [요소 검사(Inspect Elements)]를 선택합니다.
  2. [검사기(Inspector)] 탭에서 강조 표시된 선에 대한 컨텍스트 메뉴를 엽니다(오른쪽 클릭).
  3. [복사(Copy)]를 선택한 다음 [XPath]를 선택합니다.

참고: Canary에 복사한 XPath 선택기를 추가하기 전에 “//”접두사를 제거합니다. Canary는 기본적으로 코드에 “//”접두사를 추가합니다.

새 선택기를 테스트하고 올바른지 확인합니다.

인터넷 브라우저에서 콘솔 모드 열기

Chrome:

  1. 브라우저 오른쪽 상단에서 [사용자 지정(Customize)]을 선택합니다.
  2. [기타 도구(More tools)] 옵션을 확장한 다음 [개발자 도구(Developer tools)]를 선택합니다.
  3. 브라우저에서 개발자 도구를 연 상태에서 [콘솔 패널(Console panel)]을 선택합니다.

Firefox:

  1. 브라우저의 상단 오른쪽에서 [메뉴 열기(Open menu)]를 선택합니다.
  2. [웹 개발자(Web Developer)]를 선택한 다음 [웹 콘솔(Web Console)]을 선택합니다.
    참고: Firefox의 일부 버전에서는 [웹 개발자(Web Developer)] 메뉴가 [도구(Tools)] 메뉴에 있습니다.

DOM 선택기 테스트

브라우저 콘솔에서 DOM 선택기 쿼리를 테스트하는 구문은 다음과 같습니다. document.querySelectorAll("[AttributeName='AttributeValue']") 예를 들어, id='username'이 있는 div 요소가 있는 경우 다음 패턴을 사용합니다. document.querySelectorAll("[name='username']")

XPath 선택기 테스트

브라우저 콘솔에서 XPath 쿼리를 테스트하는 구문은 다음과 같습니다. $x (“XPATH_QUERY”) 예를 들어 h1 요소가 포함된 id='welcome'이 있는 div 요소가 있는 경우 다음 패턴을 사용합니다. $x("//div[@id='welcome']//h1) 이 경로를 Canary에 추가할 때는 // 접두사를 생략합니다.

CloudWatch Canary에 새 선택기 추가

  1. CloudWatch 콘솔을 엽니다.
  2. [합성(Synthetics)]에 대해 [카나리아(Canaries)]를 선택합니다.
  3. [카나리아 만들기(Create Canary)]를 선택합니다.
  4. [Blueprint 사용(Use a blueprint)]을 선택한 다음 [GUI 워크플로 빌더(GUI Workflow Builder)]를 선택합니다.
  5. 새로 생성된 선택기를 사용하는 Blueprint를 완료하려면 GUI 워크플로 빌더의 예제를 참조하십시오.
  6. </ol

이 문서가 도움이 되었습니까?


결제 또는 기술 지원이 필요합니까?