casperjs 팁

casperjs 로 대여섯개 사이트 자동 출첵을 걸어놨다.

삽질 중에 얻은 팁을 공유한다.

 

1. <input> 에 type 이 없을 경우 fill 이 안 먹힘. << 이런 개 같은 경우가 있음  그럴 때는 sendKey를 활용.

2. alert 한글이 깨지는 경우 setting 옵션에 encoding: "utf8", 를 넣으면 됨.

3. verbose: true로 해야 syntax 에러 나옴.

4.onsubmit="INVEN.Outlogin.login(this); return false;"   << 이런식으로 되어 있으면 fill true 가 제대로 동작 안함. click 이벤트로 처리 하도록

(INVEN이네..;;)

 

11번가 처리시
5. iframe 처리iframe접근은 casper.withFrame 를 사용.

 

==================
[debug] [phantom] opening url: http://www.11st.co.kr/browsing/NewPlusZonePlace.tmall?method=getEventPage&addCtgrNo=951965, HTTP GET
[debug] [phantom] Navigation requested: url=http://www.11st.co.kr/browsing/NewPlusZonePlace.tmall?method=getEventPage&addCtgrNo=951965, type=Other, willNavigate=true, isMainFrame=true  << isMainFrame이 true
[debug] [phantom] url changed to "http://www.11st.co.kr/browsing/NewPlusZonePlace.tmall?method=getEventPage&addCtgrNo=951965"
[debug] [phantom] Navigation requested: url=http://www.11st.co.kr/html/blank.html, type=Other, willNavigate=true, isMainFrame=false															<< isMainFrame이 false임. iframe이란 소리.
[debug] [phantom] Navigation requested: url=http://www.11st.co.kr/jsp/event15/150625_benefitZoneAttend/iframe.jsp, type=Other, willNavigate=true, isMainFrame=false							<< iframe
[debug] [phantom] Navigation requested: url=about:blank, type=Other, willNavigate=true, isMainFrame=false																					<< iframe
[debug] [phantom] Navigation requested: url=https://vars.hotjar.com/rcj-99d43ead6bdf30da8ed5ffcb4f17100c.html, type=Other, willNavigate=true, isMainFrame=false								<< iframe
[debug] [phantom] Successfully injected Casper client-side utilities
[info] [phantom] Step anonymous 5/8 http://www.11st.co.kr/browsing/NewPlusZonePlace.tmall?method=getEventPage&addCtgrNo=951965 (HTTP 200)
[info] [phantom] Step anonymous 5/8: done in 6937ms.
[info] [phantom] Step _step 6/8 http://www.11st.co.kr/browsing/NewPlusZonePlace.tmall?method=getEventPage&addCtgrNo=951965 (HTTP 200)
[info] [phantom] Step _step 6/8: done in 6955ms.
==================

