표 또는 목록의 요소와 의도한 대로 상호 작용하려면 어떻게 해야 하나요?

시나리오를 만들고 있다고 가정해 보겠습니다. 테이블 맨 위에 있는 요소에 대한 작업을 기록했는데 이 요소에 "test0001"이라는 텍스트가 포함되어 있다고 가정해 보겠습니다. 나중에 새 레코드가 추가되고 "test0001"이 두 번째 행으로 이동합니다. 이제 첫 번째 행은 "test0002"입니다. 시나리오를 실행할 때 Autify는 의도한 것과는 달리 두 번째 행의 "test0001" 요소를 대상으로 지정할 수 있습니다.

의도한 작업이 항상 테이블 맨 위에 있는 최신 레코드를 클릭하는 것이라면 후속 단계에서 테스트가 실패할 수 있습니다.

현재 목록이나 표의 맨 위, N번째 또는 맨 아래 요소를 대상으로 자동화를 수행하려면 로케이터 기능을 사용해야 합니다.

다음은 로케이터로 설정할 수 있는 CSS 선택기/XPath의 몇 가지 예입니다. 이 문서에 표시된 CSS 선택기/XPath는 예시라는 점에 유의하세요. 사이트의 실제 구조를 확인하여 적절한 CSS 선택기/XPath를 생성하세요.

CSS 선택기로 N번째 요소 타겟팅하기

CSS 선택기로 N번째 요소를 타겟팅하려면 다음 구문을 사용할 수 있습니다:

• N번째

:nth-child(N)

• First

:첫 번째 자식

• Last

:마지막 자식

목록의 두 번째 항목을 대상으로 하려면 다음 구문을 사용할 수 있습니다:

UL > li:nth-child(2)

테이블의 N번째 행, M번째 열에 있는 요소 타깃팅하기

테이블의 항목을 대상으로 지정하려면 행과 열을 지정해야 합니다. tr 태그는 행을 나타내고 td 태그는 열을 나타냅니다. 액세스하려는 요소의 행과 열을 지정합니다. 다음은 첫 번째 열의 첫 번째 행에 있는 요소를 가져오는 CSS 선택기입니다. 테이블의 맨 위에 가장 최근 데이터가 있는 경우 이 CSS 선택기는 항상 가장 최근 데이터를 대상으로 합니다.

테이블 > tbody > tr:첫 번째 자식 > td:첫 번째 자식

아래 예제 표에서 빨간색 상자 안의 요소가 대상입니다.

빨간색 상자 안의 대상 요소는 td 요소이지만 이 요소 아래에는 a 태그로 생성된 링크가 있습니다. 이 링크를 클릭하려면 CSS 선택기 끝에 a를 추가하세요.

테이블 > tbody > tr:첫 번째 자식 > td:첫 번째 자식 a

마지막 열을 대상으로 지정할 수도 있습니다. 이렇게 하려면 아래와 같이 td:첫 번째 자식을 td:마지막 자식으로 변경합니다.

테이블 > tbody > tr:첫 번째 자식 > td:마지막 자식

행에 특정 텍스트가 포함된 테이블의 특정 열 타깃팅하기

N번째 행/M번째 열을 지정하는 대신 특정 텍스트가 포함된 행의 특정 열을 타깃팅할 수 있습니다. 예를 들어 아래는 자동 완성 시나리오의 표입니다. 시나리오 이름이 "test0001"인 행의 마지막 요소를 타깃팅하려면 다음 XPath를 사용할 수 있습니다:

//table/tbody/tr[td//*[text()='test0001']]/td[6]

대상은 녹색 상자 안의 td 요소입니다:

타깃 요소는 td 요소이며, 이 요소 아래에는 버튼 태그 안에 메뉴 아이콘이 있습니다. 이 button 태그를 타깃팅하려면 다음과 같이 XPath를 변경합니다:

//table/tbody/tr[td//*[text()='test0001']]/td[6]//button

찾고자 하는 텍스트가 매번 동일하지 않고 JS Step 또는 동적 값을 사용하여 테스트 실행마다 임의로 생성되는 경우, JS Step을 사용해야 합니다. 다른 단계에서 인수로 생성된 찾고자 하는 문자열을 가져와서 다음 JS 스니펫에서 사용합니다:

• 테이블에서 텍스트를 검색하고 찾은 행의 특정 열을 조작합니다.