스타벅스에서 노트북으로 공부를 하거나 일을 하시는 분들이 많을 텐데요. 인터넷을 사용하려고 할 때 마다 만나는 지겨운 화면이 있죠?


다음 버튼을 누르고, 이름과 이메일을 입력하고 동의 체크박스 두 개 눌러주고 동의 버튼만 누르면 되는데 스타벅스에 갈 때마다 하려니 귀찮습니다. ‘자동으로 와이파이가 잡히면 좋을텐데’ 하는 생각을 하신 분들이 많을 것 같아서 오늘 그런 매크로*를 직접 만들어 보려고 합니다.

*매크로: 여러 개의 명령을 묶어 하나의 명령으로 만든 것. 여러 개의 명령을 수행하는 반복적인 작업에서 하나의 매크로 명령만으로 효과적인 작업을 수행할 수 있다. (출처: 네이버 국어사전)


매크로를 만들기 위해서 Nightwatch라는 녀석을 사용하겠습니다.


Nightwatch 초간단 소개


(사진 출처: nightwatchjs.org)


Nightwatch는 테스트 자동화를 위한 프레임워크입니다.


giphy.gif

쉽게는 이런 테스트를 생각하시면 됩니다. (출처: GIPHY)


제가 로그인 페이지를 만들었다고 가정해보겠습니다. 사용자는 로그인을 하기위해 로그인 페이지에 가서 아이디와 비밀번호를 입력하고 로그인 버튼을 눌러서 로그인을 시도합니다. 제가 잘 만들었다면 로그인이 성공하겠죠.


웹페이지에는 로그인 뿐만 아니라 수많은 기능들이 있습니다. 수많은 기능들에 대해 위와 같은 과정들을 사람이 매번 하기는 힘들고 실수를 할 가능성도 있습니다. 컴퓨터가 이런 테스트 과정을 자동으로 할 수 있도록 만들어야겠죠.셀레니움 웹드라이버(Selenium webdriver)라는 녀석이 위와 같은 테스트를 자동화 할 수 있게 도와줍니다. Nightwatch는 Node.js를 기반으로 셀레니움 웹드라이버를 더욱 쉽게 사용할 수 있도록 만들어 준 녀석입니다.


Selenium webdriver는 테스트 자동화를 위해 만들어진 녀석이지만, 결국 명령을 내린대로 돌아가는 것이라서 매크로처럼 사용해도 되겠습니다.


Nightwatch를 사용하기 위해 필요한 것들을 설치해 보겠습니다. 이 글은 Windows를 기준으로 작성됐습니다.


설치


  • Nightwatch

    • 커맨드라인 창을 열고 아래 명령어를 입력합니다.

    • npm install -g nightwatch




    • 설치가 완료된 것을 확인합니다.



  • Selenium-server-standalone 다운로드(링크)

    • 최신 버전의 selenium-server-standalone-{VERSION}.jar 을 다운로드합니다. (2017년 4월 24일 기준으로 3.3.1이 최신입니다.)


  • chromedriver 다운로드(링크)

    • 최신 버전을 다운받아 주세요. (2017년 4월 24일 기준으로 2.29가 최신입니다.)




준비

작업할 공간을 마련합니다. 저는 C드라이브안에 work 디렉토리에 starbucks 디렉토리를 만들었습니다. 그 안에 bin이라는 디렉토리를 하나 더 만들고 아까 다운받은 Selenium jar파일과 chromdriver을 bin 디렉토리 안에 집어넣으세요.


nightwatch 설정 파일이 필요합니다. 아래 설정을 그대로 복사 붙여넣기 해서 nightwatch.json이라는 이름의 파일을 만들어서 starbucks 디렉토리에 저장합니다. 그리고 설정 파일에서 selenium의 server_path에 본인이 받은 셀레니움 파일이름을 넣습니다. 저는 3.3.1버전이므로 아래와 같이 작성했습니다.


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
/* nightwatch.json */

