로케이터를 추가하여 요소 지정

로케이터 가 뭐예요?

로케이터는 Autify의 기능으로, 특정 단계의 대상 요소를 식별하기 위해 사용자 지정 CSS 선택자]또는 XPath를 지정할 수 있습니다.
다음 섹션에서 설명된 바와 같이, 특정 단계를 안정화하고 가속화하는 데 유용합니다.

CSS 선택자가 뭐예요?

CSS 선택자 | MDN에서:

CSS 선택자는 CSS 규칙의 첫 번째 부분입니다. 선택자는 규칙 내부의 CSS 속성 값을 적용하기 위해 어떤 HTML 요소를 선택해야 하는지 브라우저에 알려주는 요소 및 기타 용어의 패턴입니다. 선택자에 의해 선택되는 요소를 선택자의 대상이라고 합니다.

XPath가 뭐예요?

Introduction to using XPath in JavaScript | MDN에서:

이 문서는 JavaScript 안, 확장기능, 웹사이트에서 XPath를 사용하기 위한 인터페이스를 설명합니다. Mozilla는 DOM 3 XPath를 상당량 구현합니다. 이것은 XPath 식이 HTML과 XML 문서 모두에서 잘 돌아간다는 것을 뜻합니다.

언제 로케이터 를 사용해야 하나요?

• 자동 유지 관리 AI 는 요소의 여러 기능을 기반으로 종합적으로 판단하여 마지막 테스트 또는 기록에서 선택한 요소와 가장 일치하는 요소를 찾습니다. 웹사이트에 변경 사항이 있는 경우에도 계속해서 요소를 선택할 수 있습니다.

반면에 AI에 의존하지 않고 클릭, 입력 또는 주장할 특정 요소를 선택해야 하는 상황이 있을 수 있습니다.

예를 들어

• 테스트가 실행될 때마다 데이터가 변경되는 목록이나 표에서 항상 목록이나 표의 N번째 요소를 선택하려고 합니다.
• 요소의 다른 기능에 영향을 받지 않고 항상 특정 속성(클래스, ID 등)을 갖는 요소를 지정하고 싶습니다.
• 다음과 같은 이유로 인해 AI가 요소를 잘못 판단하는 경우가 많습니다:
  • 동일한 클래스, ID 또는 기타 속성을 가진 요소가 여러 개 있습니다.
  • 요소에 자신을 특성화할 클래스, ID 또는 기타 속성이 없는 경우.
  • 요소에 할당된 클래스 및 ID와 같은 속성 값이 자주 변경됩니다.

로케이터 사용 방법

1. [시나리오] 를 기록합니다.

2. 로케이터를 사용하려는 단계의 세부 정보를 열고 [로케이터] 를 클릭한 후 [로케이터 추가하기] 를 클릭합니다.

3. 풀다운 메뉴에서 [CSS 선택기] 또는 [XPath] 를 선택합니다.

4. 필드에 테스트할 페이지의 요소에 대해 [CSS 선택기] 또는 [XPath] 를 입력합니다.

다음은 CSS 선택기의 몇 가지 예시입니다.

핵심은 가능한 한 짧고 요소를 고유하게 식별할 수 있는 CSS 선택기를 사용하는 것입니다.

로케이터 사용 시 주의할 점 [Locator] 사용 시 주의할 점

• [로케이터] 함수를 사용하는 단계는 AI가 유지 관리할 수 없습니다. 의도한 요소를 선택해야 하는 경우에만 [로케이터] 함수를 사용하세요.
• 지정된 CSS 선택기/XPath에 해당하는 요소가 두 개 이상이면 첫 번째 요소가 선택됩니다.
• 지정된 CSS 선택기/XPath에 해당하는 요소를 찾지 못하면 단계가 실패합니다.
• ShadowDOM의 요소 정보
  • CSS 선택기: 섀도우 루트에 있는 요소를 지정하여 선택할 수 있습니다. 단, 지정한 CSS 선택기와 일치하는 요소가 정상 DOM에서 발견되면 정상 DOM의 요소가 선택됩니다.
  • XPath: 섀도DOM 내부의 요소는 선택할 수 없습니다.

관련 문서

• 표 또는 목록의 요소와 의도한 대로 상호 작용하려면 어떻게 해야 하나요?
• CSS 선택기를 효과적으로 사용하기
• Introduction to using XPath in JavaScript | MDN