2015年4月23日

好用,但是問題多多的Chart.js

Chart.js是一個很好用的javascript畫圖表工具,但是他卻有一些奇怪的問題。這麼久了似乎也沒有被解掉。
在這邊紀錄一下目前使用Chart.js遇到的問題:

  • 變換圖表資料導致錯亂
當你有一個有使用ToolTip的圖表,而這個圖表的內容需要動態替換時這個問題就會產生,範例如下



當切換圖表的時候,之前的第一個圖表會時不時的出現,擾亂使用者的思緒(只有當滑鼠在圖表上移動的時候會發生這個問題)
解決問題的方式很簡單,我被這個問題困住好久啊! 解法為 -- 在更換新的資料前,要先執行destroy(),如果不這麼做的話,當使用者在圖表上下了click事件的時候,圖表上的值也會取不到,或是會取到最早那個圖表的資料。看來就是兩個圖表完全重疊在一起了,而且事件還共用。

  • 不要使用barValueSpacing
這個問題只會發生在bar chart,因為只有bar chart有這個參數(喂~),加了這個參數之後在每個bar之間會出現一個間隙,但是這個東西會導致click也會完全出錯,到目前為止1.0.2還是沒有解決

2014年8月4日

利用Selenium IDE進行UI測試

  • 安裝與執行
    • Selenium IDE是Firefox的一個plugin,用來做UI的自動測試:下載網址為http://docs.seleniumhq.org/download/
    • 安裝後,點一下firefox 的工具 -> Selenium IDE ,就會出現底下畫面
螢幕快照 2014-08-01 下午1.40.15.png
    • 建立test Case可以使用畫面右方的Screenshot at 8月 01 13-41-31.png來進行錄製,錄製完後的畫面如下所示:
Screenshot at 8月 01 13-48-13.png
    • 錄製完後的case可以使用播放的按鈕Screenshot at 8月 01 13-49-49.png來執行。
    • Screenshot at 8月 04 16-37-34.png這個功能可以設定你要跑的test case是要快一點還是慢一點,通常慢一點比較好,跑太快常常會出問題。
    • 底下的Log視窗可以顯示目前執行發生了多少個問題或是正常完成。
    • 如果有設定WaitFor的Command的話,最長的等待時間是三十秒(預設,可以在option裡面設定)
  • 編寫測試語法
    • 除了自動錄製外,使用者也可以自行撰寫測試語法:點選右邊Table區塊的任一個工作項目後,視窗下方會出現Command、Target與Value三個欄位。
      • Command : 使用Seleium IDE提供的命令,有Click、Verify、Waitfor、Assert等數十種命令可以使用 http://docs.seleniumhq.org/docs/02_selenium_ide.jsp#script-syntax,官網的文件寫的很爛,可以參考http://software-testing-tutorials-automation.blogspot.in/search/label/selenium%20ide
      • Targert : 用來指定Command所要處理的目的,可以是CSS selector、Xpath、link、id或數值(例如pause這個command需要停留的毫秒數),點取target旁邊的Select可以在firefox的視窗裡面選擇你想要套用的元件,但是這個功能常常失效。
      • Value : 指定Command需要用到的數值,例如type時需要輸入什麼字串(pause的秒數需要設定在target)
    • 所有的測試語法都是html的table格式,每列共有三欄,分別是command,target與value。
    • 可以利用store這個Command將javascript運算結果儲存到selenium IDE裏面方便其他command叫用。
      • 例如底下的範例:
command:store
target:javascript{ var a = Math.random() * 5; Math.ceil(a+1);}
value:j

將會產生一個變數j,且其值為亂數取得2~6之間的整數,調用方式如下:

command:click
target:css=#modifyLocalTree > ul.jqueryFileTree:nth-child(${j}) > li.directory.collapsed > a

利用${}將變數括起來就可以直接使用。

    • 利用waitForxxx系列Command可以讓程式等待某個元件顯示或隱藏時再進行下一個動作,例如:
      • waitForElementNotPresent : 當DOM被移除時才會繼續進行下一步。
      • waitForElementPresent: 當DOM產生時才會繼續進行下一步。
      • waitForVisible : 只有當css的display屬性被設定可顯示時才會繼續進行。
      • waitFoNotrVisible : 只有當css的display屬性被設定none時才會繼續進行。
    • 利用type指令可以在指定的input裡面輸入自定的文字。
    • 利用click指令可以點選指定的DOM,同時也可以用來模擬點選radio或是checkbox,如果沒有指定radio的index,預設會點選第一個。

後面等我繼續使用,有心得再來補好了

2014年5月28日

jQuery 1.9之後的attr

今天在寫一個table中tr的click事件,本來想要在某一列上click之後就自動選取前方的checkbox;經過許久的測試後發現事情並不單純,利用以前舊有的attr方法來做竟然發生問題

原來的版本

在這個解法中是利用.attr('checked')來檢查目前checkbox的選取狀態,在第一次run的時候,功能完全正常;但是如果點了第二次他就失靈了,如果利用Chrome developer tool來查看元件,會發現checkbox的後面會忠實地加上checked="checked"這樣的屬性,妙的是checkbox的顯示完全是未選取狀態。

