针对不同浏览器的 JavaScript 中的通用单元测试概念/实践？

关键词：

【中文标题】针对不同浏览器的 JavaScript 中的通用单元测试概念/实践？【英文标题】：General unit testing concepts/practices in JavaScript against different browsers? 【发布时间】：2010-11-24 05:34:21 【问题描述】：

我一直在用强类型语言编写单元测试，对此我有相当好的理解。在用 JavaScript 编写单元测试以验证某些功能在某些浏览器中是否正常工作时，我又回到了手动测试。我不了解它是如何工作的。 因为 JavaScript 旨在缩小数据和表示之间的差距并使其更具交互性。一切都在浏览器中发生，而且更多地与 UI 有关。 所以我假设如果我要编写一个单元测试，我会写一些类似的东西（在伪代码中）：

run function A
check DOM if certain element has been created
  if not then fail
check if element is visible
  if not then fail
check for the content of that element
  if null then fail
etc…

编写这些测试对我来说似乎是“硬编码”，缺少的是测试无法判断它是否被正确渲染，它只是进行纯功能测试。所以我想知道是否有人可以向我解释 JavaScript 中正确的测试程序是什么，如何进行构建自动化以及一些一般概念。我只是在看John Resig's project testswarm，但还没有弄清楚它是关于什么的。我现在也在阅读QUnit。

我正在寻找一些关于我可以开始的概念/实践的介绍性材料。我不是在寻找特定的库或工具，除非它们对概念有很好的介绍。

谢谢。

【问题讨论】：

【参考方案1】：

这绝对是目前 Web 开发中一个令人困惑且充满活力的领域。在我看来，JS 测试有几个重要的特性区别：

纯单元测试，用于测试纯 Javascript 代码。您可以断言a+b=3 或其他。我们只有少数问题属于这一类。在讨论选项时，有很多 JSUnit（一个 JUnit 端口）的替代方案。它们分为 TDD 与 BDD 以及这些类别中的命名选择。 Javascript + DOM 测试。这些天写的很多代码都是关于操作 DOM 的。例如。 assertEqual('<a><div /></a>', $('div').wrap('a')); 对于基于 DOM 的 JS 测试，您要么需要转移到浏览器内测试，要么使用 env.js 之类的库。 还有 mocking & stubbing (smoke)、async 和其他 helpers

有两个地方可以运行测试：

浏览器外测试（通常运行速度更快，因此可以在 TDD 环境中使用） 浏览器内测试（更慢、更复杂，但提供更准确的跨浏览器测试结果）

Selenium 在浏览器中运行，因此非常适合集成测试。如果您没有其他工作，这是一个很好的起点。它已经存在了几年，并支持最流行的浏览器和语言。观看a screencast like this 可能会有所帮助。 this documentation 可能会让您了解测试的样子。还有很多其他教程和截屏视频，但其中许多都陷入了您不关心的技术问题，因此您必须有所选择。

最后，这里有一个来自blue ridge 的示例，它是用于Rails 的浏览器外测试（和手动浏览器内测试）的工具集合：

Screw.Unit(function() 
    describe("Your application javascript", function() 
        it("accesses the DOM from fixtures/application.html", function() 
            expect($$('.select_me').length).to(equal, 2);
        );
    );
);

这是一个使用类似 rspec 的语法测试的单一测试，其中有几个元素。希望这会有所帮助！

【讨论】：

【参考方案2】：

检查 jsTestDriver。我认为这是最好的之一：

JsTestDriver 的目标是构建一个 JavaScript 测试运行器：

很容易与连续集成 构建系统并允许运行 在多个浏览器上快速测试 简化 TDD 风格的开发。

http://code.google.com/p/js-test-driver/

【讨论】：

【参考方案3】：

我有时会听说Selenium。我从未使用过它，但也许它可以帮助你。

Selenium Remote Control (RC) 运行您的 在多个浏览器中测试和 平台。调整你的测试 首选语言。

我还找到了一篇博客文章：Unit Testing in JavaScript，其中提到：Looking for a better JavaScript unit test tool。

【讨论】：

谢谢，但我不是在寻找任何特定的框架，我正在寻找的是理解在 javascript 中进行单元测试的概念，特别是针对不同的浏览器。 除非您尝试了几种不同的工具，否则您永远不会找到适合您需求的方法。据我了解，从那些测试的人那里，每个人都有自己的测试方式，这取决于 JS 如何融入整体解决方案。【参考方案4】：

您可能需要考虑为您的 JavaScript 使用演示者模式并仅使用简单的单元测试。 Google 测试博客有一些不错的资源。

我会从这里开始：

http://googletesting.blogspot.com/2009/02/with-all-sport-drug-scandals-of-late.html

我在 Flex (ActionScript) 项目中为我的所有 UI 代码完成了这项工作，发现它运行良好。您希望隔离您的功能，以避免测试已经被浏览器供应商广泛测试过的东西。

【讨论】：

还可以查看我在链接帖子的 cmets 中找到的这个链接：atomicobject.com/pages/Presenter+First【参考方案5】：

你可以尝试使用Test Swarm

【讨论】：

目前还处于 alpha 阶段，只对开源项目开放，看起来。

jquery中的事件

事件因为JavaScript在浏览器中以单线程模式运行，页面加载后，一旦页面上所有的JavaScript代码被执行完后，就只能依赖触发事件来执行JavaScript代码。浏览器在接收到用户的鼠标或键盘输入后，会自动在对应的DOM节点上触发相应的... 查看详情

C中的通用列表操作函数？

