"網站測試"共有37篇文章

隨著HTML5與CSS3的推出後，前端技術推陳出新，隨之而來的就是瀏覽器的亂爭。 我們時不時的會發現一些新奇好用的技術，例如：動畫的Transform、排版新寵兒Flex(Box)，恨不得馬上套用到新的專案或是往後的設計中，但更多的時候是我們只能眼睜睜的放棄這些新東西，繼續使用較舊但也是相對穩定的方法。  

網路越來越發達，大家對網頁的要求也越來越高，不只要美觀、功能強大還要獨特性高。在這種要求下，測試網站就變成很重要的一件事。網路上可以找到許多強大的測試網站的軟體工具，但如果能以簡單快速的方式來測試網站，是否更加容易上手呢？ 今天歐斯瑞就為大家來介紹一個測試工具-”Selenium”。一起來看看吧！   Selenium是什麼？ Selenium

Elasticsearch產品使用心得分享   它的設置非常簡單，只要在各種伺服器上安裝Filebeat、Metricbeat、Auditbeat和Packetbeat，然後統整報告給Elasticsearch數據庫。 以下是我在Elasticsearch + Beats的使用心得&經驗分享給各位。 Filebeat和Metricbeat擁有自己的模組。這些是位於 /etc/{metric,file}beat/modules.d/中的特定服務的配置文件。雖然可以在主要配置文件中為Filebeat或Metricbeat執行特定服務的配置，但您也可以使用像是 filebeat

當網站建置完成後，緊接著就是檢測階段了，以避免上線後產生的問題;像是客戶進行線上購物的過程中發生無法購買的情況，或使用者體驗不佳而失去購買慾望。那麼在進行檢測時應該注意哪些細節呢？ 今天歐斯瑞就和大家簡單分享在進行檢測時應該注意的細節，一起來看看吧！   1. 正確的最終版本設計 作為一個較具規劃的網站勢必都有網站初始設計，在這過程中多多少少都會經過幾次的校稿與確認，在開始檢測前請記得確認最終版本的設計，即使是部分調整或小細節調整都可能會影響到整體網站，才不會發生設計與最後測試端不同步的意外發生，好比說整體網站的字型樣式是否正確與統一？項目符號、效果等是否有按照期望的方式顯示？

 今天要來測試一個網頁的讀取速度，當中的圖片多寡會影響多少呢？   首先將我們的Astralweb的官網轉出為Html檔，去除了PHP與部分JS的因素並與測試圖片放置在同一個伺服器上，圖片大小沒有固定，扣除外連結的圖片後，我們將分別測試加上額外的20、60與100張圖時，網站的讀取速度會差多少。   每個數量都將統一以清除快取的方式各刷新10次，來計算讀取的時間。 同時使用GTmetrix，選擇與我們較相近的香港伺服器來測試。 (目前網站中的圖片34張，空間佔了3.7MB)  

  隨著時代的進步，對於視覺上的美化越來越重視，使得網站整體架構也隨之變得更為龐大和複雜，如果能使用工具來協助測試人員進行測試，也可使整個專案能如期完成。那麼，該如何選擇工具來測試如此龐大又複雜的網站呢？ 今天歐斯瑞就要為大家介紹一個測試網站的工具”JMeter”，一起來看看吧！   JMeter是什麼？ JMeter是一套開源的測試軟體，主要是用來測試網站功能及系統負載較重的情形下是否能正常運作，或是在給定的負載量下其效能的表現結果是否符合預期。JMeter原本只用在測試客戶端與服務端結構的軟體，而現在已能支援不同的模塊。它的操作介面簡單，相信你也可以快速上手。

  隨著網路的普及化，人們的食、衣、住、行、育、樂幾乎都離不開使用網路來下單購買，相對也衍生出網路資訊安全的問題。如果網站不夠安全，很可能導致資料外洩，特別是網站有會員登入、金流系統…等，或者是在購物網站進行線上交易時最容易發生信用卡資料被竊取等。那麼該如何檢測網站SSL憑證是否在安全等級呢？   現在一起跟著歐斯瑞來看看Qualys SSL LABS這個工具吧！   SSL憑證是什麼？

