說起測試GA，真是一件枯燥乏味，重復性很高的工作，那么為什么我們不使用自動化測試代替它呢，顯然，很多公司的產品迭代太快，ga也變化的比較頻繁，但是確保ga工作正常，對于其他部門的工作是有很大幫助的，由于公司對于這塊比較注重，而且曾經出現過ga被前端修復bug而影響，所以抽空倒騰了下如何對ga進行自動化測試，由于自身比較習慣使用ruby，所以本帖都是ruby的代碼，思路是一樣的，喜歡的童鞋可以用其他語言去實現。

首先說說開始考慮的實現方案：

1. 使用selenium+firefox的插件抓取request生成har文件，嘗試過后發現不可行，點看此文章?http://www.cnblogs.com/timsheng/p/7209964.html

2. 使用proxy，講瀏覽器請求server的request轉發到本地，proxy的庫有很多，ruby內置的webrick就很好用，但是嘗試過后發現依然不行，webrick只能抓取http的request，我們網站是https協議的，抓取不到。

3. 使用evil-proxy,?https://github.com/bbtfr/evil-proxy 這個庫很強大，可以結合selenium使用，原理是運行時會生成自己的簽名文件，然后將生成的簽名文件import到瀏覽器就行了，具體如何操作請參考wiki，但是問題又來了，我們網站https的request都可以抓到，除了google的https request無法抓取，會提示無效簽名。

4. ok，這些簡單的方式都無法成功抓取ga的request，只能出絕招了，可能大家都知道，phantomjs是一個很強大的工具，它可以結合其他框架做headless網站測試，可以截圖，不同于selenium截取當前頁面圖，它可以截取全屏截圖，另外它可以做網頁測試，最關鍵的是它可以進行網絡監控。 傳送門在此，http://phantomjs.org/

所以我們需要使用的是phantomjs, 去進行頁面自動化，并且抓取生成的ga requests，用ruby去分析日志，并且進行校驗pageview和event的事件是否觸發，參數是否正確

不多說上代碼：

首先看一下目錄結構

?

?我們先來看一下student_ga.js文件

