# webdriver.io - 前端測試入門筆記… 前端測試工具很多種
我這裡的需求是要做自動化測試
不知為何就選了這套 webdriver.io
可能就只是單純名字很炫(誤
當然一開始要先要有 Selenium
但為何 Selenium 跟我以前的印象有差別了…
我發現它的 firefox add-on 不能把錄製的動作輸出成 code 了, 是我的錯覺嗎?還是改方式了
但我想說就算了, 直接用寫的也罷
webdriver.io 只是因為是在我看過的關於測試文章中最後有印象的東西所以就去找它了(這是事實…
也還好我的記憶沒錯, 看了介紹和文件覺得 webdriver.io 有符合我的需求且又是用 Node.js 來寫, 所以對我較友善
先記錄一下使用流程
## Base tool Java sudo apt-get update java -version sudo apt-get install default-jre sudo apt-get install default-jdk Node.js Install
## On Local Get Started
突然發現文件寫得很詳細了…
雖然在做設定那有些選項不同但也影響不大
但想玩進階的方式可參考以下文章
設定 Selenium 參數可參考
基本上以下是我建的順序
### 1 先建 package.json { "name": "webdriver", "description": "automation test", "devDependencies": { } } ### 2 下載 Selenium server 之後有新版請再去確認版本
...
# Let’s Encrypt - Has a certificate problem in Android Chrome If you use Let’s Encrypt as SSL certificate
Then setting this in Nginx
ssl_certificate /etc/letsencrypt/live/<domain>/cert.pem; You can find it maybe has problem in Android Chrome
Now you can modify this
ssl_certificate /etc/letsencrypt/live/<domain>/fullchain.pem; ## Test your SSL SSL Server Test
Refer - Let’s encrypt certificate not working for Andriod’s Google Chrome
...
# Why i from RequireJS to webpack RequireJS is a Asynchronous Module Definition(AMD) lib
Its powerful to handle modulize on your page and you can handle all loader on JavaScript, you can focus on JavaScript function and web page.
But if your module is become complex and more module, you can find JavaScript request become more and more.
You can find it is a serious performance problem.
Your network has lot of request of js.
...
# JavaScript - 動作行為抽象化實例 其實標題真的不知道要怎麼定
因為只是要說明一個實例, 但又不想扯到其他太制式的東西(設計模式), 但這範例又可用於其他地方, 所以到最後就用了個似是而非的標題了…
先說一下可能的使用情境
當你在做一個動作時要做一件事 ex: 呼叫 API、紀錄 GA、狀態改變之類的事情
sample code
document.querySelector('a').addEventListener('click', function () { // GA or call API or do somethong }); 以紀錄 GA 為例
但是如果是紀錄 GA 點擊事件就會有許多區域要記錄點擊來瞭解使用者點哪個區域較多, 就要在不同區域綁定不同的 GA 但日子一久或程式變大的情況要找哪有綁 GA 就很不好找, 所以這時就需要有個 interface 來統整這事情
document.querySelector('#item').addEventListener('click', function () { // GA or call API or do somethong interfaceGa(this); }); document.querySelector('#banner').addEventListener('click', function () { // GA or call API or do somethong interfaceGa(this); }); function interfaceGa(argument) { var name = argument.
...
# Slack - bot 研究雜記 最近 bot 很夯
再加上公司需要一些自動部署與指令化的一些流程要改善, 所以就來研究一下
剛好我們是用 Slack 所以就先來試試 Slack bot 了
## Intro 先說明下最簡單的指令化處理事件的流程
大致上就是如此
再來說明一下 Slack bot 流程
所以我們需要做兩件事
在 Slack 建立一支 bot
建立 bot client 的程式
在此先說明一下 bot client
Slack bot client 是用 nodejs 寫的, 但基本上會寫 JavaScript 就可以了, 而 bot client 是放在任何可以連上網路的機器, 只要能跑 nodejs 的環境即可, 所以基本上可以先在 local 測完再上到線上的機器
## 建立 Slack bot Bot Users
### 建立 bot Go to url https://<your team name>.
...
# Node.js - 直接執行指令 因為最近要用 nodejs 做一些事, 所以就趕鴨子上架的先把功能做出來再說
然後就立馬遇到問題了…
在 PHP 中要直接執行 command line 是使用 exec
因為之前都用 PHP 寫 Shell Scripts 所以找了一下用 nodejs 要如何寫
先是找到了以下的 code
function run_cmd(cmd, args, callBack ) { var spawn = require('child_process').spawn; var child = spawn(cmd, args); var resp = ""; child.stdout.on('data', function (buffer) { resp += buffer.toString(); }); child.stdout.on('end', function() { callBack (resp); }); } // example run_cmd( "ls", ["-l"], function(text) { console.log (text) ; }); 但是發現如果是要用像是 mkdir 或者要 run shell 就會出 ENOENT 的 error
...
# JavaScript - facebook save to facebook button 2016 F8
Facebook release new function - save to facebook
Then we can use it now
## Step 1 Go to facebook developer Save Button - Social Plugins - Documentation - Facebook for Developers
## Step 2 Build or use facebook application
If you had facebook application can skip this step
If you build facebook application and you can get this code
...
# Google Adsense domain 設置 一點設定 Google adsense 的心得
因為有時會寫一寫筆記或部落格記錄人生
然後因為工作進到跟廣告有點關係的公司, 遇到裡面的一些專家
有人提議說, 既然我有寫文章的習慣, 那也可以放個廣告賺一點錢
但我個人是不太喜歡放廣告, 畢竟大家都知道廣告是拖累網站速度的元凶
但最近想說試試可不可以在自己的網站放個一個版位的廣告, 看能不能抵掉 GCP 維持的費用(應該是不太可能…
所以就在自己寫的 blog 和自己做的一些 service 放上去試試
這紀錄一下一些在用 Google adsense 比較特別的行為與情況
## US 100 才能領出來 我這要等到幾時啊…
## Google adsense 是動態 CPC + CPM 計算價錢 所以沒一定的價格, 似乎有受流量影響
## 眾所皆知, 廣告通常是 by domain 申請, 現在用 subdomain 是不行的 很久以前依據在 subdomain service 的話似乎可以, 但現在不行了
因為我用 logdown 申請說不能用 subdomain 申請…(明明約半年前還可以, 只是當時不知為何一直說我違反他們的協議, 所以一直申請不過
但 Google 自己的 blogger 卻可以, 我試過了因為我有個 blogger, 但 Pixnet 我沒試過(不過 Pixnet 可以跟他們自己申請廣告分潤
...
# JavaScript - DOM object check array & isArray polyfill One day my colleague find a question.
ECMA script isArray is not work when object is DOM element
Array.isArray(document.querySelectorAll('div')); // false And polyfill for old browser
Object.prototype.toString.call(arg) === '[object Array]'; Still fail
Object.prototype.toString.call(document.getElementsByClassName('product-img')); // [object HTMLCollection] Object.prototype.toString.call(document.querySelectorAll('div')); // [object NodeList] So i try to make a polyfill
Array.isArray = function(arg) { var type = Object.prototype.toString.call(arg); if (type === '[object Array]' || type === '[object HTMLCollection]' || type === '[object NodeList]') { return true; } return false; };
...
# Vim - JavaScript auto complete 因為同事幾乎都在用 Vim 但我每次都在看他們一直打字我看了就很痛苦 所以就建議他們用 auto complete 的功能, 但我個人因為很少用 Vim 所以就讓他們自己去找套件(我個人不喜歡在 Vim 上裝套件)
但他們似乎都遇到困難 所以我就找了一下找到個不用裝套件又可用在 Linux 和 Mac 上最簡單的 JavaScript auto complete 的方式, 應該是因為 Vim 已經內建了
只要在 .vimrc 設定
autocmd FileType javascript set omnifunc=javascriptcomplete#CompleteJS 使用就是輸入部分關鍵字後先按 Ctrl + x 再按 Ctrl + o 就可以了
但只支援舊的 JavaScript API
Refer - How to auto-complete JavaScript syntax in Vim
如果要新的得再試別的方法 似乎可以補字庫進去 More
VIM的JavaScript补全
...