隨著網頁開發技術不斷進步，相對地檢測網站的分析工具也得跟進，才足以因應不斷變化的開發技術。歐斯瑞要介紹這款屬於初階入門的檢測網站分析工具Website Grader，好讓您的網站不論是在開發或維護過程中，都能清楚地知道您網站的優勢與劣勢，以便進一步改善您網站的弱點。   Website Grader是款檢測網站的分析工具，它主要是根據效能、行動裝置、SEO、安全性等來評估您的網站在哪個部分需要做調整或是進一步改善(例如：網頁加載時間、SEO的核心元素)，

相信許多前端工程師在開發響應試網頁時，常常會使用一些輔助工具來測試在不同尺寸的行動裝置上所顯示出來的網頁效果是否正常，像Chrome瀏覽器內建的開發人員工具裡就有兼具模擬各種裝置尺寸的功能，對大部分前端開發者而言也是較方便與使用的。   但如果你想要在同個頁面可以看到不同尺寸所呈現出來的網頁效果，以現在前端開發者所選擇使用的工具普遍都是一次只能顯示一種，無法同時預覽多種尺寸。   所以，今天歐斯瑞就和大家介紹Sizzy這款工具，好讓前端開發者能有更多選擇，一起來看看吧！    

Postman是一款Web API測試工具，原本只是在Chrome上的plug-in的軟體而已，但現今已有在不同平台的版本可以下載使用，讓想使用此測試工具的使用者有更多不同的選擇！ 如何安裝 Postman官網提供了許多不同平台的App版本可下載。 https://www.getpostman.com/ 你也可以使用Chrome瀏覽器到線上應用程式商店去搜尋安裝Postman https://chrome.google.com/webstore?utm_source=chrome-ntp-icon 新增成功後你可以在 chrome://apps/ 頁面看到Postman

一個優質的網站，除了整體介面、功能與商品外，也應該注意網站的速度(不含額外因素，如：網站所在位置)，因為它除了會反應在使用者體驗外，也可能影響到網站SEO排名。畢竟現在已是人手一機，使用者隨時都能上網，倘若使用者因載入速度太慢放棄等待而離開網站(特別是購物網站)，起不錯失了成交的機會。 相關文章：SEO優化指南 那麼該如何幫自己的網站做健檢，以進一步了解網站需不需要改善或該朝哪個方向改善，進而加以優化？   今天歐斯瑞介紹以Google所提供的檢測工具PageSpeed Insights來做介紹。Page Speed

  隨著時代的變遷，網路購物已成為人們在繁忙的生活中取得最方便、最快速的購物方法，不管是食品、服飾、娛樂等都能在網上購買到。 然而，一個購物網站的好壞與成敗，在在都取決於網站本身的設計是否貼近使用者操作習慣以及功能是否正常。特別是當客戶在您的網站下了訂單並完成付款，卻因為某個因素導致系統沒有接收到這筆訂單或是收到的訂單資訊與客戶實際下單的資訊不符造成誤出商品，而讓客戶感到不愉悅或是有了很糟糕的購物體驗，那麼該如何避免發生這種情況呢？ 今天歐斯瑞就來談談在檢測客戶訂單時有哪些流程？本範例以使用Magento為網站來檢測客戶訂單(不包含POS訂單系統整合)，一起來看看吧!  

  2016年已畫下句點迎向2017年了，在2016年裡部分舊機型也逐漸被淘汰掉，而新款智慧型手機與平板仍舊不斷地推出，那麼在新的一年裡不管是形象網站或電商網站所要測試的裝置、瀏覽器或系統又有哪些變動呢？ 在這裡歐斯瑞整理出2017年QA測試裝置清單圖表(圖表所列為大眾常用的設備、系統、瀏覽器…等，實際還是請以供應商提供的為準)。   桌機 系統 瀏覽器 & 版本 解析度 Windows 10 Chrome Firefox Explorer Edge Safari 1. 1920×1080 2. 1600×900 3.

