Web项目测试专题（一）兼容性测试

• 概述：

兼容性测试主要是确保Web应用在不同设备、操作系统和浏览器中能正常运行，提供一致的用户体验。

• 分类：

设备兼容性：测试Web应用在桌面计算机、平板电脑、智能手机等不同设备上的表现。检查界面布局是否响应式调整。功能操作是否正常。

操作系统兼容性：测试主流操作系统如Windows、macOS、Linux、Android、iOS等。

浏览器兼容性：测试主流浏览器如Google Chrome、Mozilla Firefox、Safari、Microsoft Edge和Opera。确保页面在浏览器不同版本中都能正确显示。

分辨率兼容性：测试不同屏幕分辨率下页面的适应情况，确保无元素溢出或显示不全的情况。

网络兼容性：在不同网络环境(如WiFi、4G、5G、慢网等)下测试页面加载和功能使用情况。

 

• 1. 设备兼容性测试

• 目标：

确保Web应用在各种设备上都能正确显示和运行。

• 步骤：

桌面设备：测试在不同操作系统的桌面设备上（如Windows、macOS、Linux）进行测试。使用不同屏幕分辨率（如1024x768, 1280x1024, 1920x1080等）进行测试。

移动设备：测试在不同操作系统的移动设备上（如Android、iOS）。使用市场上常见的手机和平板型号（如iPhone, iPad, Samsung Galaxy等）进行测试。检查屏幕尺寸和分辨率的适应性，包括横屏和竖屏模式。

不同品牌和型号：在多种品牌（如Apple, Samsung, Huawei, Xiaomi等）的设备上进行测试，保证应用的通用性。

• 关键点：

确认所有页面的布局和内容在不同设备上适配良好。

检查触控操作的响应情况，如点击、滑动、长按等。

• 2. 操作系统兼容性测试

• 目标：

确保Web应用在不同操作系统上都能正常工作。

• 步骤：

桌面操作系统：在Windows不同版本、macOS不同版本、Linux发行版上测试。

移动操作系统：在iOS不同版本和Android不同版本上进行测试。

• 关键点：

确保各种操作系统下没有功能性缺陷或UI展示问题。

特别关注不同操作系统特有的UI控件和行为是否一致。

• 3. 浏览器兼容性测试

• 目标：

确保Web应用在不同浏览器及其版本中都能正确运行。

• 步骤：

现代浏览器：测试在Google Chrome、Mozilla Firefox、Apple Safari、Microsoft Edge、Opera等浏览器上。

不同版本：测试浏览器的不同版本（尤其是最新版本和几个主要的之前版本）。旧浏览器：针对必要的业务需求（如特定用户群体），测试较老版本的浏览器（如IE11）。

• 关键点：

确保CSS样式、JavaScript功能在不同浏览器中均无异常，如页面错位、交互失败等。

检查对HTML5、CSS3新特性的支持情况。

• 4. 分辨率和屏幕适应性测试

• 目标：

确保Web应用在不同分辨率的屏幕上都能正确显示。

• 步骤：

标准分辨率：测试常见的标准分辨率（如1366x768、1920x1080、2560x1440、3840x2160等）

移动分辨率：测试常见的移动设备屏幕分辨率（如720x1280、1080x1920、1440x2560等）

响应式设计：验证页面在不同分辨率下的响应式设计效果，确保布局不会破裂。

• 关键点：

调整窗口大小，检查页面元素是否能自适应变化。

确认无元素溢出、重叠或显示不全的情况。

• 5. 网络兼容性测试

• 目标：

确保Web应用在不同网络条件下的性能和用户体验。

• 步骤：

不同带宽：测试在高速网络（如光纤、WiFi）和低速网络（如3G、慢速4G）下的表现。

断网重连：模拟网络断开和重新连接，检查系统的恢复情况。

高延迟网络：测试在高延迟网络环境下（如海外访问）的响应速度和稳定性。

• 关键点：

确认页面加载时间、资源请求时间是否在可接受范围内。

检查网络断开后重新连接的功能是否正常，是否会有异常行为。

附录

1）不同操作系统特有的UI 控件和行为：

Windows 操作系统

• 特有的 UI 控件：
  • 任务栏：位于屏幕底部，用于显示正在运行的程序和系统托盘等，可固定应用程序图标，方便快速启动和切换应用。
  • 开始菜单：点击开始按钮可弹出开始菜单，包含常用应用程序列表、系统设置、文件资源管理器等入口，用户可通过它快速访问各种功能和应用。
  • 命令提示符窗口：提供命令行操作界面，用户可通过输入命令来执行各种系统管理和操作任务。
