测试

任何复杂度达到一定程度的代码库都需要有配套的测试系统,以确保在添加新代码时,代码库能继续正确且高效地运行,并持续满足用户的需求。本模块列出了您应该开始学习的基础知识。

注意:本模块最初完全专注于跨浏览器测试,但我们正在对其进行重新调整,以涵盖一般性测试。一旦有时间,我们将更新内容,以涵盖一般的测试基础知识、功能和兼容性测试,以及可用性测试。

预备知识

在开始本模块之前,您应该已经学习了 HTMLCSSJavaScript 的基础知识。

教程

跨浏览器测试入门

本文作为本模块的开篇,将概述跨浏览器测试的主题,解答“什么是跨浏览器测试?”、“您将遇到的最常见问题类型有哪些?”以及“测试、识别和修复问题的主要方法是什么?”等问题。

执行测试的策略

接下来,我们将深入探讨执行测试的细节,包括确定目标受众(例如,应确保测试哪些浏览器、设备和其他细分市场)、低保真测试策略(准备一系列设备和一些虚拟机,并在需要时进行临时测试)、更高级的技术策略(自动化、使用专用测试应用程序)以及与用户组一起测试。

处理常见的 HTML 和 CSS 问题

在设定好场景后,我们将具体探讨在 HTML 和 CSS 代码中会遇到的常见跨浏览器问题,以及可用于预防问题发生或修复已发生问题的工具。这包括代码 linting、处理 CSS 前缀、使用浏览器开发者工具来追踪问题、使用 polyfills 为浏览器添加支持、解决响应式设计问题等。

实现特性检测

功能检测涉及确定浏览器是否支持某个代码块,并根据其是否支持(或不支持)来运行不同的代码,从而使浏览器始终能够提供可用的体验,而不是在某些浏览器中崩溃/报错。本文详细介绍了如何编写自己的简单功能检测、如何使用库来加速实现,以及像 @supports 这样的原生功能检测特性。

自动化测试入门

每天手动在多个浏览器和设备上运行多次测试可能会变得乏味且耗时。为了高效地处理这个问题,您应该熟悉自动化工具。在本文中,我们将介绍现有的工具、如何使用任务运行器,以及如何使用商业浏览器测试自动化应用程序(如 Sauce Labs 和 Browser Stack)的基础知识。

设置您自己的自动化测试环境

在本文中,我们将教您如何安装自己的自动化环境,并使用 Selenium/WebDriver 和像 Node 的 selenium-webdriver 这样的测试库来运行自己的测试。我们还将探讨如何将本地测试环境与前文中讨论的商业应用程序集成。