JS 단계를 사용하여 요소에서 텍스트 콘텐츠 가져오기

요소에서 텍스트 콘텐츠 가져오기

Autify에서 JS 단계를 사용하면 요소에서 텍스트 콘텐츠를 가져와서 다음 단계에서 해당 콘텐츠를 사용할 수 있습니다.

이를 수행하는 방법에는 두 가지가 있습니다:

• 요소에 대한 JS 단계를 사용하여 Autify AI로 대상 요소를 가져옵니다.
• 텍스트 콘텐츠 가져오기 스니펫을 사용하고 CSS 선택기를 설정합니다.

요소용 JS 스텝 사용 방법

일반 JS 스텝 대신 요소용 JS 스텝을 사용하면 몇 가지 장점이 있습니다:

• Autify AI가 요소를 가져오므로 해당 CSS 선택기/XPath를 가져올 필요가 없습니다.
• 요소를 가져오기 위해 코드를 작성할 필요가 없으므로 코드가 더 적게 필요합니다.
• 페이지 로드가 완료되고 요소가 표시될 때까지 자동으로 기다립니다.
• 테스트 결과 스크린샷에서 대상 요소가 강조 표시됩니다.

단계 생성 가이드

1. 레코딩 중 대상 요소를 마우스 오른쪽 버튼으로 클릭하고 [자동 레코더] > [JS 스텝 추가]를 선택한 후 [저장]을 클릭합니다.
   

2. 저장]을 클릭하면 시나리오에 element 인수가 포함된 JS 스텝이 생성됩니다. element에는 Autify AI가 찾은 대상 요소가 포함됩니다. ![EN-ELEMENT-ARGument](https://cdn.document360.io/a099d8a2-cfd2-42ca-9906-68b4a337f4a5/Images/Documentation/en-element-argument.png) 대상 요소는 이미element인수에 포함되어 있으므로 다음 줄을 삽입하여 대상 요소의textContent`를 반환하기만 하면 됩니다.

element.textContent를 반환합니다;

3. 테스트를 실행하여 요소의 텍스트 콘텐츠가 반환되는지 확인합니다.
   

JS 단계의 대상 요소를 쉽게 이해할 수 있도록 테스트 결과의 스크린샷에서 해당 요소가 강조 표시됩니다.

문제 해결

Autify AI가 요소를 찾지 못하는 경우 아래 해결 방법 중 하나를 시도해 볼 수 있습니다:

• 빠른 요소 업데이트를 사용하여 대상 요소를 업데이트합니다(권장).
• 로케이터를 사용하여 요소의 위치를 안정화합니다.
  • 로케이터를 사용하려면 대상 요소의 CSS 선택기 또는 XPath를 수동으로 가져와야 하지만 이 단계 유형의 나머지 이점을 계속 얻을 수 있습니다.

"텍스트 콘텐츠 가져오기" 스니펫 사용 방법

요소용 JS 단계는 요소에서 텍스트 콘텐츠를 가져오는 데 권장되는 방법입니다. 그러나 대상 페이지가 자체 오른쪽 클릭 메뉴를 구현하는 경우 요소용 JS 단계를 사용할 수 없습니다. 이러한 경우 대신 "텍스트 콘텐츠 가져오기" 코드 조각을 사용하세요.

단계 생성 가이드

1. 시나리오에 JS 단계를 추가하고 텍스트 콘텐츠 가져오기 스니펫에서 코드를 복사한 후 JS 단계에 코드를 붙여넣습니다.

2.CSS 선택기 가져오기 / XPath를 참조하여 대상 요소의 CSS 선택기를 가져와서 <TODO: REPLACE SELECTOR>를 선택기로 코드에서 바꿉니다.

// 이전:
var selector = "<TODO: REPLACE SELECTOR>";

// After (값은 예시입니다):
var selector = "#doc_header > div.landing_top > div > div.landing_top_inner.center > h1";

3. 테스트를 실행하여 요소의 텍스트 콘텐츠가 반환되는지 확인합니다.
   

추가 정보 ## 추가 정보
텍스트 콘텐츠를 사용하여 요소에서 예상 텍스트 값이 검색되지 않는 경우innerText`를 대신 사용해 볼 수 있습니다.