노드 설치 + JRE 설치 + 셀레늄 설치 + 브라우저 드라이버 설치
– 안녕하세요, 오늘은 s66 3회차 스터디를 통해 얻은 지식을 정리할 겸 블로그에 포스팅을 하게 되었습니다. 여태 개발자로서 협업을 해본적이 아직 없어서 테스트 주도 개발 방법론에 대해 크게 와닿지도 않고 어떻게 해야하는지 책을 봐도 잘 이해가 안가서 많은 어려움이 있었는데, 오늘의 스터디를 통해 이것이 협업을 위해 존재하는 것임을 처음으로 알 수 있게 되어 막혔던 부분들이 어느정도 해소될 수 있던 날이었습니다. 집에 오는 길에 휴대폰으로 정리하며 왔기때문에 내용이 조금 부실하거나 잘못된 부분이 있을수도 있습니다! 만약 그런 부분이 발견되면 꼭 알려주세요!!
– 설명이 많이 장황하고 어설프겠지만 그래도 저보다 모르시는 분들에게(계실지는 모르겠지만 ㅜㅠ), 그리고 저와 함께 스터디를 듣는 동생들에게 제가 배운 것들을 전달하기 위해 작성한 내용으로 많이 부족한 점이 있더라도 예쁘게 봐주셨으면 좋겠습니다 ^^;
– 위 설치 및 테스트 과정은 윈도우 10 기준으로 작업을 수행했습니다.
– 웹 브라우저는 크롬을 사용한다고 가정합니다.
– 작업은 C:￦nodeProject￦test01 디렉토리 에서 진행합니다. 원하는 디렉토리를 만들어서 그곳에서 진행하세요. 이 디렉토리는 이하” 프로젝트 루트”로 줄여 설명합니다.
1. 노드 설치
– nodejs.org 사이트에서 6.x.x 버전대의 설치파일을 다운받습니다.
– (2016.07.01 오전 수정) 4.x.x 버전대의 node를 설치하는 경우 use_strict 모드로 실행하더라도 제대로 실행되지 않는 경우가 발생합니다. 예를들면 someMethod( a = 1 ){ … } 형태로 인자가 넘어오지 않았을 때 defaultValue를 지정하는 과정에서 이것조차 문법 오류로 인식하기때문에, 진행될 스터디의 버전에 맞추어 6.x.x 버전대로 설치해 주셔야 원활한 학습이 가능하니 반드시 6버전대로 설치해주세요!
– 설치프로그램을 실행해서 설치를 진행합니다.
2. JRE설치
– 셀레늄 웹드라이버는 JVM(자바 가상 머신) 위에서 돌아가는 프로그램이므로, 다음의 링크를 통해 약관에 동의하신 뒤 다운받아 현재의 PC에 JRE를 설치합니다. (자바 개발자분들이라면 이미 JDK가 설치되어있을테니 이 부분은 패스하셔도됩니다. 설치되지 않으신 분들만 설치해주시면 되고, 이는 윈도우 콘솔에서 java -version 명령을 통해 설치여부를 확인하실 수 있습니다.)
설치링크 : http://java.com/ko/download/manual.jsp
3. 셀레늄 설치
– 셀레늄은 npm(node package manager)를 통해 설치할 수 있습니다.
– node가 이미 1번 과정을 통해 설치되어있으니, 바로 npm을 사용하실 수 있습니다.
– 윈도우키+r 입력 후 cmd 입력 후 엔터를 친 뒤, 프로젝트 루트로 이동하여 다음 명령을 입력합니다.
npm install selenium-webdriver
– 명령 입력 결과로 프로젝트 루트 아래 node_module/ 디렉토리가 생성되고 그 아래 selenium 디렉토리와 관련 파일들이 selenium 하위 디렉토리에 자동으로 설치됩니다.
4. 브라우저 드라이버 설치
– 아래의 링크에서 크롬 웹브라우저 드라이버를 다운로드받습니다. 다운로드 목록 중 최신 버전을 다운받으시면 됩니다.
http://seleniumhq.github.io/selenium/docs/api/javascript/index.html
– 받은 파일을 프로젝트 루트로 이동시킵니다.
– 이제 기본적으로 셀레늄 웹드라이버를 사용하여 웹브라우저를 띄울 수 있는 준비를 마쳤습니다.
5. 예제 코드 입력
– 셀레늄 드라이버를 이용하여 1)구글 웹페이지를 띄운 뒤, 2)검색어 입력 후 3)검색 버튼을 눌러 검색된 결과를 셀레늄이 사람 대신 코드를 읽어 수행한 결과를 확인해 보겠습니다.
– 프로젝트 루트에 helloworld.js 파일을 생성하여 아래의 코드를 입력합니다. 일단 급하게 홈페이지의 예제코드를 가져오느라 ES6 코드가 아닌 기존 버전의 자바스크립트 코드를 그대로 사용하겠습니다. ㅠㅠ
// node의 require메소드를 이용하여 셀레늄 웹드라이버
// 모듈, 웹드라이버의 By 객체를 생성하여
// 각각의 변수에 담습니다.
var webdriver = require('selenium-webdriver'),
By = require('selenium-webdriver').By;
// 웹드라이버의 빌더를 이용하여, 프로젝트 루트에 존재하는 크롬 드라이버(exe파일)를 이용,
// 크롬 브라우저를 셀레늄을 이용해 윈도우에서 실행시켜줍니다.
// 이 코드를 통해 브라우저가 실행되며,
// 실행된 브라우저의 컨텍스트를 가지고 있는 driver 객체를 통해
// 사용자 대신 코드를 이용하여 갖가지 명령을 대신 내릴 수 있게 됩니다.
var driver = new webdriver.Builder()
.forBrowser('chrome')
.build();
// driver객체의 .get()메소드를 이용하여 접속할 url을 인자로 넣어줍니다.
// 이 메소드는 받아온 String 인자값에 해당되는 경로에 존재하는 문서를
// get방식으로 요청합니다.
// 구글 경로 뒤 /ncr은 세이프서치를 적용하지 않도록 하는 값이라고 하네요.
driver.get('http://www.google.com/ncr');
// 위 명령을 통해 해당 페이지에 대한 응답이 이루어지면,
// 브라우저가 해석해 낸 DOM으로부터 특정 엘리먼트를 얻거나 조작할 수 있게됩니다.
// (실제로는 DOM이아닌 셀레늄의 객체입니다.)
// 여기서 findElement메소드는 driver객체가 현재 시점에 읽어들인
// DOM 내에 존재하는 엘리먼트를 찾기 위한 메소드이며,
// 인자로는 By객체가 가진 메소드를 넣어줍니다.
// 여기서는 엘리먼트의 name 프로퍼티의 값이 q인것을 찾아달라고 요청하고 있으며,
// 그것을 찾게되면 sendKeys라는 메소드를 이용하여 해당 엘리먼트에게
// fureweb.com이라는 문자열을 전송해달라는 요청을 하고 있음을 알 수 있습니다.
driver.findElement(By.name('q')).sendKeys('fureweb.com');
// 위 작업을 마친 뒤 같은 형태로 엘리먼트를 이름으로 찾아
// click메소드를 실행시켜줍니다.
// 두 줄의 명령을 통해 구글의 검색창에 fureweb.com이라는 문자열을 전송한 뒤
// 검색 버튼을 마우스로 클릭한 행위를 대신 내려주게 됩니다.
driver.findElement(By.name('btnG')).click();
– 윈도우키+r 키를 눌러 cmd 입력 후 엔터를 입력하여 윈도우 콘솔을 실행시킵니다.
– cd C:￦nodeProject￦test01 명령어를 통해 해당 디렉토리로 이동합니다.
– node helloWorld.js 명령을 통해 node인터프리터로 helloWorld.js 자바스크립트 파일을 해석시킵니다.
– 크롬 브라우저가 하나 뜨면서 구글 웹페이지를 띄운 뒤 sendKeys메소드로 전송한 문자열을 name이 q인 엘리먼트에 전송한 뒤 name이 btnG인 엘리먼트를 클릭해 준 결과를 확인할 수 있게됩니다.
– 위에서 DOM으로 표현해 놓은 부분이 실제로는 셀레늄의 객체인 WebElement입니다.
– 관련하여 자세한 내용은 다음의 링크를 방문하여 확인해 주시고, 관련 1번부터 계속 올라올 포스트를 참고하여 학습을 진행하시기 바랍니다.
http://www.bsidesoft.com/?p=2196
마무리
– 위 과정을 통해 노드 – 셀레늄 웹드라이버를 이용하여 사람 대신 자바스크립트 코드를 통해 웹브라우저를 대신 제어할 수 있음을 알게 되었습니다.
– 오늘 스터디를 통해 들었던 셀레늄의 어마어마한 점으로 그리드 시스템을 지원한다는 점인데, 이렇게 실행된 브라우저를 웹서버처럼 대신 띄운 뒤 그들끼리 서로 통신하게 만들 수도 있다고합니다!
– 앞으로 s66스터디를 통해 셀레늄을 이용하여 위와 같은 형태로 각각의 노드 서버를 생성한 뒤, 그렇게 생성된 여러개의 웹브라우저끼리 통신하며 구현해야할 각 기능들이 어떻게 작동될 수 있는지 알아볼 수 있는 시간을 가질 수 있게 될 것입니다. 얼마나 제가 이해하게 될 수 있을지, 또 실제 어떻게 사용할 수 있게될지는 잘 모르겠지만 정말 좋은 툴을 사용할 수 있는 방법에 대해 알 수있게 해주신 비사이드소프트의 맹기완 대표님께 진심으로 감사하는 마음입니다!! 🙂
최근 댓글