相信現在有很多人都有架設網站的經驗吧？不論是部落客，自己架設網站伺服器，使用網路服務開站，不過問題來了，很多時候網站出問題時，不是技術人員的你，是否有辦法透過一些工具協助做初期問題判斷呢？今天就3個方向的問題介紹3個免費的工具軟體給各位。   1.網站壞了，打開瀏覽器說找不到網頁。   就像你用電腦工作時，電腦會當機；網站伺服器他也有可能當機(流量太大，太多人看你的網站，伺服器等級不夠…等等)，但是連不到網站可不一定是他當機了，也有可能是你的網路問題，該如何判斷？  

先前在「Windows內建的錄影工具-步驟收錄程式」文章裡談到了遇到求救問題或是不知道該如何表達才能讓技術人員馬上明白問題所在的情況時，可以利用步驟收錄程式將操作畫面錄製下來，以便提供給技術人員能快速了解與解決問題。   但如果是使用者在使用實體行動裝置或是測試人員在實體行動裝置上進行測試時發生問題，就沒辦法使用步驟收錄程式了，這時該如何將在實體行動裝置上的操作畫面錄製下來呢？   所以，今天Astralweb要為大家介紹Reflector 2這個工具，一起來看看吧!   Reflector

當網站建置完成後，便是要開始進入測試階段。而在進入測試階段過程裡多少都會在不同平台、瀏覽器上測試，但其實這是件滿困難的事(特別是網站有響應式設計)，畢竟不太可能在同一台電腦上安裝不同版本的作業系統與瀏覽器，或是買入各廠牌不同型號的智慧型手機及平板來逐一進行測試。   所以今天Astralweb就為大家介紹BrowserStack這個測試工具，在這裡分成桌機和行動裝置來做介紹，一起來看看吧!   桌機 本範例所選用的作業系統及瀏覽器分別是Windows 10和Chrome