• 特有的行为
  • 多窗口操作：支持多窗口平铺、层叠等排列方式，用户可通过鼠标拖动和窗口按钮快速切换和调整窗口大小及位置。
  • 快捷方式操作：可以方便地创建应用程序和文件的快捷方式，放置在桌面或其他位置，快速访问目标对象。
  • 热键操作：有许多快捷键组合，如 Win+E 打开文件资源管理器、Win+R 打开运行对话框等，提高操作效率。

macOS 操作系统

• 特有的 UI 控件
  • 程序坞：位于屏幕底部，用于快速启动和切换应用程序，可显示应用程序图标、最近使用的文件等，图标具有动态效果，悬停时会放大。
  • 菜单栏：位于屏幕顶部左侧，显示当前运行程序的名称和功能选项，不同程序的菜单栏会根据其功能动态变化。
  • 启动台：默认是程序坞中的第二个图标，点开可看到系统中所有的应用程序，可通过拖拽将应用放置到程序坞中。
• 特有的行为
  • 程序界面与功能分离：很多应用程序的功能选项集中在菜单栏中，程序界面相对简洁，用户需要通过菜单栏来访问各种功能。
  • 手势操作：支持丰富的手势操作，如双指缩放、三指切换应用、四指切换桌面等，通过触摸板实现便捷操作。
  • 聚焦搜索：通过点击菜单栏中的放大镜图标或使用快捷键 Command+Space，可快速启动聚焦搜索，搜索文件、应用程序、联系人等内容。

Android 操作系统

• 特有的 UI 控件
  • ActionBar：通常位于屏幕顶部，用于显示应用程序的标题、导航按钮和操作菜单等，提供应用内的导航和操作入口。
  • ListView：用于显示列表数据，可垂直滚动，支持多种布局方式和数据适配器，方便展示大量数据。
  • Spinner：下拉列表框，用户可从下拉菜单中选择一个选项，常用于选择性别、地区等单选项。
• 特有的行为
  • 多任务处理：支持多任务运行，用户可通过最近任务按钮查看和切换最近使用的应用程序，可在多个应用之间快速切换和共享数据。
  • 触摸操作：以触摸操作为主，支持单击、双击、长按、滑动、缩放等多种触摸手势，实现各种操作和交互。
  • 通知栏操作：从屏幕顶部向下滑动可打开通知栏，显示应用程序的通知消息、系统消息等，用户可在通知栏中快速查看和处理通知。

iOS 操作系统

• 特有的 UI 控件
  • 导航栏：通常位于屏幕顶部，用于显示当前界面的标题和导航按钮，如返回按钮、更多操作按钮等，帮助用户在应用内进行导航。
  • 标签栏：一般位于屏幕底部，用于切换应用的不同功能模块或视图，每个标签对应一个特定的功能或页面。
  • 表格视图：用于展示列表数据，具有简洁的样式和流畅的滚动效果，可用于显示联系人、消息列表、设置选项等。
• 特有的行为
  • 滑动返回：从屏幕左侧边缘向右滑动可返回上一级界面，操作方便快捷，提供良好的导航体验。
  • 3D Touch：部分支持 3D Touch 功能的设备，用户可通过按压屏幕实现不同的操作，如快速预览、弹出快捷菜单等。
  • 应用切换：双击主屏幕按钮可打开应用切换器，以卡片式的形式展示最近使用的应用程序，用户可通过左右滑动和点击切换应用。

 2）HTML5、CSS3新特性

HTML5 新特性

语义化标签

• 含义：HTML5 引入了一系列语义化标签，用于更清晰地描述页面结构，使代码更具可读性和可维护性，同时有利于搜索引擎优化（SEO）。
• 示例标签及用途
  • <header>：通常用于表示页面或页面中某个区域的头部，包含网站标题、导航栏等信息。
  • <nav>：专门用于定义导航链接的区域，如网站的菜单导航。
  • <article>：表示一个独立的、完整的内容块，可独立于页面其他部分进行分发和复用，例如博客文章、论坛帖子等。
  • <section>：用于对页面进行分块，将相关内容组织在一起，比如文章的章节。
  • <aside>：表示与页面主要内容相关的侧边栏信息，如广告、推荐文章等。
  • <footer>：用于表示页面或页面中某个区域的底部，包含版权信息、联系方式等。

表单增强

• 新的输入类型：增加了多种新的输入类型，为用户提供更友好的输入体验，同时方便开发者进行数据验证。
  • email：用于输入电子邮件地址，浏览器会自动验证输入的内容是否符合电子邮件格式。
  • url：用于输入 URL 地址，浏览器会检查输入的是否为有效的网址。
  • number：专门用于输入数字，支持设置最小值、最大值和步长等属性。
  • date、time、datetime-local、month、week：方便用户输入日期和时间信息。