위의 로그를 보면 iframe이 4개임.
iframe 이름이 있으면 casper.withFrame('이름'... 이런식으로 주지만, 이름이 없으면 0부터 index를 준다.

11번가 자동 출첵, 2017.11.03 (casperjs)

기존에 curl 을 이용한 방식은 onclick등 자바스크립트 함수가 들어가면 매우 골치아파지는 문제가 있었다.

그래서 검색하다 'headless browser' 라는 걸 알게 됐고, casperjs 란 알게 됐다.


 

11번가 자동 출첵은 casperjs 로 만들어서 기존에 사용하고 있었는데,

9월 30일 이후로 출첵이 안된 거 보니 그 때 출석체크 페이지가 바뀐듯 하다.

 

11번가 자동 출첵은 왜 하느냐?

마일리지를 받기 위해서다. 마일리지로 뭘 할 수 있는냐?

사람들이 잘 모르는데, 11번가 마일리지로 할 수 있는게 많다.

상품쿠폰,배송비쿠폰, 핸드폰 데이터 쿠폰 그리고 상품 교환도 된다.

베스킨라빈스 레귤러 한번 먹어 봤다.

 

각설하고 11번가 자동 출체 코드는 아래와 같다.

var casper = require('casper').create({
    pageSettings: {
        "userAgent": 'Mozilla/5.0 (X11; Linux x86_64) AppleWebKit/537.10 (KHTML, like Gecko) Chrome/23.0.1262.0 Safari/537.10',
        "loadImages": true,
        "loadPlugins": false,
        "webSecurityEnabled": false,
        "ignoreSslErrors": true
    },
    onWaitTimeout: function () {
        //throw new Error
    },
    onStepTimeout: function () {
        //throw new Error
    },
    encoding: "utf8",
    waitTimeout: 10000,
    stepTimeout: 10000,
     logLevel: "debug",              // Only "info" level messages will be logged
     verbose: true                  // log messages will be printed out to the console
});

var login_id = casper.cli.get("id");
var login_pw = casper.cli.get("pw");
var login_url = 'https://login.11st.co.kr/login/Login.tmall';
var attendance_url = 'http://www.11st.co.kr/browsing/MallPlanDetail.tmall?method=getMallPlanDetail&planDisplayNumber=935566';

//temp
login_id = 'myid';
login_pw = 'mypass';

if(!login_id){
    casper.echo("require id parameter");
//    casper.exit();  //not working
    phantom.exit();
}
if(!login_pw){
    casper.echo("require pw parameter");
    phantom.exit(1);
}


casper.start(login_url, function() {
    this.fill('form[name="login_form"]', {
        'loginName' : login_id,
        'passWord': login_pw
    }, false);

    this.click('#memLogin > div.save_idW > input');
    this.wait(1000, function() {
        //this.echo("I've waited for a second.");
    });
});


//출석
casper.thenOpen(attendance_url, function(){
    //iframe
    this.withFrame(1, function () {
		this.click('#regForm > div > div.sect03 > div.dev04 > a.get04 > img');
		this.wait(1000, function() {
			this.setFilter("page.confirm", function(msg) {
				return true;
			});
		});
	});

});

//casper.run();
casper.run(function() {
    require('utils').dump(this.result.log);
    this.exit();
});

 

당연하지만 매일 자동으로 실행하려면 매일 켜져있는 pc(server)가 필요하다.

테스트용 리눅스 pc가 있어서 casperjs 설치 후 cron으로 매일 실행 되게끔 설정하였다.

 

없으신 분들은 알아서...;;

우클릭시 text 복사

우클릭시 '복사' DIV 나타나서 클릭시 우클릭 위의 TEXT를 복사하는 스크립트이다.

원했던 건 우클릭하면 바로 복사 하려고 하였으나,
왜 그런지 document.execCommand("copy"); 가 동작하지 않는다.
그래서 click 이벤트로 발생하기 위해 '복사'div 를 생성하였다.

	function copyToClipboard(value, showNotification, notificationText) {
	    var $temp = $("<input>");
	    $("body").append($temp);
	    $temp.val(value).select();
	    document.execCommand("copy");
	    $temp.remove();

	    if (typeof showNotification === 'undefined') {
	        showNotification = true;
	    }
	    if (typeof notificationText === 'undefined') {
	        notificationText = "Copied to clipboard";
	    }

	    var notificationTag = $("div.copy-notification");
	    if (showNotification && notificationTag.length == 0) {
	        notificationTag = $("<div/>", { "class": "copy-notification", text: notificationText });
	        $("body").append(notificationTag);

	        notificationTag.fadeIn("slow", function () {
	            setTimeout(function () {
	                notificationTag.fadeOut("slow", function () {
	                    notificationTag.remove();
	                });
	            }, 10);
	        });
	    }
	}

	var copyData = "";
	//$(".context-menu-one").on("contextmenu", function(event) {
	$("table").on("contextmenu", function(event) {
		event.preventDefault();
		$("div.custom-menu").remove();
		copyData = $.trim(event.target.textContent);
	    
	    $("<div class='custom-menu'>복사</div>")
	        .appendTo("body")
	        .css({top: event.pageY + "px", left: event.pageX + "px"})
	        .on("click", function(event) {
		    event.preventDefault();
		    copyToClipboard(copyData);
		    copyData = "";
		    $("div.custom-menu").remove();
			});

		$("body").click(function (){
			 $("div.custom-menu").remove();
		});
	});
	

 

/* 우측 클릭 '복사' */
.custom-menu {
    z-index:1000;
    position: absolute;
    background-color:#C0C0C0;
    border: 1px solid black;
    padding: 2px;
    border-radius: 5px; 
}

.copy-notification {  
    color: #ffffff;  
    background-color: rgba(0,0,0,0.8);
    padding: 20px;  
    border-radius: 30px;  
    position: fixed;  
    top: 50%;  
    left: 50%;  
    width: 150px;  
    margin-top: -30px;  
    margin-left: -85px;  
    display: none;  
    text-align:center;  
}

참조

datepicker 버튼 추가(당일, 1주일, 1개월, 3개월)

 

 

 

 

 

 

 

 

 

from 절과 to절이 있는 부분을 datepicker로는 만들수가 없다.

datepicker 달력 하단에 당일, 1주일, 1개월, 3개월 버튼을 넣어서

from절과 to절에 넣도록 했다.

 

function fnDatepickerFromToDateRangeSet(startId, endId, searchFnName){

	$("#"+startId).datepicker( "option", "beforeShow",
			function (input) {
				fnDatepickerRangeSet(input,startId,endId,1,searchFnName);
			}
	);
	
	$("#"+endId).datepicker( "option", "beforeShow", 
			function (input) {
	    		fnDatepickerRangeSet(input,startId,endId,2,searchFnName);
			}
	);
	//버튼 위치 input 안으로 넣도록 함.
	$(".ui-datepicker-trigger").css({"vertical-align": "middle", "cursor": "pointer", "padding-left": "2px"}).addClass("box_date_btn");
	 
}


//하단 당월,1주일,1개월,3개월 버튼 추가 - 함수.
//이 함수 자체는 달력이 보여질때 실행되고 하단 버튼 클릭시는  'click: function' 부분에서 실행됨을 주의!
function fnDatepickerRangeSet(input, startId, endId, startEndChk, searchFnName) {
	setTimeout(function () {
		
		var dateText =  ["당일", "1주일", "1개월", "3개월"];
		var dateRange = ["0d",   "-7d",   "-1m",  "-3m"];
		var buttonPane = $(input).datepicker("widget").find(".ui-datepicker-buttonpane");

		for(i=0;dateText.length > i; i++ ){
			$("<button>", { text: dateText[i], value:dateRange[i], executeFn:searchFnName,
				//하단 버튼을 클릭시에는 여기 'click: function'이 실행된다.
				click: function (eventData) {
					$("#"+startId).datepicker('setDate', eventData.currentTarget.value);
					$("#"+endId).datepicker('setDate', '0d');
					jQuery(input).datepicker('hide');
					var execFn = eventData.currentTarget.getAttribute('executeFn');
					if(execFn){
						 eval(execFn);
					}
					
				}
			}).appendTo(buttonPane).addClass("ui-datepicker-clear ui-state-default ui-priority-primary ui-corner-all");
		}
		
		//오늘 버튼 숨김
		$(input).datepicker("widget").find(".ui-datepicker-current").hide();

		

	}, 1)
 }

 

네이버페이 자바스크립트로 비활성화

네이버 페이를 연동시에 상품이 품절 인 경우는 비활성화를 해주어야 한다.

문제는 한개의 페이지가 아니라 옵션을 선택시 품절 여부를 보여 줄 경우 스크립트로 수정하는 방법을 모른다는 것. 네이버에 물어봐도 제대로 답변해 주지 않는다. 그냥 숨김 처리하라고 하는 데, 버튼이 있던 자리가 없어지는 건 아무래도 이상하다.

소스를 보니 가능 할 것 같아서 해 봤더니, 되긴 된다.

<div id="naverPayBtn"></div>
<script type="text/javascript" src="http://test-pay.naver.com/customer/js/naverPayButton.js" charset="UTF-8"></script>
<script type="text/javascript" >
//<![CDATA[
var npBtnOption ={
BUTTON_KEY: "naverPayBtnCertiKey", // 네이버페이에서 제공받은 버튼 인증 키 입력
TYPE: "A", // 버튼 모음 종류 설정
COLOR: 1, // 버튼 모음의 색 설정
COUNT: 2, //버튼 개수 설정. 구매하기 버튼만 있으면(장바구니 페이지) 1, 찜하기 버튼도 있으면(상품 상세 페이지) 2를 입력.
ENABLE: "Y", // 품절 등의 이유로 버튼 모음을 비활성화할 때에는 "N" 입력
EMBED_ID : "naverPayBtn",
BUY_BUTTON_HANDLER: buy_nc, // 구매하기 버튼 이벤트 Handler 함수 등록, 품절인 경우 not_buy_nc 함수 사용
//BUY_BUTTON_LINK_URL: "", // 링크 주소 (필요한 경우만 사용)
WISHLIST_BUTTON_HANDLER: wishlist_nc, // 찜하기 버튼 이벤트 Handler 함수 등록
//WISHLIST_BUTTON_LINK_URL: "", // 찜하기 팝업 링크 주소
"":""
}
naver.NaverPayButton.apply(npBtnOption);


//버튼기능(네이버페이 구매하기)
function buy_nc() {
	...
	return false;
}
function wishlist_nc() {
	// 네이버페이로 찜 정보를 등록하는 가맹점 페이지 팝업 창 생성.
	// 해당 페이지에서 찜 정보 등록 후 네이버페이 찜 페이지로 이동.
	...
	return false;
}
function not_buy_nc() {
	alert("죄송합니다. 네이버페이로 구매가 불가한 상품입니다.");
	return false;
}

</script>

 

아래의 코드로  ENABLE 상태를 변경.

	naverPayStatusChange: function(enable,option,btnHandler) {
		$("#"+option.EMBED_ID).text("");
		option.ENABLE = enable;
		option.BUY_BUTTON_HANDLER = btnHandler;
		naver.NaverPayButton.apply(npBtnOption);
	}


ex) naverPayStatusChange("N",npBtnOption,not_buy_nc);

