안녕하세요. 엔지엠소프트웨어입니다. 엔지엠 매크로의 셀레니움(Selenium) 기반 웹 API를 사용하면 웹업무를 자동화할 수 있는 다양한 방법들을 제공 해줍니다. 하지만, 일부 특수한 경우에는 자바스크립트(JavaScript)를 이용해서 직접 엘리먼트를 찾고, 스크롤하거나 클릭해야 합니다. 그래서, 웹업무를 자동화하려는 분들이 어느정도 알고 있으면 도움이 될만한 내용들을 하나씩 정리해 나가도록 하겠습니다.

엘리먼트란? (Element: 요소)

엘리먼트는 웹페이지에 표시되는 요소를 말합니다. 엘리먼트는 하나의 그림 또는 버튼이 될수도 있고, 텍스트가 될수도 있습니다. 예를 들어 로그인 자동화를 한다면 아이디와 비밀번호를 입력하고 로그인 버튼을 클릭해야 합니다. 여기서 아이디, 비밀번호 입력박스와 로그인 버튼들이 하나의 엘리먼트입니다. 이런 엘리먼트들이 모여서 하나의 웹페이지를 이루게 됩니다.

 

챗GPT에게 엘리먼트를 어떻게 찾을 수 있는지 먼저 물어보겠습니다.

 

 

자바스크립트에서 엘리먼트를 찾는 방법은 다음과 같습니다:

1. getElementById() 메서드를 사용하여 id 속성을 기반으로 엘리먼트를 찾을 수 있습니다. 예를 들어, document.getElementById("myId")와 같이 사용할 수 있습니다.

2. querySelector() 메서드를 사용하여 CSS 선택자를 사용하여 엘리먼트를 찾을 수 있습니다. 예를 들어, document.querySelector("#myId")는 id가 "myId"인 엘리먼트를 찾습니다.

3. getElementsByClassName() 메서드를 사용하여 클래스 이름을 기반으로 엘리먼트를 찾을 수 있습니다. 예를 들어, document.getElementsByClassName("myClass")와 같이 사용할 수 있습니다.

4. getElementsByTagName() 메서드를 사용하여 태그 이름을 기반으로 엘리먼트를 찾을 수 있습니다. 예를 들어, document.getElementsByTagName("div")는 모든 div 엘리먼트를 찾습니다.

5. querySelectorAll() 메서드를 사용하여 CSS 선택자를 사용하여 엘리먼트를 찾을 수 있습니다. 예를 들어, document.querySelectorAll(".myClass")는 클래스 이름이 "myClass"인 모든 엘리먼트를 찾습니다.

이러한 메서드를 사용하여 원하는 엘리먼트를 찾을 수 있습니다.

 

웹페이지에서 엘리먼트를 찾는 방법은 다양합니다. 챗GPT가 알려준대로 간단하게 테스트 해볼 수 있습니다. 우선, 엔지엠 매크로 에디터를 실행하고, 새로운 스크립트를 추가하세요.

 

 

웹 API의 [ 연결 ] 액션을 추가 해줍니다. 아이디는 a로 설정하고, 웹사이트 주소는 아래와 같이 입력 해줍니다. 스크롤이 있는 페이지예요^^

• http://ngmsoftware.com/bbs/board.php?bo_table=tip_and_tech&wr_id=643

 

 

스크롤바 액션을 추가하세요. 스크롤 값은 5000이고, 웹브라우저 이름은 a입니다.

 

 

스크립트를 실행하면 아래와 같이 스크롤이 이동됩니다.

 

 

부드럽게 스크롤하려면 스크롤 방식을 Smooth로 변경하세요.

 

 

스크롤 옵션의 ScrollTo와 ScrollBy는 현재 위치를 기준으로 상대위치인지 절대위치인지를 결정합니다. ScrollBy는 상대적 위치로 스크롤합니다. 현재 스크롤 위치에서 설정한 값만큼 추가로 이동합니다. 하지만, ScrollTo는 절대적 위치이기 때문에 현재 위치에서 추가로 실행되지 않습니다. 제목과 같이 사용자가 선택한 엘리먼트 위치로 스크롤하려면 자바스크립트 API를 사용해야 합니다. 아래 그림과 같이 [ 자바스크립트 실행 ] 액션을 추가하고, 스크롤바 액션은 삭제하세요.

 

 

