요소용 JS 단계

JS 단계에서는 종종 다음 단계로 작업을 수행하는 경우가 있습니다.

• 요소 선택
• 선택한 요소와 상호 작용

과거에는 항상 querySelector() 또는 이와 유사한 방법을 사용하여 JS 스텝에서 요소를 선택해야 했지만, 이제는 화면에서 요소를 선택하여 JS 스텝에 인수로 전달하는 또 다른 방법이 있습니다.
이 방법을 사용하면 더 이상 JS 단계에서 처리할 요소를 선택하기 위해 CSS 선택기나 XPath를 작성할 필요가 없습니다!

사용법은 다음과 같습니다:

1. Autify 레코더로 녹화 시작
2. 대상 요소가 포함된 페이지로 이동합니다.
3. 요소를 마우스 오른쪽 버튼으로 클릭(또는 Mac의 경우 Ctl + 클릭)합니다.
4. 컨텍스트 메뉴에서 'JS 단계 추가'를 클릭합니다.
   
5. 레코더에서 저장을 클릭합니다.

이제 element라는 인수가 있는 새로운 JS Step이 생겼습니다. 이것은 녹화하는 동안 선택된 요소이며, 이 element에 일반 자바스크립트로 원하는 모든 작업을 구현할 수 있습니다.

다음 예제는 선택한 요소를 두 번 클릭하면 트리거됩니다. 요소 선택 코드가 더 이상 필요하지 않다는 것을 알 수 있습니다:

JS 단계별 요소의 가장 큰 장점 중 하나는 사이트 구조가 약간 변경된 후에도 대상 요소를 찾을 수 있다는 점으로, AI가 이 요소를 찾기 위해 작업하기 때문입니다. 이는 지정된 CSS 선택기 또는 XPath와 완전히 일치하는 요소를 더 이상 사용할 수 없을 때 JS 단계를 업데이트해야 하는 것과는 대조적입니다. 이렇게 하면 JS 단계에 필요한 유지 관리 비용을 크게 줄일 수 있습니다!