ps. 사용자가 네이버페이로 결제시 결제 완료, 실패 리턴이 없음. 그냥 보내면 끝이므로 주의

크롬 개발자 도구에서 함수 쉽게 찾기

크롬 개발자 도구에서 함수 쉽게 찾기
Ctrl+Shift+F
전체 파일에서 함수 뿐만 아니라 '전체 내용'을 찾아 준다.

javascript null,undefined, empty 체크 방법

if( value ) {

}

그냥 위와 같이 쓰면 됨.

아래의 값이 아닐 경우 true 라고 함.

null
undefined
NaN
empty string ("")
0
false

출처
출처2

 

// 4.1.1
// 배열에 뭔가가 들어있는지 여부를 확인하려는 거라면,
// 다음과 같이 코드를 작성하는 대신에:
if ( array.length > 0 ) ...

// 다음과 같이 작성하세요:
if ( array.length ) ...

// 4.1.2
// 배열이 비어있다는 것만을 확인할 때에는,
// 아래처럼 작성하지 마시고:
if ( array.length === 0 ) ...

// ...다음처럼 작성하세요:
if ( !array.length ) ...

// 4.1.3
// 문자열이 비어있지 않다는 것을 확인할 때에는,
// 다음처럼 작성하지 마시고:
if ( string !== "" ) ...