{
  "src_folders" : [""],
  "output_folder" : "",
  "selenium" : {
    "start_process" : false//여기를 true로 바꿔주면 나중에 selenium-server를 따로 실행 시키지 않아도 됩니다. 이따가 다시 설명하겠습니다.
    "server_path" : "./bin/selenium-server-standalone-3.3.1.jar"// <- 여기에 자신이 받은 selenium 파일 이름을 집어넣어주세요.
    "log_path" : "",
    "host" : "127.0.0.1",
    "port" : 4444,
    "cli_args" : {
      "webdriver.chrome.driver" : "./bin/chromedriver.exe"// <- 맥 유저는 .exe를 빼주세요.
      "webdriver.ie.driver" : ""
    }
  },
  "test_settings" : {
    "default" : {
      "launch_url" : "http://localhost",
      "selenium_port"  : 4444,
      "selenium_host"  : "localhost",
      "silent"true,
      "screenshots": {
        "enabled" : false,
        "path" : ""
      },
      "desiredCapabilities": {
        "browserName""chrome",
        "javascriptEnabled"true,
        "acceptSslCerts"true
      }
    }
  }
}
cs


위의 세팅 내용이 무엇인지 궁금하시다면 Nightwatch.js의 도움말을 참조하시면 됩니다.


웹 페이지 띄우기

starbucks 디렉토리에 starbucks_login.js라는 이름의 파일을 만들고 아래의 내용을 입력한 뒤 저장합니다.

브라우저에게 저희가 항상 마주치는 스타벅스 와이파이 URL로 접속하라는 명령입니다.

1
2
3
4
5
6
/* starbucks_login.js */