• 表单属性
  • placeholder：在输入框中显示提示信息，当用户开始输入时提示信息消失。
  • required：设置为该属性的输入框为必填项，用户不输入内容无法提交表单。
  • pattern：使用正则表达式对输入内容进行验证，确保输入符合特定的格式要求。

多媒体元素

• <video>：用于在网页中嵌入视频，支持多种视频格式（如 MP4、WebM、Ogg 等），无需依赖第三方插件（如 Flash）。示例代码如下：

html

<video width="320" height="240" controls>
  <source src="movie.mp4" type="video/mp4">
  <source src="movie.webm" type="video/webm">
  您的浏览器不支持视频播放。
</video>

• <audio>：用于在网页中嵌入音频，支持多种音频格式（如 MP3、WAV、Ogg 等）。示例代码如下：

html

<audio controls>
  <source src="audio.mp3" type="audio/mpeg">
  您的浏览器不支持音频播放。
</audio>

Web 存储

• localStorage：用于长期存储数据，除非手动删除，否则数据不会过期。存储的数据以键值对的形式保存在浏览器中，不同页面之间可以共享数据。示例代码如下：

javascript

// 存储数据
localStorage.setItem('username', 'John');
// 获取数据
var username = localStorage.getItem('username');

• sessionStorage：数据仅在当前会话期间有效，当页面关闭或会话结束时，数据会被清除。使用方法与 localStorage 类似。

地理定位 API

• 功能：允许网页获取用户的地理位置信息，前提是用户授权。可用于实现地图导航、附近商家推荐等功能。示例代码如下：

javascript

if (navigator.geolocation) {
  navigator.geolocation.getCurrentPosition(function(position) {
    var latitude = position.coords.latitude;
    var longitude = position.coords.longitude;
    console.log('纬度: ' + latitude + ', 经度: ' + longitude);
  }, function(error) {
    console.log('获取地理位置失败: ' + error.message);
  });
} else {
  console.log('您的浏览器不支持地理定位功能。');
}

CSS3 新特性

选择器增强

• 属性选择器：可以根据元素的属性值来选择元素。
  • [attribute^=value]：选择属性值以指定值开头的元素。
  • [attribute$=value]：选择属性值以指定值结尾的元素。
  • [attribute*=value]：选择属性值包含指定值的元素。
• 伪类选择器
  • :nth-child(n)：选择父元素的第 n 个子元素。
  • :nth-of-type(n)：选择父元素中指定类型的第 n 个子元素。
  • :not(selector)：选择不匹配指定选择器的元素。

盒模型相关

• box-sizing 属性：改变元素宽度和高度的计算方式，有 content-box（默认值，宽度和高度只包含内容区域）和 border-box（宽度和高度包含内容区域、内边距和边框）两种值。示例代码如下：

css

.box {
  box-sizing: border-box;
  width: 200px;
  padding: 20px;
  border: 1px solid black;
}

• 多列布局：通过 column-count、column-width、column-gap 等属性实现文本的多列布局。示例代码如下：

css

.multiple-columns {
  column-count: 3;
  column-gap: 20px;
}

背景与边框

• 背景属性
  • background-size：用于指定背景图像的大小，可以使用具体的像素值、百分比或关键字（如 cover、contain）。
  • background-origin：指定背景图像的起始位置，可选值有 content-box、padding-box 和 border-box。
  • background-clip：指定背景的绘制区域，可选值与 background-origin 类似。
• 边框属性
  • border-radius：用于创建圆角边框，可以使用具体的像素值或百分比。
  • box-shadow：为元素添加阴影效果，可以设置阴影的偏移量、模糊半径、颜色等。示例代码如下：

css

.box {
  border-radius: 10px;
  box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.3);
}

文本效果

• text-shadow：为文本添加阴影效果，可设置阴影的偏移量、模糊半径和颜色。示例代码如下：

css

h1 {
  text-shadow: 2px 2px 4px #000000;
}

• word-wrap 和 word-break：word-wrap 用于控制当单词长度超过容器宽度时是否允许换行，word-break 用于指定如何断开单词。

2D/3D 转换

• 2D 转换：通过 transform 属性实现元素的平移、旋转、缩放和倾斜等 2D 变换。示例代码如下：

css

.box {
  transform: translate(50px, 100px) rotate(45deg) scale(1.5);
}

• 3D 转换：支持元素的 3D 变换，如 rotateX()、rotateY()、rotateZ()、translateZ() 等，结合 perspective 属性可以创建更逼真的 3D 效果。

动画与过渡

• 过渡（transition）：用于在元素的两个状态之间创建平滑的过渡效果，通过指定过渡的属性、过渡时间和过渡函数来实现。示例代码如下：

css