/*** Wait until the test condition is true or a timeout occurs. Useful for waiting* on a server response or for a ui change (fadeIn, etc.) to occur.** @param testFx javascript condition that evaluates to a boolean,* it can be passed in as a string (e.g.: "1 == 1" or "$('#bar').is(':visible')" or* as a callback function.* @param onReady what to do when testFx condition is fulfilled,* it can be passed in as a string (e.g.: "1 == 1" or "$('#bar').is(':visible')" or* as a callback function.* @param timeOutMillis the max amount of time to wait. If not specified, 3 sec is used.*/"use strict";function waitFor(testFx, onReady, timeOutMillis) {var maxtimeOutMillis = timeOutMillis || 8000, //< Default Max Timout is 3sstart = new Date().getTime(),condition = false,interval = setInterval(function() {if ( (new Date().getTime() - start < maxtimeOutMillis) && !condition ) {// If not time-out yet and condition not yet fulfilledcondition = (typeof(testFx) === "string" ? eval(testFx) : testFx()); //< defensive code} else {if(!condition) {// If condition still not fulfilled (timeout but condition is 'false')console.log("'waitFor()' timeout");phantom.exit(1);} else {// Condition fulfilled (timeout and/or condition is 'true')console.log("'waitFor()' finished in " + (new Date().getTime() - start) + "ms.");typeof(onReady) === "string" ? eval(onReady) : onReady(); //< Do what it's supposed to do once the condition is fulfilledclearInterval(interval); //< Stop this interval }}}, 250); //< repeat check every 250ms };// initialise various variables var page = require('webpage').create(),system = require('system'),address;page.viewportSize = {width: 1280,height: 800 };// how long should we wait for the page to load before we exit // in ms var WAIT_TIME = 30000;// if the page hasn't loaded after this long, something is probably wrong // in ms var MAX_EXECUTION_TIME = 30000;// output error messages var DEBUG = true// a list of regular expressions of resources (urls) to log when we load them var resources_to_log = [new RegExp('^http(s)?://(www|ssl)\.google-analytics\.com.*'),new RegExp('^http(s)?://stats\.g\.doubleclick\.net.*') ];// page.settings.resourceTimeout = 10000;// check we have a url, if not exit if (system.args.length === 1) {console.log('Usage: get_ga_resources.js http://www.yoururl.com');phantom.exit(1); } else {// address is the url passedaddress = system.args[1];// create a function that is called every time a resource is requested// http://phantomjs.org/api/webpage/handler/on-resource-requested.htmlpage.onResourceRequested = function (res) {// loop round all our regexs to see if this url matches any of themvar length = resources_to_log.length;while(length--) {if (resources_to_log[length].test(res.url)){// we have a match, log it console.log(res.url);}}};// if debug is true, log errors, else ignore thempage.onError = function(msg, trace){if (DEBUG) {console.log('ERROR: ' + msg);console.log(trace);}};// output console message// page.onConsoleMessage = function(msg) {// console.log(msg);// };// page.onResourceTimeout = function(request) {// console.log(request.errorCode);// console.log(request.errorString);// console.log(request.url);// // console.log('Response (#' + request.id + '): ' + JSON.stringify(request));// };// page.onResourceError = function(resourceError) {// console.log('Unable to load resource (#' + resourceError.id + 'URL:' + resourceError.url + ')');// console.log('Error code: ' + resourceError.errorCode + '. Description: ' + resourceError.errorString);// };// now all we have to do is open the page, wait WAIT_TIME ms and exittry {page.open(address, function (status) {console.log("Starting to open --" + address);if (status !== 'success') {console.log("FAILED: to load " + system.args[1]);console.log(page.reason_url);console.log(page.reason);phantom.exit();} else {// page is loaded!if(address != page.url){console.log('Redirected: ' + page.url)}// start to do actions on websiteconsole.log("Success to open --" + address);page.render("screenshot/homepage.png");// select top city london to clickpage.evaluate(function(s) {console.log("Click top city -> London");document.querySelector(".top-cities__city:nth-child(1)>a>img").click();console.log("click it done!!!!");});// submit enquiry until srp load completelysetTimeout(function(){waitFor(function() {// Check in the page if a specific element is now visiblereturn page.evaluate(function() {console.log("determine if contact an expert element is visible? ")cae_element = document.querySelector(".advicebar__btn.button.button--keppel.js-account-modal-enquire");if (cae_element.offsetWidth > 0 && cae_element.offsetHeight > 0) {return true;} else {return false;};});}, function() {console.log("Page_Url:" + page.url);console.log("--- Get into search result page ---");page.render("screenshot/search_result_page.png");page.evaluate(function() {console.log(document.querySelector(".advicebar__btn.button.button--keppel.js-account-modal-enquire").innerHTML);document.querySelector(".advicebar__btn.button.button--keppel.js-account-modal-enquire").click();console.log("Click contact an expert button");});console.log("--- Get into entry screen ---");page.render("screenshot/entry_screen.png");page.evaluate(function() {document.querySelector("#js-account-modal-enquiry .account-modal__step--visible .button.button--secondary").click();console.log("--- Get into sign up screen ---");document.querySelector("#js-account-modal-enquiry input[name='full_name']").value = 'tim sheng';document.querySelector("#js-account-modal-enquiry input[name='telephone']").value = '123123123';document.querySelector("#js-account-modal-enquiry input[name='email']").value = ("tim.sheng+" + (new Date().getTime()) + "@student.com");document.querySelector("#js-account-modal-enquiry input[name='password']").value = 'abc20052614';});page.render("screenshot/sign_up_screen.png");page.evaluate(function() {console.log('Click sign up button');document.querySelector("#set-password-button").click();});waitFor(function() {return page.evaluate(function() {console.log("determine if confirm button is visible? on about you screen");confirm_element = document.querySelector("#js-account-modal-enquiry #submit-about-you-button");if (confirm_element.offsetWidth > 0 && confirm_element.offsetHeight > 0) {return true;} else {return false;};});}, function() {console.log("--- Get into about you screen ---");page.render("screenshot/about_you_screen.png");page.evaluate(function() {document.querySelector("#js-account-modal-enquiry #submit-about-you-button").click();});waitFor(function() {return page.evaluate(function() {console.log("determine if budget field is visible? on about listing screen");budget_element = document.querySelector("#js-account-modal-enquiry input[name='budget']");if (budget_element.offsetWidth > 0 && budget_element.offsetHeight > 0) {return true;} else {return false;};});}, function() {console.log("--- Get into about listing screen ---");page.render("screenshot/about_listig_screen_unfilled.png");page.evaluate(function() {// click date picker plugindocument.querySelector("#js-account-modal-enquiry .date-picker").click();// select move in datedocument.querySelectorAll("#js-account-modal-enquiry .js-date-picker-move-in-fieldset input[class='js-date-picker-move-in-month']:not(:disabled)+label")[0].click();// select move out datedocument.querySelectorAll("#js-account-modal-enquiry .js-date-picker-move-out-fieldset input[class='js-date-picker-move-out-month']:not(:disabled)+label")[0].click();// input budget valuedocument.querySelector("#js-account-modal-enquiry input[name='budget']").value = '1234';// input university valuedocument.querySelector("#js-account-modal-enquiry .account-modal__step--visible input[name='university']").value = 'london';// dispatch inputing event to elemvar event = new Event('inputing');input_elem = document.querySelector("#js-account-modal-enquiry .account-modal__step--visible input[name='university']");input_elem.focus();input_elem.dispatchEvent(event);});waitFor(function() {return page.evaluate(function() {console.log("determine if university is visible? on autocomplete list");uni_element = document.querySelector('#js-account-modal-enquiry .autocomplete__item:first-child .autocomplete__item__link');if (uni_element.offsetWidth > 0 && uni_element.offsetHeight > 0) {return true;} else {return false;};});}, function() {console.log("--- University is visible on autocomplete list");page.render("screenshot/about_listing_university.png");page.evaluate(function() {document.querySelector('#js-account-modal-enquiry .autocomplete__item:first-child .autocomplete__item__link').click();});page.render("screenshot/about_listing_screen_filled.png");page.evaluate(function() {console.log("Click submit enquiry button");document.querySelector("#js-account-modal-enquiry .account-modal__step--visible #submit-about-stay-button").click();});waitFor(function() {return page.evaluate(function() {console.log("determine if success button is visible? on leads process screen");success_element = document.querySelector("#js-account-modal-enquiry .account-modal__step--visible .button.button--primary");if (success_element.offsetWidth > 0 && success_element.offsetHeight > 0) {return true;} else {return false;};});}, function() {console.log("submit enquiry from srp cae successfully!");page.render("screenshot/enquiry_success_screen.png");});});});});});},5000);setTimeout(function () {phantom.exit();}, WAIT_TIME);}});} finally {// if we are still running after MAX_EXECUTION_TIME ms exitsetTimeout(function() {console.log("FAILED: Max execution time " + Math.round(MAX_EXECUTION_TIME) + " seconds exceeded");phantom.exit(1);}, MAX_EXECUTION_TIME);} }

?

　　

?然后寫個ruby類去解析這個log, cop.rb

require 'uri'module Copclass Loggerattr_accessor :ga_requestsdef initialize path@ga_requests = open_log_file pathend# fetch pageview gadef pageviewGas.new ga_requests, 'pageview'end# fetch event gadef eventGas.new ga_requests, 'event'end# get all google analytics request recordsdef open_log_file pathall_ga_requests = []File.open("#{path}").each do |line|all_ga_requests << line if line.include? 'google'endall_ga_requestsendend# Gas is a class which is consisted of a list of specific ga requestsclass Gasattr_accessor :gas, :typeVALID_KEYS = ['dl','dp','ul','dt','ec','ea','el','cd17','cd15','cd5','cd1','cd14','cg1','cg2','cd18','cd2']def initialize all_gas, typeh_gas = handle_gas all_gas, type@gas = get_expected_gas h_gas@type = typeend# return the count of gasdef countgas.countend# use the value of key to get corresponding pageview record# it is better for pageview ga using dp to get value# use the value of key to get corresponding event record# it is better for event ga using el to get valuedef get_gas_by valuegas.each do |ga|ga.each do |k,v|if v == valuereturn gaendendendendprivate# fetch ga requests by typedef handle_gas all_gas, typenew_gas_arr = []all_gas.each do |all_ga|if all_ga.include? typedecoded_all_ga = URI.decode(all_ga)new_gas_arr << qs_to_hash(decoded_all_ga)endendnew_gas_arrend# get expected gasdef get_expected_gas gasexpected_gas = []gas.each do |ga|expected_ga = {}ga.each do |k,v|if VALID_KEYS.include? kexpected_ga[k] = velsenextendendexpected_gas << expected_gaendexpected_gasend# decode urldef qs_to_hash querykeyvals = query.split('&').inject({}) do |result, q|k,v = q.split('=')if !v.nil?result.merge({k => v})elsif !result.key?(k)result.merge({k => true})elseresultendendkeyvalsendend end

?

?Gas類返回的是hash，我希望取hash的value根據object.xx? 的形式，而不是hash[] 的方式，所以重新打開hash類，根據ga的常用參數使用define_method動態定義一些方法

hash.rb

class HashVALID_KEYS = ['dl','dp','ul','dt','ec','ea','el','cd17','cd15','cd5','cd1','cd14','cg1','cg2','cd18','cd2']def self.ga namedefine_method "#{name}" doself["#{name}"]endendVALID_KEYS.each do |e|ga "#{e}"endend

基本準備工作差不多了，現在我們用rspec去管理測試用例，在執行case前，我們需要去清洗一下環境，刪除log文件，截圖，然后執行phantomjs腳本，

bridge.rb

module Copdef clear_env`rm -rf screenshot/*.png``rm -rf log/*.log`enddef submit_lead_from_srp_cae`phantomjs js/student_ga.js https://hurricane-cn.dandythrust.com > log/ga.log`end end

讓我們在根目錄下rspec --init一下，生成spec_helper.rb 文件，在此文件中，引入cop.rb, hash.rb, bridge.rb以便于在_spec文件中使用

spec_helper.rb

require 'cop' require 'hash' require 'bridge' include Cop

新建個ga_spec.rb文件，開始編寫case

require "spec_helper"describe "GA Checking" dodescribe "New user submit lead from srp cae" dobefore(:all) doclear_envsubmit_lead_from_srp_caeendlet(:logger) { logger= Cop::Logger.new "log/ga.log" }context "Pageview" dolet(:pageview_gas) { logger.pageview }it "should be correct on homepage" doresult = pageview_gas.get_gas_by "/"expect(result.dp).to eql "/"expect(result.ul).to eql "en-us"expect(result.cd17).to eql "3rd Party Login" unless result.cd17.nil?expect(result.cd15).to eql "zh-cn"expect(result.cd5).to eql "home"expect(result.cd1).to eql "desktop"expect(result.cd14).to eql "Special Offers"expect(result.cg1).to eql "Home Page"endit "should be correct on search result page" doresult = pageview_gas.get_gas_by "/uk/london"expect(result.dp).to eql "/uk/london"expect(result.ul).to eql "en-us"expect(result.cd17).to eql "3rd Party Login" unless result.cd17.nil?expect(result.cd18).to eql "231004024"expect(result.cd15).to eql "zh-cn"expect(result.cd5).to eql "search"expect(result.cd2).to eql "London"expect(result.cd1).to eql "desktop"expect(result.cg1).to eql "Search"expect(result.cg2).to eql "City"endit "should be correct on entry screen" doresult = pageview_gas.get_gas_by "/modal/enquiry/cae_srp/signup"expect(result.dp).to eql "/modal/enquiry/cae_srp/signup"expect(result.ul).to eql "en-us"endit "should be correct on sign up screen" doresult = pageview_gas.get_gas_by "/modal/enquiry/cae_srp/signup/email"expect(result.dp).to eql "/modal/enquiry/cae_srp/signup/email"expect(result.ul).to eql "en-us"endit "should be correct on about you screen" doresult = pageview_gas.get_gas_by "/modal/enquiry/cae_srp/signup/email/confirm_contact_info"expect(result.dp).to eql "/modal/enquiry/cae_srp/signup/email/confirm_contact_info"expect(result.ul).to eql "en-us"endit "should be correct on about stay screen" doresult = pageview_gas.get_gas_by "/modal/enquiry/cae_srp/signup/email/about_stay"expect(result.dp).to eql "/modal/enquiry/cae_srp/signup/email/about_stay"expect(result.ul).to eql "en-us"endit "should be correct on enquiry success screen" doresult = pageview_gas.get_gas_by "/modal/enquiry/cae_srp/signup/email/enq_submitted"expect(result.dp).to eql "/modal/enquiry/cae_srp/signup/email/enq_submitted"expect(result.ul).to eql "en-us"endendcontext "Event" dolet(:event_gas) { logger.event }it "click top city on homepage is correct" doresult = event_gas.get_gas_by "topCities"expect(result.dp).to eql "/"expect(result.ul).to eql "en-us"expect(result.ea).to eql "topCities"expect(result.ec).to eql "homePage"expect(result.el).to eql "city:231004024"expect(result.cd17).to eql "3rd Party Login"expect(result.cd15).to eql "zh-cn"expect(result.cd5).to eql "home"expect(result.cd1).to eql "desktop"expect(result.cd14).to eql "Special Offers"expect(result.cg1).to eql "Home Page"endit "click contact an expert on srp is correct" doresult = event_gas.get_gas_by "cae > button:getInTouch"expect(result.dp).to eql "/uk/london"expect(result.ul).to eql "en-us"expect(result.ea).to eql "cae > button:getInTouch"expect(result.ec).to eql "searchClick"expect(result.el).to eql "231004024-London"expect(result.cd17).to eql "3rd Party Login"expect(result.cd15).to eql "zh-cn"expect(result.cd5).to eql "search"expect(result.cd2).to eql "London"expect(result.cd1).to eql "desktop"expect(result.cg1).to eql "Search"expect(result.cg2).to eql "City"endit "click sign up with email on entry screen is correct" doresult = event_gas.get_gas_by "continueWithEmail"expect(result.dp).to eql "/modal/enquiry/cae_srp/signup"expect(result.ul).to eql "en-us"expect(result.ea).to eql "signupScreen"expect(result.ec).to eql "enquiryFlow"expect(result.el).to eql "continueWithEmail"endit "click continue button on sign up screen is correct" doresult = event_gas.get_gas_by "continueBtnClicked"expect(result.dp).to eql "/modal/enquiry/cae_srp/signup/email"expect(result.ul).to eql "en-us"expect(result.ea).to eql "signupWithEmailScreen"expect(result.ec).to eql "enquiryFlow"expect(result.el).to eql "continueBtnClicked"endit "click request details button on about you screen is correct" doresult = event_gas.get_gas_by "requestDetailsBtnClicked"expect(result.dp).to eql "/modal/enquiry/cae_srp/signup/email/confirm_contact_info"expect(result.ul).to eql "en-us"expect(result.ea).to eql "confirmContactInfo:email"expect(result.ec).to eql "enquiryFlow"expect(result.el).to eql "requestDetailsBtnClicked"endit "focus destination uni on about stay screen is correct" doresult = event_gas.get_gas_by "focus:destinationUniversity"expect(result.dp).to eql "/modal/enquiry/cae_srp/signup/email/about_stay"expect(result.ul).to eql "en-us"expect(result.ea).to eql "aboutStay"expect(result.ec).to eql "enquiryFlow"expect(result.el).to eql "focus:destinationUniversity"endit "click submit form button on about stay screen is correct" doresult = event_gas.get_gas_by "submitBtnClicked"expect(result.dp).to eql "/modal/enquiry/cae_srp/signup/email/about_stay"expect(result.ul).to eql "en-us"expect(result.ea).to eql "aboutStay"expect(result.ec).to eql "enquiryFlow"expect(result.el).to eql "submitBtnClicked"endit "enquiry submitted is correct" doresult = event_gas.get_gas_by "cae_srp"expect(result.dp).to eql "/modal/enquiry/cae_srp/signup/email/enq_submitted"expect(result.ul).to eql "en-us"expect(result.ea).to eql "success"expect(result.ec).to eql "enquiry"expect(result.el).to eql "cae_srp"endendend end

?

The End

?

轉載于:https://www.cnblogs.com/timsheng/p/7380902.html

總結

以上是生活随笔為你收集整理的ruby + phantomjs 自动化测试 - GA的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。