// ...다음과 같이 작성하세요:
if ( string ) ...

// 4.1.4
// 문자열이 _비어있다는 것_을 확인만 하는 경우라면,
// 다음처럼 작성하지 마시고:
if ( string === "" ) ...

// ...다음과 같이 작성해서, 거짓인지를 확인하세요. :
if ( !string ) ...

// 4.1.5
// 참조 변수가 true인지 확인하려면,
// 다음처럼 작성하지 마시고:
if ( foo === true ) ...

// ...그냥 아래처럼 써주세요. 기본 기능을 활용하면 됩니다:
if ( foo ) ...

// 4.1.6
// 어떤 참조 변수가 false인지 판정할 때에는,
// 다음처럼 작성하지 마시고:
if ( foo === false ) ...

// ...true인지를 확인하도록 부정(!)을 사용하세요.
if ( !foo ) ...

// ...주의하세요. 이렇게 제안하면 foo의 값이 0, “”, null, undefined, NaN인 경우에도 참을 반환할 겁니다.
// foo가 불린값 false를 갖는지를 확인하는 경우라면, 아래와 같이 사용하세요.
if ( foo === false ) ...

// 4.1.7
// 어떤 변수가 있다고 하죠. 이 변수의 값은 null이나 undefined일 수는 있지만 false나 "", 또는 0의 값은 가지지 않습니다. 이런 변수를 판정할 때에는,
// 아래처럼 작성하지 마시고:
if ( foo === null || foo === undefined ) ...

// ...강제형변환되는 ==를 사용하세요. 다음과 같이요:
if ( foo == null ) ...

// 그리고 이 점을 기억하세요. == 를 사용하면, 판정하려는 변수의 값이 `null` 이나 `undefined` 일 때, 참을 반환할 것입니다.
// 하지만 `false` 나 "" 나 0 값을 가질 때에는 거짓을 반환할 것입니다.
null == undefined

 

 

https://github.com/EngForDev/idiomatic.js/tree/ko/translations/ko_KR