자바스크립트로 직접 스크롤하게 만들어도 됩니다. 아래 링크에서 중간쯤에 있는 이미지까지 스크롤할겁니다.

• http://ngmsoftware.com/bbs/board.php?bo_table=tip_and_tech&wr_id=643

 

 

자바스크립트에서 찾은 엘리먼트까지 스크롤하려면 어떻게 해야 할까요? 이것도 챗GPT에게 물어봤습니다. 점점 개발하기 위해 머리를 쓰지 않아도 되는군요^^

 

 

자바스크립트를 사용하여 찾은 엘리먼트까지 스크롤하는 방법은 다음과 같습니다:

1. scrollTo() 메서드를 사용하여 찾은 엘리먼트까지 스크롤할 수 있습니다. 예를 들어, 찾은 엘리먼트의 위치로 스크롤하려면 다음과 같이 코드를 작성할 수 있습니다:

element.scrollIntoView();

 

위 코드는 element 엘리먼트의 위치로 스크롤합니다.

2. scrollTop 속성을 사용하여 찾은 엘리먼트까지 스크롤할 수 있습니다. 예를 들어, 찾은 엘리먼트까지 스크롤하려면 다음과 같이 코드를 작성할 수 있습니다:

window.scrollTo(0, element.offsetTop);

 

위 코드는 찾은 엘리먼트의 위치로 스크롤합니다.

이러한 방법을 사용하여 찾은 엘리먼트까지 스크롤할 수 있습니다.

 

ChatGPT가 알려준 내용을 참고해서, 자바스크립트를 작성 해줍니다. 엘리먼트까지 스크롤하려면 함수 인자(Argument)로 엘리먼트를 넘겨주는게 좋을거 같습니다. 엘리먼트의 위치를 몰라도 되니까요. 그래서, 엘리먼트 객체에 구현되어 있는 scrollIntoView 함수를 이용하는 방법을 선택했습니다. 자바스크립트 실행 액션의 자바스크립트 속성에 아래와 같이 코딩 해줍니다. XPath로 엘리먼트를 찾고, 해당 엘리먼트에 scrollIntoView 함수를 실행합니다.

function getElementByXpath(path) {
  return document.evaluate(path, document, null, XPathResult.FIRST_ORDERED_NODE_TYPE, null).singleNodeValue;
}

const ele = getElementByXpath('//*[@id="bo_v_con"]/p[28]/span/span/img');
ele.scrollIntoView();

 

아래 동영상처럼 엘리먼트까지 스크롤됩니다.

 

 

스크롤을 부드럽게 하려면 아래와같이 코드를 변경하고 실행 해보세요. 기본값은 auto입니다.

ele.scrollIntoView({ behavior: 'smooth' });

 

 

아래와 같이 옵션을 설정할수도 있습니다. block는 세로 방향이고, inline은 가로 방향입니다. 스크롤바 위치는 start, center, end, nearest 옵션이 있습니다.

Element.scrollIntoView({ block: 'center'})
Element.scrollIntoView({ inline: 'nearest'})

 

웹크롤링이나 특정 글을 조회하는 업무 자동화 매크로를 만들다보면 스크롤을 활용해야 하는 일이 빈번하게 발생합니다. 그리고, 빠르게 동작해야 하는 경우 대부분 절대 값을 이용해서 한번에 스크롤을 이동시킵니다. 하지만, 이렇게 동작시키게 되면 기계적인 움직임으로 감지되어 문제가 발생하기도 하는데요. 이런 부분들은 테스트를 거쳐 안전하게 사용하시는게 좋습니다. 회사에서 자동화 방지를 위한 코딩이 필요한 경우 테스트 용도로 유용하게 사용할 수 있습니다.

 

개발자에게 후원하기

 

추천, 구독, 홍보 꼭~ 부탁드립니다.

여러분의 후원이 빠른 귀농을 가능하게 해줍니다~ 답답한 도시를 벗어나 귀농하고 싶은 개발자~

감사합니다~

추천0 비추천0