...型元素的函数有什么区别？它们是一样的吗...？如果它们不同，我们如何单独实现它们？【问题讨论】：【参考方案1】：一般列表可能是单链接的，并且可能假定列表中的项目具有如下结构：t 查看详情

针对不同输入元素的通用 SQL 查询

】针对不同输入元素的通用SQL查询【英文标题】：UniversalSQLqueryfordifferentinputelements【发布时间】：2013-04-1714:11:54【问题描述】：我在以下抽象示例上下文中遇到SQL查询问题：我的sql查询有2个不同的输入数据，定义为“MainElement”... 查看详情

javascript异步加载(代码片段)

...的src会阻塞代码，可以通过defer属性和async属性进行解决JavaScript的异步加载：异步加载又叫非阻塞加载，浏览器在下载执行js的同时，还会继续进行后续页面的处理。主要有三种方式。第一种：defer 只针对IE浏览器<scriptt 查看详情

javascript常见术语解释

1.文档对象模型(DOM,DocumentObjectModel)　　是针对XML但经过扩展用于HTML的应用程序编程接口。DOM把整个页面映射为一个多层节点结构。HTML或XML页面中的每个组成部分都是某种类型的节点，这些节点又包含着不同类型的数据。2.浏览... 查看详情

使用不同浏览器解析 JavaScript 中的浮点数

】使用不同浏览器解析JavaScript中的浮点数【英文标题】：ParsingafloatnumberinJavaScriptusingdifferentbrowsers【发布时间】：2016-08-1515:11:01【问题描述】：我有一个带有一些输入控件的网页，p.e.减法。<table><tr><td><b>Value1&l... 查看详情

深入理解javascript运行机制

JavaScript单线程机制JavaScript的一个语言特性（也是这门语言的核心）就是单线程。什么是单线程呢？简单地说就是同一时间只能做一件事，当有多个任务时，只能按照一个顺序一个完成了再执行下一个为什么JS是单线程的呢？JS最... 查看详情

javascript单线程和异步机制

随着对JavaScript学习的深入和实践经验的积累，一些原理和底层的东西也开始逐渐了解。早先也看过一些关于js单线程和事件循环的文章，不过当时看的似懂非懂，只留了一个大概的印象：浏览器中的js程序时是单线程的。嗯，就... 查看详情

javascript是单线程的而且是异步的机制

...就有好多的疑问 ，现在按我的理解和大家说一说一、JavaScript单线程　　在浏览器中，执行JS程序只有一个线程，所以是单线程，所以执行顺序就是从上到下依次执行，同一段时间内只能有一段代码被执行。你可能会问，为什... 查看详情

如何等待浏览器完成javascript中的重排？

】如何等待浏览器完成javascript中的重排？【英文标题】：Howtowaitforthebrowsertofinishingreflowinjavascript?【发布时间】：2016-12-2306:41:15【问题描述】：在javascript中我定义了这个窗口大小调整事件$(window).resize(function())但是在里面，我需... 查看详情

单线程的javascript

Javascript是单线程的因为JS运行在浏览器中，是单线程的，每个window一个JS线程，既然是单线程的，在某个特定的时刻只有特定的代码能够被执行，并阻塞其它的代码。而浏览器是事件驱动的（Eventdriven），浏览器中很多行为是异... 查看详情

jQuery中的单引号或双引号[重复]

...01:45:36【问题描述】：可能重复：WhentoUseDoubleorSingleQuotesinJavaScript这是专门针对jQuery而不是一般的JavaScript，因为我不是JavaScript程序员，而且我开始学习jQuery。随着jQuery1.6的发布 查看详情

苹果手机如何启用javascript

苹果手机IOS默认是开启javascript的，它主要在浏览器里使用，所以使用的浏览器不同启用方法不同苹果官网“请启用JavaScript以便正确显示此页出现的问题1、点击网络共享中心，找到左上角的“更改适配器设置”2、点击更改适配... 查看详情

详解javascript中的eventtloop（事件循环）机制

前言　　我们都知道，javascript从诞生之日起就是一门单线程的非阻塞的脚步语言。这是由其最初的用途来决定的：与浏览器交互。　　单线程意味着，JavaScript代码在执行的时候，都只有一个主线程来处理所有的任务。　　而非... 查看详情

深入理解nodejs中的异步编程

简介因为javascript默认情况下是单线程的，这意味着代码不能创建新的线程来并行执行。但是对于最开始在浏览器中运行的javascript来说，单线程的同步执行环境显然无法满足页面点击，鼠标移动这些响应用户的功能。于是浏览器... 查看详情

编写浏览器和node.js通用的javascript模块

长期以来JavaScript语言本身不提供模块化的支持，ES6中终于给出了from,import等关键字来进行模块化的代码组织。但CommonJS、AMD等规范已经被广为使用，如果希望你的JavaScript同时支持浏览器和Node.js，现在只有这几种方式：通过browseri... 查看详情

在chromev8中的javascript事件循环分析

​​JavaScript​​从诞生之日起就是一门单线程的非阻塞的脚本语言。这是由其最初的用途来决定的：与浏览器交互。单线程，​​JavaScript​​代码在执行的任何时候，都只有一个主线程来处理所有的任务。非阻塞则是当代码需... 查看详情

javascript是单线程的深入分析（转）

...文：http://blog.csdn.net/talking12391239/article/details/21168489 Javascript是单线程的因为JS运行在浏览器中，是单线程的，每个window一个JS线程，既然是单线程的，在某个特定的时刻只有特定的代码能够被执行，并阻塞其它的代码。而浏览... 查看详情