module.exports = {
  "스타벅스 로그인" : function(browser) {
    browser
      .url(‘https://first.wifi.olleh.com/starbucks/index_new.html’)
  }
}
cs


실행을 해보겠습니다. 명령프롬프트를 열고 현재 디렉토리로 이동해서 selenium 서버를 실행 시킵니다.


selenium 서버를 먼저 켜야합니다. 아까 nightwatch.json에서 selenium 안에 start_process를 true로 준다면 자동으로 selenium server를 실행시켜주지만 현재 저는 잘 되지 않아서 그냥 따로 실행을 시키겠습니다. 아래 명령을 커맨드라인에 입력해주세요.


1
$ java -jar bin\selenium-server-standalone.3.3.1.jar
cs



Selenium Server is up and running 이라고 뜹니다. 잘 실행이 됐습니다.


셀레니움 서버는 끄지말고 새로운 명령 프롬프트 창을 열어서 이번에는 저희가 만든 starbuck_login.js 를 실행시키겠습니다. 마찬가지로 커맨드라인에서 현재 디렉토리로 이동해서 아래 명령을 입력하세요.


1
$ nightwatch starbucks_login.js 





sb_01_index.PNG


잘 실행이 됐습니다.(참고로 이미 스타벅스에 로그인을 한 상태라면 위 화면 대신 KT 사이트로 연결이 됩니다.)


클릭하기

한 걸음 더 나가서 클릭을 해보겠습니다. 클릭을 하기 위해서는 제가 클릭하려는 엘레먼트의 CSS Selector를 찾아야합니다.


CSS Selector에 대해서는 CSS Selector reference - w3schoolCSS Selector 이해 참조 콘텐츠를 통해 자세히 확인해보세요. 우리가 클릭해야 하는 녀석은 <input type=”checkbox”> 이므로  input[type=checkbox]라는 셀렉터를 사용하면 됩니다.


이 과정이 어려운 분들은 선택하고 싶은 곳을 우클릭해서 검사를 누릅니다. 태그를 우클릭을 하고 copy를 누른 다음 copy selector를 눌러주시면 됩니다.


sb_inspect.png

[무료 인터넷 시작하기 버튼을 우클릭]

sb_inspect_clicked.png

[검사(inspect) 클릭 - 오른쪽에 파란색 처리 된 소스가 해당 버튼의 소스입니다.]


sb_inspect_copy_select.png

[파란색 처리된 태그를 우클릭 해서 copy - copy selector를 클릭]


이제 다시 starbucks_login.js에 가서 .click(‘input[type=checkbox]’)를 추가로 입력하고 저장합니다. copy selector를 하신 분들은 input[type=checkbox] 대신에 복사한 내용을 붙여넣기 하시면 됩니다.

한 가지 더! 페이지가 전환 됐을 때, 페이지가 다 뜰 때까지 기다려줘야 합니다. 그래서 클릭을 하기 전에 waitForElementVisible(‘body’, 5000)이라고 적어줍니다. body라는 태그가 보일 때 까지 최대 5000밀리세컨(5초)을 기다리라는 의미입니다.


1
2
3
4
5
6
7
8
9
/* starbucks_login.js */

module.exports = {
  "스타벅스 로그인" : function(browser) {
    browser
      .url(‘https://first.wifi.olleh.com/starbucks/index_new.html’)
      .waitForElementVisible('body'5000)
      .click('input[type=checkbox]')
 
  }
}
cs


이제 다시 돌려 보면 체크박스가 해제된 화면을 보실 수 있습니다.


start_page_checkbox.png

[체크박스가 해제된 화면]


이제 방금과 같은 작업을 반복하시면 됩니다.

  1. 클릭하거나 값을 변경해야 할 엘레먼트의 selector를 찾는다.

  2. 해당 selector를 클릭 하거나 값을 집어넣는다. (값을 집어넣는 명령은 setValue(‘selector’, ‘값’) 입니다.)

  3. 페이지가 변경되면 제대로 뜰 때까지 기다려준다.


아래는 완성본입니다. 이름과 이메일주소를 입력해주세요.


소스코드


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
/* starbucks_login.js */

module.exports = {
  '스타벅스 로그인' : function(browser){
    console.log(url)
    browser
      .url('https://first.wifi.olleh.com/starbucks/index_new.html')
      .waitForElementVisible('body'5000)
      .click('input[type=checkbox]')
      .click('.goWifi a img')
      .waitForElementVisible('body'5000)
      .setValue('input[name=userNm]''여기에 이름을 입력하세요!!!')
      .setValue('input[name=cust_email_addr]''여기에 이메일을 입력하세요~~')
      .click('input[id=agree1]')
      .click('input[id=agree2]')
      .click('.serviceButton1 > li:nth-child(2) img')
      .waitForElementVisible('body'5000)
      .end() //마지막에 꼭 종료를 시켜주세요.
  }
};
cs


실행 확인하기

다시 셀레늄 서버를 켜고, starbucks_login.js를 실행하면 와이파이에 자동으로 접속되는 것을 확인할 수 있습니다. 이 블로그를 스타벅스에서 보고 계시다면 이미 로그인을 하셨을테니 다음번에 실행을 시켜보셔야 합니다.


login_sucess.png

[와이파이 로그인에 성공한 화면]


배치파일 만들기

그런데 매번 이렇게 명령을 날려서 접속을 하느니 그냥 입력을 하는게 편할 것 같습니다. 한 걸음 더 편한 쪽으로 가보겠습니다. 배치파일을 만들겠습니다.


에디터를 열어서 starbucks_login.bat 라는 이름의 파일을 만듭니다. 아래의 내용을 넣고 starbucks 디렉토리에 저장합니다. (맥은 배쉬 쉘 스크립트를 참고하세요. Selenium이 자동 실행 되도록 하신 분들은 nightwatch starbucks.js만 입력하시면 됩니다.)


1
java -jar bin\selenium-server-standalone.3.3.1.jar | nightwatch starbucks.js
cs



batch.PNG


배치파일을 만들었다면 바탕화면에 바로가기를 복사합니다. 모양이 예쁘지 않습니다. 인터넷에서 스타벅스 이미지를 다운받아서 이미지를 ico 파일로 변환시켜주는 사이트에서 ico 파일을 얻어내서 starbucks 디렉토리에 저장합니다. 그런 다음 바탕화면에 있는 바로가기 파일을 우클릭해서 설정에 들어갑니다. 아이콘 변경하기를 누르고 ico 파일을 찾아서 선택해줍니다.


[완성]


이제 이 배치파일만 실행시키면 스타벅스 자동 로그인이 가능합니다.


마무리

자동 로그인을 하기 위해 험난한 길을 걸었습니다. 배보다 배꼽이 더 컸을지도 모르겠네요. 이제와서 얘기지만 더 간편하게 로그인을 도와주는 크롬 확장 프로그램도 있습니다. 하지만 일상에서 겪는 문제를 직접 해결하는 것도 재미있으니까요. 이제 여러분은 정말 강력한 도구를 얻었습니다. 그동안 귀찮게 여겼던 작업들을 Nightwatch.js를 이용해서 매크로로 만들어 보세요.




저작자 표시 비영리 변경 금지
신고
Posted by slowalk