[메모] 셀 레 니 움 대신 크롬 익 스 텐션 으로 웹 자동화 테스트

Selenium 자동화 테스트 는 여러 가지 불안정 요소 가 있 기 때문에 사용 할 때 대량의 API 문 서 를 보고 해당 하 는 언어의 구동 패 키 지 를 다운로드 해 야 한다.그래서 크롬 익 스 텐션 으로 직접 대신 하려 고 했 습 니 다.
어떻게 Chrome Extension 으로 웹 UI 테스트 를 구동 합 니까?우선 첫 번 째 Extension 부터 말씀 드 리 겠 습 니 다.
하나의 Extension 을 하나의 폴 더 에 넣 었 습 니 다. 첫 번 째 Extension 은 세 개의 파일 이 있 습 니 다: icon. png, background.js, manifest.json
인터넷 에는 이러한 코드 가 많이 있 습 니 다. 특정한 웹 페이지 를 조회 할 때 주소 표시 줄 오른쪽 에 extension 아이콘 icon. png 을 표시 합 니 다.

// background.js
function match(url){
  var host = "null";
  if(typeof url == "undefined" || null == url)
  url = window.location.href;
  var regex = /.*\:\/\/([^\/]*).*/;
  var match = url.match(regex);
  if(typeof match != "undefined" && null != match)
  host = match[1];
  return host;
}

function entry(tabId, changeInfo, tab) {
  //  URL localhost   extension  
  if(match(tab.url).toLowerCase()=="localhost"){
    chrome.pageAction.show(tabId);
  }
};

chrome.tabs.onUpdated.addListener(entry);


// manifest.json
{
     "manifest_version": 2,
     "name": "Chrome Extension: Test",
     "version": "0.0.1",
     "background": { "scripts": ["background.js"] },
     "permissions": ["tabs"],
     "page_action": {
          "default_icon": {
               "19": "icon.png"
          },
          "default_title": "test extension"
     }
}

이어서 Chrome 을 열 고 주소 표시 줄 에 입력 합 니 다.chrome://extensions/Extension 제목 오른쪽 에 있 는 '개발 자 모드' (developer mode) 를 선택 하면 폴 더 를 선택 하여 자신의 extension 을 추가 하 는 단 추 를 볼 수 있 습 니 다.
extension 을 불 러 온 후 새 tab 에 테스트 페이지 를 입력 하 십시오. 예 를 들 어http://localhost/index.html주소 표시 줄 오른쪽 에 icon. png 아이콘 이 나타 납 니 다.
그 아이콘 은 잠시 장식 으로 우리 가 테스트 하고 자 하 는 페이지 가 handle 에 표시 되 어 있 습 니 다.
현재 방문 한 페이지 의 정 보 를 어떻게 얻 는 지 알려 드 리 겠 습 니 다.이것 은 extension 의 content script 특성 을 사용 해 야 합 니 다.extension 개발 폴 더 에 js 파일 content. js 추가

// content.js
var links = document.getElementsByTagName('a');
var list = [];
var n,i,t;
n = links.length;
for(i=0;i= 0) continue;
  list.push(t);
  t = null;
}
console.log(list);

그리고 manifest. json 에 content script 설정 을 추가 합 니 다.

// manifest.json

... ...
     "background": { "scripts": ["background.js"] },
     //   content script   
     "content_scripts":[
        {"matches":["http://localhost/*"],"js":["content.js"]}                  
     ],
     "permissions": ["tabs"],
... ...

자신의 extension 을chrome://extensions/리 로드 (Reload) 를 다시 불 러 오고 테스트 페이지 를 새로 고침 합 니 다.이 때 콘 솔 에 들 어가 면 페이지 에 하이퍼링크 가 있 으 면 콘 솔 은 연 결 된 주 소 를 모두 인쇄 합 니 다.물론 콘 솔 출력 결 과 는 형식 입 니 다. 파일 에 출력 해도 됩 니 다. 우 리 는 처음에 그 아이콘 을 사용 하여 결 과 를 볼 수 있 습 니 다.
아이콘 을 클릭 하여 결 과 를 보 려 면 background 와 content script 이 어떻게 통신 하 는 지 알 아야 합 니 다.콘 텐 츠 script 에서 얻 은 list 를 background 에서 얻 고 아이콘 을 클릭 한 후에 표시 하 는 방법 에 대해 이야기 합 니 다.
content script 에서 list 를 background 에 전달 하려 면 메시지 체 제 를 통 해 통신 을 해 야 합 니 다.content. js 와 background. js 수정:

// content.js
... ...
console.log(list);

chrome.runtime.sendMessage({
  type: 'localtest-links',
  links: list
});


// background.js
... ...
chrome.tabs.onUpdated.addListener(entry);

var pageData = {};
chrome.runtime.onMessage.addListener(function(message, sender, response){
  if (message.type !== 'localtest-links') return;
  pageData.links = message.links;
});

아이콘 을 누 르 면 내용 이 팝 업 페이지 를 설정 하 는 것 입 니 다. 팝 업. html 와 팝 업. js 를 추가 하고 manifest. json 을 수정 해 야 합 니 다.

  
(No Result)
  

