GitHub Code Crawling (Selenium)

목적

• 깃허브 코드 크롤링을 위해 모든 코드 내용이 남긴 전체 스크린샷과 코드 탐색에 사용한 키워드가 하이라이팅 된 상태인 부분 코드 스크린샷
• 파이썬 라이브러리 Selenium 활용

 

하이라이트 스크린 샷

> 방식:

  * 이 과정은 github code page의 html 분석 후 진행됨

1. textarea tag에 위치한 코드의 내용이 들어간 스트링을 불러와 키워드가 속한 부분이 몇번째 줄에 위치했는지 구함
2. div 태그의 data-line-number 필드가 포함된 형태로 깃허브 라인수를 나타내는 부분이 구성됨을 확인 (클릭시 하이라이팅 기능이 있음)
3. div[@data-line-number="{target_line} 구한 라인을 필드 값으로 넣어서 찾은 뒤 클릭하여 하이라이팅

> 트러블 슈팅

1. 검색된 파일이 코드가 아닌경우 preview가 기본 메인이기 때문에 페이지 내의 태그 구성이 달라짐
   • 모든 url에 ?plain=1 을 붙임 (코드의 경우 url 매개변수이기 때문에 무시되고, 코드가 아닌경우 code 화면으로 넘어가짐을 확인)
2. 긴 코드일 경우 동작을 하지 않음
   • 깃허브는 모든 각 코드 줄을 태그로 따로 관리함
   • 깃허브 페이지를 열 경우 초반 부분과 끝부분만 랜더링이 됨 → 스크롤을 내리면서 태그들의 랜더링을 진행해야 함
   • 무한 스크롤링 적용
     • 깃허브의 경우 페이지 문서 길이가 코드의 전체 길이와 동일하기 때문에 문서 길이만큼 스크롤링 할 경우 한 번에 끝까지 내려감 → 마찬가지로 중간부분 랜더링 안됨
     • 현재 설정된 스크린 길이만큼씩만 스크롤링 하도록 수정
   • 스크롤을 내리다보면 중간 태그가 사라짐 (랜더링된 태그의 최대 갯수가 존재)
   • 한번 스크롤링 할 때 마다 요소 찾기로 해결
   • → 1280으로 height를 고정시키고 스크롤시 약 46개의 줄이 넘어가는 것을 활용하여 키워드가 포함 된 줄 근처까지의 길이만큼 한 번에 스크롤하는 방식으로 해결

 

전체 스크린샷

> 방식

1. 셀레니움 드라이버 headless 옵션 설정
2. 브라우저 크기를 (height: 페이지 문서 세로 길이, width: 페이지 문서 가로 길이 + textarea 태크 가로 길이)로 설정
3. 스크린샷 촬영

> 트러블 슈팅

1. Body tag 부분 전체를 스크린샷 찍고자 함 → 역시 랜더링이 일어나지않아 현재 부분만 찍힘
2. 브라우저 사이즈를 문서의 전체길이, 전체너비에 맞게 설정하고 스크린샷을 찍음 → 현재 스크린의 최대크기를 넘지 못함
   • 셀레니움 드라이버 옵션에 headless 즉, 웹 브라우저를 열지 않고 진행하는 옵션을 설정하여 스크린 크기라는 바운더리를 없앰
3. 문서의 사이즈 사용시 코드가 잘리게 됨 (깃허브 페이지 코드 부분의 가로 길이가 페이지 문서의 길이와 다르기 때문에)
   • 길이에 자바스크립트로 textarea(코드부분 태그)의 길이를 구한 뒤 페이지 문서 길이에 더해서 브라우저 크기 설정
     • 그냥 textarea 크기로만 할경우 왼쪽에 위치한 네비게이션바때문에 그 크기만큼 잘리게 되기 때문에 둘을 더한 값을 사용