CloudWatch canary GUI Workflow Builder에서 사용할 DOM 선택기 또는 XPath를 식별하려면 어떻게 해야 합니까?

간략한 설명

GUI Workflow Builder로 canary를 생성할 때 잘못된 DOM 요소를 선택한 경우 다음과 같은 오류가 발생할 수 있습니다.

• "오류: 노드가 보이지 않거나 HTML 요소가 아닙니다.”
• “테스트 결과가 반환되지 않았습니다. 오류: 브라우저 연결이 끊어졌기 때문에 탐색에 실패했습니다!"
• “TimeoutError: 선택기를 기다리는 중”
• “TimeoutError: XPath를 기다리는 중”

해결 방법

올바른 선택기 유형 결정

GUI Workflow Builder에는 5개의 작업이 있습니다. 필요한 선택기 유형은 사용하는 작업 및 런타임 버전에 따라 다릅니다.

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

• 클릭
• 선택기 확인
• 텍스트 입력
• 탐색과 함께 클릭

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

올바른 선택기 식별

DOM 선택기

DOM의 고유한 속성을 찾으려면:

1. 요소(예: 버튼, 입력 필드, div, span 또는 h1)에 대한 컨텍스트(마우스 오른쪽 버튼 클릭) 메뉴를 엽니다.
2. 요소 검사(Mozilla Firefox) 또는 검사(Google Chrome)를 선택합니다.
3. 요소를 식별하는 데 사용할 수 있는 고유한 DOM 속성(예: ID, 클래스 또는 이름)을 기록합니다.

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

• 하위 선택기를 사용하여 지정된 경로 또는 속성을 기준으로 요소를 일치시킵니다. 정확한 경로를 사용해야 합니다. 예를 들어, 찾으려면 <div class='new' id='newId'> <a href="/test1">테스트 1</a> <a href="/test2">테스트 2</a> <a href="/test3">테스트 3</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. 요소의 컨텍스트 메뉴(마우스 오른쪽 버튼 클릭)를 연 다음 검사를 선택합니다.
2. 요소 탭에서 강조 표시된 줄의 컨텍스트(마우스 오른쪽 버튼 클릭) 메뉴를 엽니다.
3. 복사를 선택한 다음 복사 선택기를 선택합니다.

Firefox:

1. 요소의 컨텍스트 메뉴(마우스 오른쪽 버튼 클릭)를 연 다음 요소 검사를 선택합니다.
2. 검사 탭에서 강조 표시된 줄의 컨텍스트(마우스 오른쪽 버튼 클릭) 메뉴를 엽니다.
3. 복사를 선택한 다음 CSS 선택기를 선택합니다.

**참고:**HTML 문서에 선택기의 인스턴스가 여러 개 있는 경우 canary는 반환된 배열에서 첫 번째 요소를 선택합니다. display:none; CSS 속성이 포함된 요소는 선택하지 말아야 합니다. 이러한 요소는 보이지 않으므로 선택기가 실패합니다.

XPath 선택기

인터넷 브라우저의 개발자 모드를 사용하여 DOM 요소에 대한 고유한 XPath 선택기를 얻으십시오.

Chrome:

1. 요소의 컨텍스트 메뉴(마우스 오른쪽 버튼 클릭)를 연 다음 검사를 선택합니다.
2. 요소 탭에서 강조 표시된 줄의 컨텍스트(마우스 오른쪽 버튼 클릭) 메뉴를 엽니다.
3. 복사를 선택한 다음 XPath 복사를 선택합니다.

Firefox:

1. 요소의 컨텍스트 메뉴(마우스 오른쪽 버튼 클릭)를 연 다음 요소 검사를 선택합니다.
2. 검사 탭에서 강조 표시된 줄의 컨텍스트(마우스 오른쪽 버튼 클릭) 메뉴를 엽니다.
3. 복사를 선택한 다음 XPath를 선택합니다.

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

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

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

Chrome:

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

Firefox:

1. 브라우저 오른쪽 상단에서 열기 메뉴를 선택합니다.
2. 웹 개발자를 선택한 다음** 웹 콘솔**을 선택합니다.
   **참고:**일부 Firefox 버전에서는 **웹 개발자 **메뉴가 **도구 **메뉴에 있습니다.

**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. 합성의 경우 Canaries를 선택합니다.
3. Canary 생성을 선택합니다.
4. 청사진 사용을 선택한 다음 GUI Workflow Builder를 선택합니다.
5. 새로 생성된 선택기를 사용하는 청사진을 완성하려면 GUI Workflow Builder의 예를 참조하십시오.