[도서 입력 프로그램] 3-2. Selenium XPATH 찾기

[도서 정보 자동 입력 프로그램] 3-2. Selenium XPATH 찾기

 

지난 포스트로 추출한 도서 정보를 이제 본격적으로 Yes24에 등록할 시간이다.

Yes24 판매관리 페이지에서 도서 정보를 등록하기 위해서는

여러가지 기본 버튼, 라디오버튼, 드롭다운 메뉴, 파일업로드(이미지 업로드)창을 클릭해야 한다. 

 

Selenium으로 웹페이지에서 해당하는 버튼 등을 제어하려면 정확한 XPATH주소가 필요하다.

잘 모를때는 크롬 개발자모드에서 XPATH주소를 그대로 복사해서 넣었는데 그러다 보니 제대로 Click이 안되는 경우가 빈번했다. 그리하여 id 등 특정 속성으로 태그를 특징하여 XPATH 주소를 넣어보니 제어가 잘 되었다.

 

그런데, id를 기준으로 XPATH를 작성한뒤 코드를 계속 작성하면서 테스트를 위해 디버깅을 하는데,

분명 전에는 잘 작동했던 코드가 엉뚱한 곳을 찾아가거나 아예 위치를 찾지 못하는 경우가 발생했다.

 

이유가 무엇인지 찾아보니, Yes24 홈페이지가 동적 HTML 구조라서, 매번 웹페이지에서 상호작용을 할때마다 HTML코드가 바뀌는 것이 그 이유였다.

 

id="__BVID__380"

 

yes24 코드 중 상당수가 위와 같은 식으로 id가 되어있는데, 매번 id가 같은게 아니라 그때그때마다 숫자가 달라지니 id로 XPATH를 식별하게 되면 오류가 날 수밖에 없다.

 

다시 샅샅이 HTML 태그를 훑어보고, 구글링이나 Chat GPT로 검색해본 결과 보다 정확하게 XPATH를 식별할 수 있는 방법을 찾아냈다.

 

정확한 XPATH 식별 TIP

1. 동적 페이지 구조에 따라 변동 될 수 있는 id(특히 숫자형)보다 'class' 등 특정 태그에 한정된 고유 속성을 활용

XPATH에서 태그의 class를 식별하는 문법은, 태그이름[@class="class 이름" 이다. 
예를 들어, 전체문서에서 class명이 yes_form_group인 div 태그를 XPATH로 표기하면, '//div[@class="yes_form_group"]' 와 같다.

 

 

2. 전체 문서에 동일한 태그가 많으므로, 여러 단계에 걸쳐서 고유 속성을 갖는 태그 선택

특정 태그의 자식 태그 및 속성을 XPATH로 표기할때는 대괄호([])를 활용한다.
예를 들어, 전체문서에서 label 태그를 자식으로 갖는 div 태그(class는 yes_form_group) 아래 input 태그를 XPATH로 표기하면, '//div[@class="yes_form_group"][label]/input' 와 같다.

 

3. 특정 텍스트를 포함하는 태그 선택

특정 텍스트를 포함하는 태그를 표기할때는 [contains(text(), "텍스트")]문법을 쓴다.
예를 들어, 전체 문서에서 '저자/아티스트'라는 텍스트를 포함하는 span태그를 표기하면,
'//span[contains(text(), "저자/아티스트")]'와 같다.

 

위 세가지 팁을 활용해서 yes24의 경우 거의 모든 태그를 식별할 수 있었다. 한가지만 활용하기보다 두세개의 tip을 동시에 활용하면 더욱 정확히 식별 가능하다. 예를 들어,

 

'yes_form_gorup' class를 갖는 div 태그는 자식태그로 label 태그 밑에 span태그를 갖고 있는데, span 태그는 "저자/아티스트"라는 텍스트를 포함한다. 이 div 태그 밑의 또다른 자식태그로 있는 input 태그를 선택하는 XPATH'

 

라는 복잡한 설명을 표기하면 아래와 같다.

 

'//div[@class="yes_form_group"][label/span[contains(text(), "저자/아티스트")]]/input'

 

이외에도 웹의 HTML 구조에 따라 또다른 식별 TIP이 있을텐데 Chat GPT에 질문해서 웹 구조에 맞는 XPATH 식별 방법을 알아보면 오류 없이 XPATH를 식별할 수 있을 것이다.

 

이번 포스팅은 여기까지 😎

 

다음은 단순 버튼 click이 아닌 Dropdown메뉴에서 해당하는 부분을 선택하는 코드를 알아보자.

 

이전글: [도서 입력 프로그램] 3-1. Selenium 입력 구조 구상

[도서 입력 프로그램] 3-1. Selenium 입력 구조 구상

 

다음글: [도서 입력 프로그램] 3-3. Selenium 드롭다운 제어

[도서 입력 프로그램] 3-3. Selenium 드롭다운 제어