Uncaught ReferenceError: 변수 is not defined

Uncaught ReferenceError: 변수 is not defined

크롬에서 볼 때 위와 같은 에러 발생.

예전에 스크립트의 위치를 변경하여 해결 한 적이 있어서 이리저리 위치를 바꿔보고,
jquery 의 ready 안에도 넣어보고 해도 안됨.

문제는 위의 '변수' 부분을 외부 소스를 가져온 부분에 정의 되어 있었는데, 이걸 못 불러온것임.

위치는 제대로 되어 있는 데, 왜 못 불러 올까 한참 찾다보니 현재 접속한 페이지의 url이 https 인데,

자바스크립트를 http로 불러올려고 하면 못 불러옴.

예를 들어 현재 작업 중인 페이지가 https://www.naver.com/test.html 이다. 라고 한다면 자바스크립트 외부 소스를 불러오는 것도

<script type="text/javascript" src="https://www.test.com/test.js"></script>

위와 같이 같이 https로 맞춰주면 제대로 동작한다.

 

아래와 같이 동적으로 치리 해도 됨.

<script language='javascript'>
var targetDomain = 'maps.google.com/maps/api/js?sensor=true';
var targetURL = location.protocol=="https:"?"https://"+targetDomain:"http://"+targetDomain;
document.writeln("<scr"+"ipt language='javascript' src='"+targetURL+"'></scr"+"ipt>");

</script>

자바스크립트 중복 제거 함수.

var a=[];
while(a.length <3) {
var n = Math.round(Math.random() * 20);
if (a.indexOf(n)==-1) a.push(n);
}

출처:http://stackoverflow.com/a/5740725

swfupload 에 addPostParam 작동 안되는 문제.

진짜 간단한 문제인 데, 이것 때문에 이틀 날렸음;;

setting 값에  use_query_string : true, 를 추가.

위의 값은 기본이 false 이므로 추가가 필요하고,

addPostParam 뿐만 아니라,post_params를 이용하기 위해서도 true로 설정 해야 한다.

전화번호 마스크용 스크립트

1. 전화번호 마스크용 스크립트

function MaskPhon( obj ) {

obj.value =  PhonNumStr( obj.value );

}

 

function PhonNumStr( str ){

var RegNotNum  = /[^0-9]/g;

var RegPhonNum = "";

var DataForm   = "";

 

// return blank

if( str == "" || str == null ) return "";

 

// delete not number

str = str.replace(RegNotNum,'');

if( str.length < 4 ) return str;

 

if( str.length > 3 && str.length < 7 ) {

DataForm = "$1-$2";

RegPhonNum = /([0-9]{3})([0-9]+)/;

} else if(str.length == 7 ) {

DataForm = "$1-$2";

RegPhonNum = /([0-9]{3})([0-9]{4})/;

} else if(str.length == 9 ) {

DataForm = "$1-$2-$3";

RegPhonNum = /([0-9]{2})([0-9]{3})([0-9]+)/;

} else if(str.length == 10){

if(str.substring(0,2)=="02"){

DataForm = "$1-$2-$3";

RegPhonNum = /([0-9]{2})([0-9]{4})([0-9]+)/;

}else{

DataForm = "$1-$2-$3";

RegPhonNum = /([0-9]{3})([0-9]{3})([0-9]+)/;

}

} else if(str.length > 10){

DataForm = "$1-$2-$3";

RegPhonNum = /([0-9]{3})([0-9]{4})([0-9]+)/;

}

 

while( RegPhonNum.test(str) ) {

str = str.replace(RegPhonNum, DataForm);

}

return str;

}

 

 

2. 입력박스
전화번호 : <input type='text' maxlength='13' onkeyup ='MaskPhon(this);' onkeydown='MaskPhon(this);'  >

[출처] 자바스크립트 전화번호 마스킹 처리 (000-0000-0000)|작성자 쿨라팝

document.getElementById 가 null값을 가져오는 현상

document.getElementById 로 id 값을 불러오는 데, 자꾸 null값이 떠버린다.

해당 소스를 <head> 태그에 넣고 실행하면 이런 현상이 생긴다.

html 태그가 전부 생성 되기도 전에 자바스크립트 코드가 실행 되면서 발생하는 경우이다.

코드를 html 이 생성 완료된 시점(제일 하단)으로 옮겨서 실행시키면 정상적으로 동작한다.