안녕하세요. 엔지엠소프트웨어입니다. 이 예제를 학습하기전 엘리먼트(Element, 요소, 원소, 구성 성분)가 어떤 의미로 사용되는지 이해할 필요가 있습니다. 개발자라면 오브젝트, 인스턴스, 엘리먼트, 노드등등... 익숙한 용어이고 어떤 의미로 어디에 쓰이는지 알고 있죠. 하지만, 비개발자분들이 이런 용어를 들으면 당연히 물음표(?)를 던질 수 밖에 없습니다. 문제는 이해되지 않는 용어 때문에 학습에 대한 열정이 감소한다는 것입니다. 엘리먼트를 제외한 다른 이야기는 다음에 한번 알아보기로 하고, 웹에서 말하는 엘리먼트가 무엇인지 이해하기 위해 아래 글을 한번 읽어보시기 바랍니다.

[ 위키 백과 - 웹 엘리먼트란? ]

예제를 진행하면서 좀 더 부연 설명을 추가해서 글을 작성할께요. 잘 이해되지 않는 부분들은 댓글 또는 질문과 답변 게시판에 남겨주세요. 제가 아는 지식 범위 내에서 답변드리도록 하겠습니다. 자~ 우선, 이 예제를 하기 위해 엔지엠 에디터를 실행하고, 새로운 스크립트를 하나 추가하세요.

아래 동영상을 참고해서 웹 API의 [ 연결 ]과 엘리먼트 목록을 추가하세요.

아래 그림에서는 표시되지 않았지만, 연결 액션의 아이디를 "질답"으로 설정한 후 아래 내용과 같이 각각의 속성을 입력해주세요.

1. 웹드라이버 선택 (크롬 드라이버 사용)
2. 웹브라우저는 크롬 선택
3. 웹사이트 주소: http://ngmsoftware.com/bbs/board.php?bo_table=knowledge

엘리먼트 목록 액션을 선택하고, 각각의 속성을 아래와 같이 설정 해줍니다.

1. 엘리먼트 값 텍스트
2. 요소 이름: //*[@id="fboardlist"]/div[2]/table/tbody
3. 요소 형식: XPath
4. 웹브라우저 이름은 연결 액션의 아이디 선택
5. 자식 엘리먼트 탐색에 True 선택

우리는 엘리먼트를 탐색하도록 설정 했습니다. 우선, 웹사이트 주소는 엔지엠소프트웨어 홈페이지의 질문과 답변 게시판입니다.

질문과 답변 게시판 글들의 목록을 가져올겁니다. 그러기 위해서는 글 제목들을 묶을 상위 엘리먼트가 필요합니다. 대부분의 웹은 아래와 같은 구조로 이루어져 있습니다.

<table>
  <tbody>
    <tr>
      <td>제목</td>
      <td>내용</td>
    </tr>
    ... <tr> 반복...
  </tbody>
</table>

여기서 <tr> 안에 값을 담고 있는 <td>가 반복되죠? 우리가 가져올 값은 <tr>입니다. 그래야 하나의 제목을 가져올 수 있기 때문입니다. 그렇다면 <tr> 전체를 가져오려면 상위에 있는 <tbody>를 가져와서 자식 엘리먼트를 목록으로 만들면 됩니다. 그러면 현재 선택된 엘리먼트는 <tbody>지만, 하위에 <tr>을 목록화 할 수 있습니다. 지금까지 만든 스크립트를 실행하면 첫번째 글의 제목을 가져오고, 엘리먼트도 확인할 수 있습니다.

선택된 엘리먼트를 변수에 저장 해줍니다. [ 변수 추가 ] 액션 매뉴얼을 참고하세요.

사이트에서 엘리먼트들을 모두 탐색한 후 해당 엘리먼트의 하위 엘리먼트만 탐색할수도 있습니다. 이는 XPath로 선택한 하나의 값만 처리하기 보다는 배열로 순환 반복하면서 처리할 때 유리합니다. 일부 특수한 엘리먼트들은 XPath로 지정되지 않는 경우가 있습니다. 여러가지 상황에 유연하게 대응하기 위해서는 다른 방법을 사용할 수 있어야 합니다. 가장 좋은 방법은 커스텀 액션을 개발하는거지만요^^;

아래는 엘리먼트 목록을 하나 더 추가하고, 변수에 저장된 엘리먼트에서 탬색하는 방법을 설명하고 있습니다.

변수에 저장된 엘리먼트를 추가하고, 가져오려면 아래와 같이 설정해야 합니다.

현재까지 수행한 내용을 살펴보면, tbody로 가져온 목록들 중에서 첫번째 엘리먼트를 변수에 저장했습니다. 그리고, 첫번째 엘리먼트(<tr>)의 첫번째 엘리먼트(<td>)를 가져오도록 했습니다. 실행하면 첫번째 td의 값만 가져온것을 알 수 있습니다.

tr의 하위 엘리먼트가 7개인걸 알 수 있고, 첫번째 엘리먼트인 td의 값이 "공지"인지 확인할 수 있습니다. 이렇게 엘리먼트의 하위 엘리먼트를 연속해서 탐색할 수 있습니다. 원하는 결과가 나올 때까지 탐색하면서 결과를 확인 해보세요. 또한, 부가적인 정보들을 확인하거나 엘리먼트의 값에 따라 조건을 추가한다면 좀 더 다양한 동작을 수행할 수 있을겁니다.

개발자에게 후원하기

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

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

감사합니다~