相信大家都有過遇到求救問題時，該如何表達才能讓技術人員馬上明白問題所在的情況吧!!不管是身為一名QA測試人員，要將所測到的Bug陳述出來，但有些卻很難用文字描述就能表達清楚。又或者是使用者碰到問題時，需要尋求協助解決，比如說在操作過程中不知道哪個環節操作錯誤，導致無法得到所想要的結果等等，這些都不是幾個字或幾句話就能解釋清楚的。 此時如果有實際的操作畫面可以提供給技術人員，那麼技術人員就可以很清楚地知道問題點並加以解決，所以歐斯瑞要為大家介紹Windows內建的錄影工具-步驟收錄程式。步驟收錄程式(Problem Steps

2016年已悄悄地過一半了，在這段時間歐斯瑞也測試了許多不同的網站，每個網站所想要的需求也都不太相同，再加上現在智慧型手機、平板不斷的推陳出新，各家規格與系統都一直在做更新與改變，相對的所要測試的範圍就變得非常的廣。歐斯瑞在這裡為大家整理出2016年下半年QA必測清單(表中所列為較普遍常用的，系統部分請以各廠商所提供之版本為主)，提供給大家作參考。 上表僅是提供大家一個QA必測裝置、解析度等等的參考方向，當然，您也可以依據客戶要求或是該網站中較多使用者使用的系統、瀏覽器…等來進行測試。   以上是2016年下半年度QA必測清單，如果您有任何問題，歡迎您與我們聯絡!

在數位世界中，如何確保個人隱私的保密及安全一直是大家都非常關注的議題。同時，電商經營者也希望藉由安全性能的提升，確保他們的客戶能享有最安全的瀏覽及購物經驗。 從過去的一年到最近，有幾起關於保護個人數位資訊隱私的新聞值得讓我們留意：FBI要求Apple提供破解iPhone的程式但遭到後者拒絕、知名通訊軟體WhatsApp將所有通訊內容改為使用加密連線傳輸、極受歡迎的部落格平台wordpress.com將所有註冊在其網域下的部落格改為HTTPS連線、甚至搜尋引擎巨擘Google也宣布將會對全站採用HTTPS連線的網站提升排名。這些全球知名企業對於資訊傳輸安全性的重視實質上反應了使用者的需求。

  相信不少剛接觸Google Analytic的朋友，常常遇到設置完追蹤事件，卻無法在報表中看到數據的情形，想要Debug卻又不知如何著手，尤其是當追蹤事件非常多的時候，要找到錯誤點更是令人頭痛萬分啊！ 今天我們就要來介紹一款簡單好用的Chrome小插件——GA Debug！ 首先，你要： 1.  進入Chrome線上應用程式商店：https://chrome.google.com/webstore/category/apps 2. 在搜尋欄位打上“GA Analytics Debugger”，並且將它加到Chrome。 3.

現今使用智慧型手機與平板電腦已非常普遍化了，而響應式網頁設計(互動式網頁設計)儼然已成為網站設計的主潮流。比方說購物網站重視操作簡單的購物流程，其目的是為了讓使用者在使用或操作上能更便利，而響應式網頁設計則是能讓整體購物流程在行動裝置上更具便利性。 所以在設計響應式網頁時，要測試電腦與行動裝置，因為這兩種的螢幕有所落差，為了讓網頁適用於不同裝置上，對於很多網頁設計師或是QA人員來說，在測試響應式網頁時都會使用瀏覽器本身提供的模擬響應式設計工具，比方說Google的Toggle device mode、Firefox的適應試設計模式…等，以測試在不同裝置上是不是都能夠完整呈現出來。

在前幾篇分享文章裡和大家分享了一些有關在測試電商網站時，可能會偵錯到或是較常見到的各種錯誤，不管是畫面或功能方面，或者是所使用的設備與瀏覽器…等等。特別是當一個電商網站有做響應式網頁時更應該要小心謹慎地測試，以避免在其他行動裝置上瀏覽網頁時發生跑版或是功能有問題的情況。那麼到底有哪些是很容易不被注意與被忽略的呢？ 今天歐斯瑞的測試人員J整理了在測試電商網站時，十大常見的錯誤給大家參考 下面例舉幾個最常犯的錯誤，並提供範例圖與說明讓大家了解   TOP 1  位置 位置往往是在測試時很常見到的錯誤，舉凡文字、圖片、按鈕位置…等，以下圖為例。

系統整合主要是把在不同系統和設備上的不同功能串連起來，形成一個資料往來的交流管道。簡單來說就好比從A山到B山，勢必要有一座橋樑來連接兩座山以便往來。就連現在大部分的購物網站也不例外，舉凡ERP系統整合、金流系統整合、物流系統整合…等，都會將所要使用的系統整合串接起來。 所以今天就以Magento與金流系統做整合為例，那麼該如何檢測呢？流程畫面如下：   簡易流程示意圖         成功案例： 假設測試電商網站A選好商品並按下”前往付款”按鈕，如下圖。      

當完成一個電商網站後，最主要的便是測試網頁內容是否一致、功能是否正常運作，以及測試在使用不同的作業系統和不同的瀏覽器進行網頁瀏覽時，其網頁是否有發生跑版、文字設定或者是發生圖形不符合原設計(即客戶確認定稿)…等等的情況產生。   在開始例舉示範說明之前，在資訊分享裡有一篇QA人員你做對了嗎？- QA 測試表單大解析的文章，在文章內談到了該往哪個方向開始進行測試？要先從哪種設備開始呢？是畫面還是功能呢？所以今天就以整體網頁來說，不管是畫面還是功能；而是以花最多時間在偵錯的網頁錯誤這部分來提供幾個範例給大家參考。

當一個電商網站完成時，勢必都一定要測試整體結帳流程是否有問題產生，從挑選商品一直到完成結帳這一整個流程，都是身為一名QA工程師或QA測試人員必須一而再地重複並使用各種不同付款方式來進行測試，以確保消費者能順利完成結帳，進而順利購得所買的商品，這才能達到一個電商網站的最終目標，那麼又該如何確認呢。 在前幾篇的文章有和大家分享一篇電子商務網站的基本測試，在文章裡談到了結帳時可能會有兩種情況產生，一種是以訪客身分(不需要登入/註冊)進行付款，另一種則是以會員身分(需要登入/註冊)進行付款，如下圖。 然而不管是用哪種身分進行結帳流程，都會有結帳成功或發生結帳失敗的情況，如下圖：

微軟繼2014年中宣布全面停止支援Windows XP之後，最近再度宣布將在2016年1月12日將停止支援舊版的IE瀏覽器(Internet Explorer)；這也意味著繼續使用舊版IE的用戶將會暴露在未知的安全性風險之下。   這次的宣布代表只有微軟宣布支援的作業系統以及IE才能繼續獲得更新，根據微軟IE支援週期網頁（https://support.microsoft.com/zh-tw/lifecycle#gp/Microsoft-Internet-Explorer）的說明，以下組合的作業系統及對應的IE版本才能在今年1月12日之後繼續享有技術支援以及安全更新的服務。

在上一篇電商網站實戰測試篇—版型幾大常見錯誤，談到了版型就好比是房子的基底，那麼功能可以說是房子的隔間與設備了。而功能的好壞與便利性也很可能會間接影響使用者對該網站的使用體感。所以今天要和大家分享『電商網站基本功能常見的幾大錯誤』。   常見的幾個基本功能錯誤，大部分應該有以下幾個： 未設搜索條件 未設連結 未顯示提醒或警示訊息 圖片沒有連結到正確位置或圖片讀取錯誤 網頁語系設定 (使用轉換套件或直接用google翻譯除外) 現在我們來看看阿凱所經營的電商網站凱子の店有哪些常見的基本功能錯誤呢？

當一個電商網站完成後，並不是完成就好。對網站而言，每個元素及功能都是需要不斷被測試與驗證的。而功能測試則是對每個獨立的功能進行驗證，以確保功能可以正常地使用。然而，這些種種測試與驗證其最終目的都是為了提供使用者一個優質的電商使用經驗。   之前跟大家分享了網站測試-功能篇(上)後，今天Astralweb要來與大家分享的是功能測試的最後一部分，分別是連結與表單測試。   在這裡我們將連結功能與表單功能分開說明與示範   什麼是連結？ 連結是在網站內不可缺少的主要功能之一，主要是用在各個頁面之間的切換和引導使用者到一些未知頁面的網址。  

許多系統、程式、平台等，在匯出資料時的原始檔都為CSV格式，可以整齊的匯出資料讓使用者方便去預覽，但你有過曾經打開匯出的CSV檔案，發現欄位內容的許多0都消失了嗎?像是原本產品編號為”00234″，但打開CSV卻顯示”234″的經驗? 不用擔心！下面三步驟就能帶您找回來！下面我們以台灣較多人使用的Excel為示範： 第一步：以文字檔案匯入CSV   將CSV檔案以文字檔案匯入Excel，你可以在下列步驟找到匯入選項：   打開Excel > 資料 > 從文字檔 > 選擇要匯入的CSV檔

撰寫一個電商網站，就好比是在蓋房子一樣，要先蓋好基底，基底蓋穩了，才能搭配水泥與磚頭或是其他相關建材元素混合使用，接著一層一層往上蓋。所以版型就好比是房子的基底，它會間接影響使用者在瀏覽網站時的體驗度。所以今天Astralweb要來跟大家分享『電商網站版型常見幾大錯誤』。   常見的版型錯誤，大部分應該都是落在以下幾點： 文字：字型、顏色、大小是否一致(含英文大小寫部分) 版型色彩配置 位置是否跑版 破圖   什麼是破圖？ 所謂的破圖就是指圖沒有連貫以及在圖的邊邊還有界線。容易發生破圖的情況大部分是在大螢幕的時候，很容易會出現瑕疵，所以需要留意這部分。  

當完成電商網站時，要如何預防使用者在使用的過程中在某個階段發生錯誤導致失敗，而失去繼續使用該網站的耐心呢？又該如何去預防這些錯誤的發生呢？測試電商網站內的各種功能便是例行且必須要實行的。   繼之前與大家分享的網站測試-單元篇後，今天Astralweb要來跟大家分享的是功能測試中的輸入框與搜索功能測試。   什麼是輸入框與搜索功能？ 輸入框是讓使用者輸入字符，不管是文字還是數字。比方說搜索、姓名、電話、訂閱電子報、優惠券…等等，這些都是普遍會使用到輸入框。而搜索則是使用者在輸入框輸入關鍵字後，搜索出符合關鍵字的相關資料，如下圖所展示。

當工程師完成一個電商網站時，身為一名QA工程師，可能都會經歷過相同的問題。那就是該往哪個方向開始進行測試？要先從哪種設備開始呢？到底是先測畫面，還是功能，亦或是同時進行呢？想必這是一個很令QA工程師傷腦筋的問題吧!! 今天Astralweb跟大家分享如何規劃出一個QA測試表單範本。   假設今天QA工程師張小碩第一次被分配到測試電商網站的工作，可是他不知道該從哪裡開始著手進行，正在為此大傷腦筋呢？現在我們就來幫他規劃出一個QA測試表單範本，以便以後不管遇到哪種電商網站，都能直接套用這個範本。

首先，我們先來簡單介紹一下電商 什麼是電子商務？ 電子商務又可簡稱為電商，它能廣泛地在各個地方透過網路從事各種商業活動或服務。而電子商務又可分為哪幾種呢？簡單來說它可以分成以下幾種類型，分別是企業對企業(B2B)、企業對消費者(B2C)與消費者與消費者之間(C2C)。 然而構成電子商務的基本元素又有哪些呢？ 一般來說，我們可以簡單將它可分成以下四大類： 一、版型 一般電子商務會有的主要版型大致上包涵了以下幾種： a. 首頁 b. 目錄頁 c. 商品頁 d. 最新消息 e. 聯絡我們頁面 f. 登入/註冊頁面 g. 會員帳戶頁面 h. 其他CMS頁面      

上次跟大家分享了測試網站的字型大小、顏色、圖形、拼字、位置…等的測試範例 欲了解網站測試小撇步可參考「網站測試-單元篇(上)」 今天跟大家分享網站測試的單元測試最後一部分，測試範圍包含了圖片、導覽路徑、按鈕、網頁標題(Title Tag)…等。   在這裡示範幾個例子 圖片較常見也最容易發生問題的地方有以下2種：   1.缺少圖片：從左圖來看，很明顯的就是缺少了商品圖片，才會導致只有商品名稱及價錢，所以這時候我們應該明顯的將問題點指出來，以便前端工程師修正。   2.

先前用行動裝置來簡單跟大家分享了基本的測試範例   欲了解相關電子商務網站基本測試可參考「電子商務網站的基本測試」   今天來跟大家分享網站測試的單元測試其中一部分，測試範圍包含了字型、字型大小、顏色、圖形、拼字、位置等(較為顯著的錯誤)。 首先，開始測試前應該先確定要從何處開始著手進行，才不會像無頭蒼蠅一樣盲目的測試，在這裡提供幾個測試順序的小撇步給大家參考。 1. 可由上到下、左到右的順序做測試 2. 查看所有頁面的Title名稱是否正確 3. 檢查所有頁面Logo是不是顯示正確，有沒有位移等 4. 檢查所有頁面是否有亂碼或是程式碼顯示出來 5.

當我們完成一個電子商務網站時，就能馬上啟用上線嗎？答案是否。 因為當電子商務網站完成後，並不能馬上就啟用上線，而是需要經過測試的過程。   為什麼需要測試呢？ 測試的目的是為了找出錯誤。藉由測試的過程找出錯誤並加以修正防範，有助於預防錯誤的發生，同時也能更進一步符合使用者需求，而提高整體網站的品質，這就是為什麼需要測試的原因了。 下圖為在使用電子商務網站時正常無錯誤情況下的流程示意圖 因此上圖僅是簡述，實際流程所涵蓋的範圍是非常廣的。  

做為一個測試者該如何著手進行測試，又該如何規劃出一套較完善的流程呢！若測試到問題時又該如何記錄與管理呢？ 一般來說，測試不外乎是兼容性、功能性、可用性等等(在此就不詳細列舉)；在開始測試之前先了解架構，擬定出一個大方向，如此一來才好畫分成區段來逐一測試，同時也較好記錄與管理。   以下簡約做一個測試範例示意圖給大家參考 當一個流程擬定好時，就可以開始依序照著擬定好的方向去做測試了 今天以 Asana平台為範例來教大家如何規劃網站測試流程，同時又能記錄與管理 (欲了解基本常用功能可閱讀本站「運用ASANA時間管理提升工作效率」文章)   1.