// popup.js
document.addEventListener('DOMContentLoaded', function () {
  var data = chrome.extension.getBackgroundPage().pageData;
  var dom = document.getElementById('result');
  var html = '';
  var n, i;
  n = data.links.length;
  for(i=0;i' + data.links[i] + '

';
}
dom.innerHTML = html;
html = null;
dom = null;
data = null;
});
// manifest.json
... ...
"default_title": "test extension",
"default_popup": "popup.html"
}
... 이렇게 localhost 페이지 에 접근 할 때 모든 하이퍼링크 정보 가 수집 되 고 extension 아이콘 을 클릭 하면 팝 업 창 에 표 시 됩 니 다.
위의 전체 프로 세 스 는 기본적으로 간단 한 테스트 를 실행 할 수 있 습 니 다. 테스트 인원 은 스 크 립 트 를 사용 하여 chrome 을 열 고 extension 이 자동 으로 테스트 를 실행 하도록 할 수 있 습 니 다. 마지막 으로 extension 아이콘 은 테스트 인원 에 게 테스트 결 과 를 보 여줄 수 있 습 니 다.
다음은 extension 으로 테스트 할 때 제어 판 을 popup. html 에 넣 으 려 고 합 니 다.여기에 단 추 를 추가 합 니 다. 이 단 추 를 누 르 면 테스트 페이지 의 첫 번 째 button 의 click 클릭 이 벤트 를 촉발 합 니 다.
먼저 사건 의 촉발 을 뇌 보충 하 다.

function trigger(element, eventType) {
  var event = document.createEvent('HTMLEvents');
  event.initEvent(eventType, true, true);
  element.dispatchEvent(event);
  event = null;
}

제어 단 추 를 popup. html 에 추가 하려 면 popup 에서 콘 텐 츠 script 에 게 내 가 button 을 터치 하 겠 다 고 메 시 지 를 보 내 는 click 사건 을 처리 해 야 합 니 다.

... ...
(None)
Fire

... ...

// popup.js
... ...
  dom.innerHTML = html;

  dom = document.getElementById('fire');
  dom.addEventListener('click', function () {
    chrome.tabs.query({active: true, currentWindow: true}, function(tabs){
      chrome.tabs.sendMessage(
        tabs[0].id,
        {type: 'localtest-fire'},
        function(response) {});
    });
  });
  html = null;
... ...

// content.js
... ...

chrome.extension.onMessage.addListener(function(message, sender, response) {
  if(message.type!=='localtest-fire') return;
  var buttons = document.getElementsByTagName('button');
  if(buttons.length > 0) {
    // trigger           :P
    trigger(buttons[0], 'click');
  }
  buttons = null;
});

실험 효 과 를 위해 로 컬 서버 에 test. html 파일 을 올 릴 수 있 습 니 다.

Hello

World

self

From Popup

extension 을 다시 불 러 온 후 방문 할 때http://localhost/test.html주소 표시 줄 오른쪽 extension 아이콘 을 클릭 하고 Fire 단 추 를 누 르 면 alert 가 팝 업 됩 니 다. 위 에 'trigger' 라 고 쓰 여 있 습 니 다!
그러나 자동 테스트 를 할 때 alert 가 나타 나 면 테스트 가 중단 된다. 이것 은 사람 을 미 치 게 하 는 것 이다. 우 리 는 alert 를 차단 해 야 한다.다음은 콘 텐 츠 script 이 현재 페이지 에 코드 를 주입 하고 목 표 는 alert 를 제거 하 는 것 입 니 다.
우 리 는 window. alert 가 alert 라 는 것 을 알 고 있 습 니 다. 실행 하면 메시지 상자 가 팝 업 됩 니 다.이 함 수 를 다시 불 러 올 수만 있다 면 콘 솔 에 메 시 지 를 출력 할 수 있 었 으 면 좋 겠 습 니 다.content. js 를 수정 해 야 합 니 다:

// content.js
... ...
var script = document.createElement('script');
script.type = 'text/javascript';
//  alert  ，   msg   console
script.textContent = 'window.nativeAlert=window.alert;window.alert=function(msg){console.log(msg);};';
//            
(document.head || document.documentElement).appendChild(script);
//            script     ，          
script = null;

extension 을 다시 불 러 옵 니 다. test. html 에 접근 할 때 "From Popup" 단 추 를 누 르 면 메시지 가 console 에 출력 되 었 음 을 알 수 있 습 니 다. popup 의 "fire" 단 추 를 누 르 면 효과 가 같 습 니 다.
물론 이런 주입 방식 으로 테스트 스 크 립 트 를 불 러 와 실행 결 과 를 되 돌려 주면 좋 은 웹 UI 자동화 테스트 도구 가 될 수 있다.
HTTPS 에 대해 서 는 팝 업 입력 인증 대화 상 자 를 만 날 때 가 있 습 니 다. extension 웹 Request 기능 을 사용 할 수 있 습 니 다. Header 에 Authentication 정 보 를 추가 하면 이 대화 상자 의 등장 을 피 할 수 있 습 니 다.
자, 이제 웹 UI 자동화 테스트 는 기본적으로 자신의 extension 을 뛰 어 넘 을 수 있 습 니 다. 코드 를 쓰 고 결 과 를 텍스트 로 출력 할 수 있 습 니 다. 충분히 사용 할 수 있 습 니 다 ~ selium 에 대해 여러 가지 슬픔 을 느끼 지 않 아 도 됩 니 다.
J.Y.Liu
2014.09.15