Chrome 分辨率測試

    在平時測試過程中,會經常聽到兼容性測試等,今天就來整理一下,詳細如下。

1.兼容性測試概述

1.1 兼容性測試定義

    兼容性測試是指驗證被測系統在不同的硬件平臺、不同的應用軟件之間、不同的操作系統、不同的網絡環境中能否正常運行,有無異常的一種測試過程。

1.2 兼容性測試分類

    兼容性測試主要分爲以下幾類:

  • 1、瀏覽器測試

    檢查被測試系統在不同瀏覽器中的WEB頁面樣式展示效果交互是否正常等。主流瀏覽器有ChromeEdgeFirefoxSafari等。

因爲不同的瀏覽器使用的內核和所支持的HTML等有所不同,因此會出現在一種瀏覽器中正常,另一種瀏覽器不正常的情況出現。

  • 2.分辨率測試

    驗證被測試系統在不同分辨下能否正常顯示,常見的分辨率有2560*14401920*10801440*900等。

  • 3.操作系統

    操作系統又可以分爲面向桌面操作系統、面向服務器操作系統、面向於移動端操作系統等。

桌面操作系統主要爲Windows、Mac、Ubuntu等
服務器操作系統主要爲Windwos Server、CentOS等
移動端操作系統主要爲Android、iOS、HarmonyOS等

  • 4.硬件平臺

    常見的硬件平臺可以分爲PC/服務器手機Pad

1.3 兼容性測試方法

    兼容性測試常用測試方法如下所示:

  • 手工測試

    通過人工測試被測系統在不同瀏覽器和操作系統上的主流程和界面等是否能正常運行和顯示。

  • 藉助於第三方工具或平臺

    藉助於第三方工具或平臺來進行對被測試系統進行兼容性驗證。

1.4 瀏覽器兼容性

1.4.1 測試點

    若要對一個被測試進行全方位的兼容性測試,工作量還是挺大的。我們以常見的瀏覽器兼容性做爲切入點,其測試功能點主要如下所示:

1、界面

  • 1.在不同的瀏覽器中運行,其展示的頁面要保持一致
  • 2.在不同瀏覽器中,字體是否有錯位、重疊、顯示是否完整等
  • 3.在不同瀏覽器中,窗體是否有異常拉伸和縮進
  • 4.圖片是否顯示在指定位置

注意事項:有些系統在不同的瀏覽器中運行,界面不一樣,但實現了同樣的功能,也是可以的。因爲不同瀏覽器所使用的渲染引擎不一樣導致。

2、控件

  • 1.在不同的瀏覽器中,所使用的控件都能正常運行
  • 2.在不同的瀏覽器中,各窗體上按鈕、輸入框等功能都能正常點擊和輸入

3、圖片

  • 1.在不同瀏覽器中,圖片大小是否相同
  • 2.在不同瀏覽器中,圖片質量是否一致、有無拉伸和伸縮

4、動畫/視頻

  • 在不同瀏覽器中,各類動畫和視頻均可以正常播放等

5、響應時間

  • 在不同瀏覽器中,每個功能選項,響應時間相差不會太大,否則則是缺陷

6、鏈接

  • 在不同的瀏覽器中,各類鏈接能正常打開且能正常跳轉到正確的鏈接地址

7、分辨率

  • 在不同的瀏覽器中,在不同分辨率下,頁面能正常顯示和進行交互

1.4.2 注意事項

    主要注意事項如下所示:

1.向前兼容和向後兼容:

    一般來講,被測試系統能實現向前兼容,但不要求向後兼容。即新版本的系統可以正常讀取、加載舊系統,並能正常的交互操作等。

2.異構數據庫兼容:

    被測試系統需要考慮對不同的數據庫平臺的支持能力。系統是否可以直接連接,若不能,需要提供相應的兼容性轉換工具等。

2. 瀏覽器分辨率測試

    瀏覽器分辨率測試是非常常見的一種兼容性測試。今天我就以Google Chrome 爲例,來彙總整理一下其手動測試常用的工具,如下所示:

2.1 Chrome自帶兼容性工具

    這裏主要是Chrome自帶的調試工具爲例,操作步驟如下所示:

  • 1.F12打開調試模式–>Settings->Devices
  • 2.添加模擬器,如下所示:

以上紅色框中內容爲必填填

    主要參數如下所示:

  • Device Name:設備名,可隨意填寫
  • Width:設備的寬
  • Height:設備的高
  • Device pixel ratio:設備像素比,設備上物理像素和設備獨立像素比例,其計算方式如下所示:

devicePixelRatio = 屏幕物理像素/設備獨立像素

    一個標準像素是160ppi,假設需要模擬設備爲1920*1080手機端,則寬和高的計算結果如下所示:

- 分辨率:1920*1080
- 像素密度:400
- 設備像素比:400/160=2.5
- 設備獨立像素-高=1080/2.5=432
- 設備獨立像素-寬=1920/2.5=768
  • User agent String:用戶代理,獲取方法如下所示:
在瀏覽器地址欄中輸入javascript:alert(navigator.userAgent),再複製過來即可
  • 最後是指設備類型,有Mobile/Mobile(no touch)/Desktop/Desktop(touch)根據實際情況選擇。

  • 3.添加完成,勾選添加的自定義設備

  • 4.在頁面選擇添加的自定義設備即可

2.2 第三方工具

2.2.1 Resolution Test

    Resolution Test是一款爲Chrome製作的調整窗口大小的工具插件,通過選擇不同分辨率來打開相應大小的窗口。

  • 1.安裝步驟

    在Chrome網上應用店搜索Resolution Test安裝即可

  • 2.使用方法

    打開Resolution Test窗口,選擇對應的分辨率,再點擊View all selected即可,如下所示:

2.2.2 Window Resizer

    Window Resizer也是一款爲Chome製作的調整窗口大小的工具插件,從而讓瀏覽器能適應不同大小的分辨率。

  • 1.安裝步驟

    在Chrome網上應用店搜索Window Resizer安裝即可

  • 2.使用方法

    打開Window Resizer插件,選擇對應的分辨率,點擊即可,如下所示:

原文地址:https://www.jianshu.com/p/f2a681979256

本文同步在微信訂閱號上發佈,如各位小夥伴們喜歡我的文章,也可以關注我的微信訂閱號:woaitest,或掃描下面的二維碼添加關注:

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章