.box {
  width: 100px;
  height: 100px;
  background-color: red;
  transition: width 2s, background-color 1s;
}
.box:hover {
  width: 200px;
  background-color: blue;
}

• 动画（animation）：通过 @keyframes 规则定义动画序列，然后将动画应用到元素上。示例代码如下：

css

@keyframes example {
  from { background-color: red; }
  to { background-color: yellow; }
}
.box {
  width: 100px;
  height: 100px;
  animation-name: example;
  animation-duration: 4s;
}

3）响应式设计 

响应式设计（Responsive Design）是一种网页设计策略，旨在让网页在各种不同设备（如桌面电脑、笔记本电脑、平板电脑、手机等）和不同屏幕尺寸（从超大显示器到小尺寸移动设备屏幕）上都能提供良好的用户体验，确保内容的可读性和可用性，避免用户在浏览网页时出现布局错乱、内容显示不全等问题。以下为你详细介绍：

核心原理

• 弹性网格布局：使用相对单位（如百分比、em、rem 等）来定义元素的尺寸和位置，而不是固定的像素值。这样，当屏幕尺寸发生变化时，元素能够根据屏幕大小自动调整其大小和位置，保持页面布局的相对比例。
• 弹性图片和媒体：使图片、视频等媒体元素能够根据容器的大小自动缩放，以适应不同的屏幕尺寸。通常使用 max-width: 100%; height: auto; 这样的 CSS 规则来实现图片的自适应缩放。
• 媒体查询：媒体查询是响应式设计的关键技术之一，它允许开发者根据设备的屏幕尺寸、分辨率、方向等特征，为不同的设备应用不同的 CSS 样式。通过媒体查询，可以在不同的屏幕条件下改变元素的布局、字体大小、显示与隐藏等。

优点

• 提供一致的用户体验：无论用户使用何种设备访问网站，都能获得统一、流畅的浏览体验，避免了为不同设备开发多个独立网站的麻烦。
• 提高搜索引擎排名：搜索引擎（如 Google）更倾向于对响应式设计的网站给予较高的排名，因为它提供了更好的用户体验，符合搜索引擎优化（SEO）的要求。
• 降低开发和维护成本：只需要开发和维护一个网站，而不是为不同设备分别开发多个版本，减少了开发时间和成本，同时也降低了后期维护的难度。

实现步骤

• 确定设计目标和断点：首先要明确网站的设计目标和受众群体，然后根据常见的设备屏幕尺寸确定响应式设计的断点。断点是指在不同屏幕宽度下，页面布局发生变化的临界值，常见的断点有 320px（手机竖屏）、768px（平板电脑竖屏）、992px（平板电脑横屏）和 1200px（桌面电脑）等。
• 编写 HTML 结构：创建具有语义化的 HTML 结构，确保页面内容的层次清晰，便于后续的样式设计和维护。
• 设计弹性网格布局：使用 CSS 构建弹性网格系统，将页面划分为不同的列和行，使元素能够在不同屏幕尺寸下自动排列和调整。
• 添加媒体查询：根据确定的断点，编写媒体查询代码，为不同的屏幕尺寸应用不同的 CSS 样式。在媒体查询中，可以调整元素的宽度、高度、显示方式、字体大小等。
• 测试和优化：在各种不同的设备和浏览器上对网站进行测试，检查页面布局、内容显示、交互效果等是否正常。根据测试结果进行优化和调整，确保网站在所有目标设备上都能提供良好的用户体验。

示例代码

html

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <style>
    /* 基本样式 */
    body {
      font-family: Arial, sans-serif;
      margin: 0;
      padding: 0;
    }

    .container {
      padding: 20px;
    }

    /* 弹性网格布局 */
    .row {
      display: flex;
      flex-wrap: wrap;
      margin: -10px;
    }

    .col {
      flex: 1;
      padding: 10px;
    }

    /* 媒体查询 */
    @media (max-width: 768px) {
      /* 当屏幕宽度小于等于 768px 时，将列的宽度设置为 100% */
      .col {
        flex-basis: 100%;
      }
    }
  </style>
  <title>响应式设计示例</title>
</head>

<body>
  <div class="container">
    <div class="row">
      <div class="col">
        <h2>列 1</h2>
        <p>这是第一列的内容。</p>
      </div>
      <div class="col">
        <h2>列 2</h2>
        <p>这是第二列的内容。</p>
      </div>
      <div class="col">
        <h2>列 3</h2>
        <p>这是第三列的内容。</p>
      </div>
    </div>
  </div>
</body>

</html>

在上述示例中，通过弹性网格布局和媒体查询实现了一个简单的响应式页面。当屏幕宽度大于 768px 时，三列内容水平排列；当屏幕宽度小于等于 768px 时，三列内容变为垂直排列，以适应小屏幕设备。