查了jQuery的文件後發現,在jQuery 1.9之後要改用prop,雖然這個在1.6版就有了,但現在看來1.9不用這個會出大問題

http://jquery.com/upgrade-guide/1.9/#attr-versus-prop-

修改後的版本

改用prop來檢測目前的checkbox狀態,並且用prop來變更checkbox狀態。這樣就可以正常呈現想要的功能,不過如果再用Chrome developer tool來看的話,會發現checkbox之後的checked ="checked"根本不會改變...
這真是太詭異了

2014年2月14日

PL/SQL迴圈及暫存資料表

莫名其妙被扯入Oracle EBS系統,被迫學習PL/SQL語法;
以下為建立暫存資料表及利用迴圈取得相對應子項目資料再一起寫入暫存的筆記:

//建立暫存資料表

create GLOBAL TEMPORARY TABLE temp_wales (
  DESCRIPTION VARCHAR2(80 BYTE),
  ASSET_NUMBER VARCHAR2(15 BYTE),
  DATE_PLACED_IN_SERVICE DATE,
  LIFE_IN_MONTHS NUMBER(4,0)
)
ON COMMIT PRESERVE ROWS;

//由A取得ID後再去比對B資料表中的Parent_ID

BEGIN

    FOR rec IN (SELECT ID,DESCRIPTION,ASSET_NUMBER,DATE_PLACED_IN_SERVICE,LIFE_IN_MONTHS FROM A )

//開始迴圈
    LOOP

//先寫入父資料的記錄到暫存裡

      INSERT INTO temp_wales( ASSET_NUMBER,DESCRIPTION,DATE_PLACED_IN_SERVICE, LIFE_IN_MONTHS) values( rec.ASSET_NUMBER,rec.DESCRIPTION,rec.DATE_PLACED_IN_SERVICE,rec.LIFE_IN_MONTHS);

//再寫入子資料的記錄到暫存裡

      INSERT INTO temp_wales( ASSET_NUMBER,DESCRIPTION,DATE_PLACED_IN_SERVICE, LIFE_IN_MONTHS)  SELECT ASSET_NUMBER,'改良',rec.DATE_PLACED_IN_SERVICE,rec.LIFE_IN_MONTHS FROM B WHERE Parent_ID=   rec.ID;

//結束迴圈

    END LOOP;

END;

//撈撈看是否有資料了

select * from temp_wales;


2012年11月30日

好濕!好濕啊~


蚤起,沐浴更衣。排腹中穢物,良久!
出浴門,驚覺八點過廿,疾著衣靴。天雨之,披雨簑,名之雙濕;跨鐵輪疾驅。過半,果蓑衣汁水淋漓,衣衫褲襪竟皆濕透,雙濕之稱果不負其名!
忽鐵輪沉重難以駕馭,下車觀之,鐵輪竟開口而笑!本應肥腴身型竟如路邊瘦丐奄奄一息。
攙鐵輪尋巷道中鐵輪工匠,不果,萬念俱灰!
撚袋中銅幣一枚,卜卦之;曰:今天不宜仕事,大喜!乃歸。

2012年7月26日

jQuery的droppable問題

最近在改同事寫的網頁,其中有個動態產生droppable div的功能,程式如下:
function createDiv(id){
    item =  '<div id="div_' + id + '">';
    $('#div_map').prepend( item).droppable({
        drop : function(event, ui) {
                $("#div_' + id).hide(); 
                do something ....
        }
    });
}

畫面上還有幾個其他的droppable div,見鬼的是明明動態產生的div是隱藏的,但是當我把dragable的物件拉過去時,他永遠都會觸發我動態新增的最後一個div事件;假如這個func我跑五次,他就會跑到div_5去;這實在是不合理,已經hidden的東西為什麼可以droppable?

測試了好久,感覺應該是物件剛建立就被賦予這個事件出錯,於是改成:


function createDiv(id){
   item =  '<div id="div_' + id + '">';
    $('# div_map ').prepend( item);
    $('#chat_' + id).droppable({
        drop : function(event, ui) {
        $("#div_' + id).hide(); 
            do something ....
        }
    });
}

問題解決!

2012年7月16日

Virtualbox - 變更VirtualBox硬碟大小

當VirtualBox硬碟設定為固定大小時,之後如果發現硬碟太小;這時無法用網路上說的方式增加空間,這世界並沒有想像中美好。

必須先將硬碟檔複製一份:

VBoxManage clonehd old.vdi  new.vdi --variant Standard

如果複製完出現uuid重複的話,再下:

VBoxManage internalcommands sethduuid new.vdi
來重新產生uuid

最後再用:
VBoxManage modifyhd new.vdi --resize 改變之後的大小(MB)

ex: VBoxManage modifyhd new.vdi --resize 200000

別再相信網路上抄來抄去的方法了....那真的不能用...

精選文章

利用Selenium IDE進行UI測試

安裝與執行 Selenium IDE是Firefox的一個plugin,用來做UI的自動測試:下載網址為http://docs.seleniumhq.org/download/ 安裝後,點一下firefox 的工具 -> Selenium IDE ,就會...