软件测试中什么是Web测试基础_千锋教育

01 浏览器兼容性：不是所有Chrome都是亲儿子

你以为Chrome跑通了，IE、Edge、Firefox、Safari就稳了？

现实是，一个CSS属性在不同浏览器上的表现天差地别。

比如 flexbox 布局，在Chrome 80上完美居中，在Safari 14上直接堆叠成上下排列。

测试时，你必须覆盖主流浏览器的最新版本+前两个大版本。

浏览器兼容性测试，是Web测试的第一道生死线。

操作步骤：

1. 确定目标浏览器列表（Chrome、Firefox、Edge、Safari），版本号取最新+前2个大版本。

2. 使用工具如BrowserStack或Sauce Labs，模拟真实环境。

3. 重点检查：布局错位、字体渲染、交互响应（点击、滚动、悬停）。

代码示例（CSS兼容性检查）：

/* 不兼容写法 */
display: flex;
/* 兼容写法 */
display: -webkit-flex;
display: flex;

测试时，用浏览器开发者工具检查是否生效。

数据对比：

• ►未做兼容性测试的Web应用，上线后用户投诉率平均37%。
• ►覆盖3个浏览器版本后，投诉率降至5%。

金句：

一个浏览器版本不兼容，就是100%的用户流失。

02 分辨率与响应式：用户屏幕不是你的设计稿

设计稿是1920x1080，用户可能用1366x768、1440x900，甚至手机竖屏看。

Web测试中，分辨率适配是高频翻车点。

一个按钮在宽屏上居中，在窄屏上跑出边界；一个表格在桌面上完美，在平板上列宽溢出。

响应式测试不是“缩放大法”，而是验证每个断点的完整功能。

操作步骤：

1. 列出目标设备分辨率（桌面：1920、1440、1366；平板：1024、768；手机：414、375）。

2. 使用Chrome开发者工具的“设备模拟”功能（Ctrl+Shift+M）。

3. 逐分辨率检查：

• ►文字是否换行、被截断
• ►图片是否变形、溢出
• ►交互元素（按钮、链接）是否可点击
• ►滚动条是否正常

代码示例（媒体查询断点）：

/* 桌面大屏 */
@media (min-width: 1200px) { ... }
/* 平板 */
@media (max-width: 1024px) { ... }
/* 手机 */
@media (max-width: 768px) { ... }

测试时，检查每个断点下的布局变化是否符合预期。

数据对比：

• ►未做响应式测试的Web应用，移动端跳出率62%。
• ►覆盖3个主流分辨率后，跳出率降至18%。

金句：

用户的屏幕不是你画布的缩小版，而是另一个战场。

03 网络与性能：3G网络下的页面不是慢，是死

用户不会告诉你“我用的是2G网络”，他们只会直接关掉你的页面。

Web测试中，网络模拟是必做项。

一个页面在WiFi下加载2秒，在3G下可能30秒，用户等不了。

性能测试不是跑分游戏，而是模拟真实网络下的生存能力。

操作步骤：

1. 使用Chrome开发者工具 -> Network -> 选择“Slow 3G”或“Fast 3G”。

2. 记录关键指标：

• ►首屏加载时间（First Contentful Paint）
• ►完全加载时间（DOMContentLoaded）
• ►交互可用时间（Time to Interactive）

3. 优化后重测，确保3G下首屏加载 < 3秒。

代码示例（性能监控）：

// 使用 Performance API 记录加载时间
performance.mark('start');
window.addEventListener('load', () => {
  performance.mark('end');
  const loadTime = performance.measure('load', 'start', 'end').duration;
  console.log(`页面加载时间：${loadTime}ms`);
});

测试时，对比优化前后的loadTime值。

数据对比：

• ►未做网络测试的Web应用，3G下平均加载时间12秒。
• ►优化后（压缩图片、懒加载、代码分割），加载时间降至2.8秒。

金句：

1秒的延迟，就是7%的转化率损失。

04 表单与输入：用户输入的不是数据，是陷阱

你测试时输入“admin123”，用户可能输入“”。

Web测试中，表单验证是安全与功能的双重防线。

一个未做XSS过滤的输入框，能让整个网站被劫持。

表单测试不是填数据，而是模拟黑客的恶意输入。

操作步骤：

1. 测试输入类型：

• ►正常数据（字母、数字、中文）
• ►边界数据（空值、超长字符、特殊符号）
• ►恶意数据（SQL注入：' OR 1=1--、XSS：