Question

正如标题所述，Nightwatch.js和Webdriver.io有什么区别？

看起来他们有相同的语法，几乎做同样的事情。他们有什么不同？

我需要在它们之间做出选择。

Answer 1

我已经使用这些工具编写了几次测试套件。

Webdriver.io允许您从头开始编写测试用例＆＃34;＃34;并且可以很好地控制报告，例如，使用松弛的npm和其他软件包与slack集成。您需要知道或快速学习node.js.除了与桌面浏览器配合使用外，它还与Appium，Android Studio和Xcode完美集成，因此您可以在本地运行Android模拟器和iOS模拟器上的自动化测试。您需要安装这些东西并编写一些代码来告诉Appium使用哪些驱动程序，并选择功能等。

Nightwatch是一个相当广泛的解决方案，它使用迭代器在失败时自动重新尝试三次测试。 Nightwatch对与SauceLabs等VM工具的集成提供了不错的支持，因此理论上可以针对700多种不同的平台/浏览器/版本组合运行测试用例，而无需编写代码来管理每个驱动程序。 Nightwatch可以为您启动和关闭硒。虽然这最后听起来非常令人印象深刻，但实际上它需要做很多工作才能实现。保持这种测试覆盖水平。 Nightwatch还具有相当内置的关注点分离，允许您定义自定义命令并在基本测试用例或单个测试中要求它们。您可以模块化部分测试并导入它们，这样您就不必经常重写，登录测试可以在多种情况下使用。此外，您可以使用自定义命令将选择器作为键值对导入。

使用过每一个我会这样总结：

webdriver.io：如果您正在寻找更多控制权，一个非常自定义的解决方案而且您不需要迭代器，并且您确信您已经足够了解用于选择浏览器驱动程序，设置功能以及您希望自定义控制报告的代码。

Nightwatch：如果你想快速开始编写测试，要知道在特定的平台/浏览器/版本上运行它们相对容易，并且仍然可以让你有很大的灵活性来扩展你的通过编写自定义命令进行测试。

现在的另一个选择是Dalek.js，它具有Nightwatch的简单脚本创建，但没有所有的花里胡哨。

在运行nightwatch之前，您可以在Magellan.json文件中配置浏览器，然后在运行测试时调用浏览器或一组浏览器（＆＃34; profile＆＃34;）作为命令行争论，因此：

对于本地浏览器：

./node_modules/.bin/magellan --serial --browsers=chrome,firefox

假设您已经设置了saucelabs帐户并添加了用户名和访问密钥，您可以调用这样的浏览器配置文件：

./node_modules/.bin/magellan --serial --profile=myBrowsers

这假设你在Magellan.json文件中设置了一个名为myBrowsers的配置文件，如下所示：

{
    "profiles": {
        "myBrowsers": [
          { "browser": "chrome_46_OS_X_10_10_Desktop" },
          { "browser": "firefox_42_Windows_2012_R2_Desktop" },
          { "browser": "safari_8_OS_X_10_10_Desktop" },
          { "browser": "safari_7_OS_X_10_9_Desktop" }, 
          { "browser": "safari_9_OS_X_10_11_Desktop" }, 
          { "browser": "IE_10_Windows_2012_Desktop" }, 
          { "browser": "IE_11_Windows_2012_R2_Desktop" },
          { "browser": "chrome_45_OS_X_10_8_Desktop" },
          { "browser": "chrome_45_OS_X_10_9_Desktop" },
          { "browser": "chrome_45_OS_X_10_10_Desktop" },
          { "browser": "chrome_45_OS_X_10_11_Desktop" },
          { "browser": "chrome_46_OS_X_10_10_Desktop" }, 
          { "browser": "chrome_45_Windows_10_Desktop" },
          { "browser": "chrome_45_Windows_2003_Desktop" },
          { "browser": "chrome_45_Windows_2008_Desktop" },
          { "browser": "chrome_45_Windows_2012_Desktop" },
          { "browser": "chrome_45_Windows_2012_R2_Desktop" },
          { "browser": "chrome_46_Windows_10_Desktop" },
          { "browser": "chrome_46_Windows_2003_Desktop" },
          { "browser": "chrome_46_Windows_2008_Desktop" },
          { "browser": "chrome_46_Windows_2012_Desktop" },
          { "browser": "chrome_46_Windows_2012_R2_Desktop" }, 
          { "browser": "firefox_42_OS_X_10_9_Desktop" }, 
          { "browser": "firefox_42_Windows_2012_R2_Desktop" },
          { "browser": "android_4_4_Linux_Samsung_Galaxy_S4_Emulator", "orientation": "portrait" },
          { "browser": "ipad_8_4_iOS_iPad_Simulator", "orientation": "landscape"},
          { "browser": "ipad_8_4_iOS_iPad_Simulator", "orientation": "landscape"},
          { "browser": "ipad_9_0_iOS_iPad_Simulator", "orientation": "landscape"},
          { "browser": "ipad_9_0_iOS_iPad_Simulator", "orientation": "portrait"},
          { "browser": "ipad_9_1_iOS_iPad_Simulator", "orientation": "landscape"},
          { "browser": "ipad_9_1_iOS_iPad_Simulator", "orientation": "portrait"},
          { "browser": "iphone_9_1_iOS_iPhone_Simulator", "orientation": "portrait"},
          { "browser": "iphone_9_1_iOS_iPhone_Simulator", "orientation": "landscape"}

        ]
}

}

一些更有用的（可选）命令行ARGS：

切换--serial参数会导致测试执行被序列化，并且具有更详细的测试经验，您可以在其中查看运行期间返回的错误。在等待测试完成时运行也需要更长的时间。

在您的测试用例适用于本地计算机上存在的浏览器后添加--sauce参数，您可以使用Sauce Labs支持的（当前）760浏览器。继续粘贴到终端＆amp;点击回复：

./node_modules/.bin/magellan --serial --list_browsers

对于您要测试的每个设备/浏览器，只需在中添加列表即可在执行脚本时--browser =后，将“粘贴命令行选项”列复制为逗号分隔值。注意：在没有--sauce的情况下运行时，您可以使用 --browser = chrome或--browser = chrome，firefox

BREAKING IT DOWN:

使用没有--sauce但使用--serial的夜班是一个很好的入门方式。处理您的脚本，直到您验证了要检查的内容，并确信所有测试都应该通过，执行，运行酱汁实验室和您要测试的主要浏览器。一旦你确信主要的浏览器都被覆盖了，你就可以在没有--serial的情况下运行它来减少运行时间（在Sauce Labs上很有用，这会花钱）。

但足够的传教，你可以在这里找到你对Saucelabs的需求： https://wiki.saucelabs.com/display/DOCS/The+Sauce+Labs+Cookbook+Home

对于Nightwatch的样板示例来做规范的hello世界：try this boilerplater

更新：人们提出的一些观点，自从发布此事以来，我发现了这一点。

Webdriver.io：由于没有迭代器，因此在测试执行期间从故障中恢复的能力较低，这意味着故障更加明确。因为这纯粹是异步的，所以您可能会头痛地追踪失败的确切原因。 ~~您可能最终还是必须为您创建的任何数据创建单独的拆卸脚本，以避免在执行期间发生数据冲突。~~

Nightwatch.js：由于迭代器允许您重试，因此您通常可以找到脚本失败的位置。这可以让您更快地找到缺陷，而不是关注脚本失败的原因。您也可以更轻松地关闭各个脚本。

更新2：

使用Nightwatch更短的测试是有用/鼓励的。因为迭代器在执行之前每次迭代都会将测试文件读入内存，所以你可以在迭代执行之间编辑测试。。让我说一个不同的方式：你的守夜人套房：

test_1 starts
test_1 FAIL    // because you made a trivial error in your test case
test-2 starts  // while it is running, you make the change, save it
test-2 PASS
test_1 starts  // the iteration starts * with your change! *
test_1 PASS
============= Suite Complete =============

     Status: PASSED
    Runtime: 2m 48.3s
Total tests: 2
 Successful: 2 / 2
1 test(s) have retried: 1 time(s)

另一方面，使用node / webdriver.io设置Slack webhooks很容易。这意味着您可以设置node / webdriver.io测试，以便在Slack完成时向其报告。客户对此表示赞赏，因为在构建完成后，他们很快就会看到自动化的结果，例如：

✅[客户端/产品名称]的自动测试Sprint ##。＃。＃通过OS X Firefox 59.0.2传递[服务器URL或IP地址]

❌[客户端/产品名称]的自动测试Sprint ##。＃。＃在OS X Firefox 59.0.2的[服务器URL或IP地址]上失败

更新3（2017年8月6日）

我每天花两年半的时间与两者合作，我想补充以下几点。

有相似数量的NPM包与每个包集成，但你会注意到有关于Nightwatch（4x）的Stackoverflow问题要多得多。我相信这是因为Webdriver.io更像是一种自动化测试方法[我的意见，我欢迎反馈/推迟]。使用它的人不会对如何使用它有疑问，他们会对技术有特定的问题。

对于拥有广泛Selenium IDE和扎实的JavaScript体验的人来说，Nightwatch将是一个更好的切入点。它有很多有用的解决方案。我与Dalek的经验表明，这同样是一个不错的选择。

有更多javascript，也许还有一些面向对象编程和unix经验的人可能会发现Webdriver.io更好。正如我目前所做的那样，构建自己的自定义框架只是一个很好的选择。如果您可以想象您希望初始化，流量控制和报告如何工作，并愿意投入资金，那么它很适合。

我被问到下面我更喜欢哪个，到目前为止，我更喜欢Webdriver.io进行广泛的e2e测试。虽然我经常在我们的平台上构建大多数客户端工作时使用个性化的Nightwatch仓库，但在不久的将来，随着我构建自己的Webdriver.io解决方案，这可能会发生变化。

更新4（2018年5月2日）

更新了有关控制Selenium和浏览器驱动程序的清晰度，以及添加有关使用Appium和Xcode / Android Studio的一些详细信息。

Answer 2

对于许多Web自动化POC决策，这个问题已成为真正的难题。我不希望它指示错误的方向！

因此，我觉得它需要一个更全面的答案，范围更广（易于安装，依赖项，重要的插件，服务，报告程序，文档，支持和其他集成），希望比接受的答案更主观。

❒TL; DR：（对于懒惰者是！）

➮如果您是刚开始使用Web自动化的初学者，或者您只是   想要为中小型Web应用程序建立一些测试范围，    然后选择两者中的任意一个！ （也可以进行硬币翻转！）两者之间的差异很小水平。   只有当您遇到更复杂的挑战时，裂缝才会成为空白。

➮如果您正在考虑建造 完整的重量级建筑   自动化工具 ，以确保大型企业网站的质量   应用或大型门户网站，然后阅读整篇文章（或将我的   建议和WDIO！）

❒凭据：（我在这方面有什么建议？）

自2013年初以来，我一直在广泛使用基于 NodeJS的测试框架，担任过从入门级到高级，再到质量检查负责人的各种质量检查自动化工程角色。我将总结我在这些框架和Web自动化方面的工作经验：

WebdriverIO（ +3年）
守夜人（ +1.5年）
使用这些工具构建，维护和扩展多个框架，以确保在所有主要浏览器和环境（台式机和移动设备）上的质量
在各种聚会/会议上主持了多个WebdriverIO和NightwatchJS 对话和演示
非常熟悉整个NodeJS测试环境（除WebdriverIO和Nightwatch外的，还与WebdriverJS（WebdriverIO的原始叉子），Nightmare，Robot和最近的{ {3}} ）。

❒建议：：如果您必须在两者之间进行选择以实现 Puppeteer ，建议您通读整个答案。只有这样，您才能对整个 table 拥有完整的外观。

❒项目详细信息：

.-------------.---------.-----------.----------.-------------.--------------.
|   project   | ⭐️stars | forks | issues|  open PRs |   updated  |
:-------------+---------+-----------+----------+-------------+--------------:
| webdriverio |    4660 |      1263 |       44 |          12 |  05.Mar.2019 |
:-------------+---------+-----------+----------+-------------+--------------:
| nightwatch  |    9000 |       859 |  118|*308|           9 |  26.Jan.2019 |
'-------------'---------'-----------'----------'-------------'--------------'

^* -第二个值表示未解决的问题（open标签）和陈旧的问题< / em>（stale标签，POC）。如果您感到好奇，（我知道我是！！ ）stale表示给已被漫游器使用了一段时间的未激活票证的标签。（这很可疑！）

❖浅表：（这是对以上数字的个人解释，请带一点盐）


➮NightwatchJS是一种使用更为广泛的解决方案（由Github恒星总数强制执行的），它在整合后也迅速臭名昭著。   并由几家大公司的质量检查小组宣讲（例如：    LinkedIn ）

➮由于具有坚固性，模块化和可扩展性，WebdriverIO拥有更多的fork。最近与许多流行和随需应变服务（例如 ChromeDevTools和VisualRegression插件）的集成也增强了测试社区对该解决方案的信任

➮接下来的两类实际上是 贡献者余额 的真实形象（ NightwatchJS主要由199 of them维护，而WebdriverIO除了主要贡献者Andrei Rusu，背后有一个非常活跃的社区）

❒免责声明！


以下两个等级（on a scale of 1-5 ⭐️）是我在两个框架上进行广泛工作后的个人评估。他们   除了我自己在给定条件下的经历外，别无其他   工具。

❒设置项目：

WebdriverIO（ 5/5 ⭐️ ）

NightwatchJS（ 4.5/5 ⭐️ ）

为此，现在就可以很简单地设置WDIO或Nightwatch或任何基于NodeJS的测试框架：

➊安装软件包：

npm install --save webdriverio // or npm install --save nightwatch

➋安装并启动Selenium Server软件包：

npm install --save-dev selenium-standalone // don't forget to ... cd ./node_modules/.bin ./selenium-standalone install ./selenium-standalone start

➌创建一个快速测试文件夹结构：

./ ├── /test | ├── /features (test-files go here) | | └── test.js (your first test here) | ├── /pages (page-objects go here) | ├── /assets (everything goes in here) | └── /custom_commands (custom methods go here) └── package.json

➍生成配置文件（wdio.conf.js或nightwatch.conf.js）：


➮（强度）在这一点上，WebdriverIO获得了优势，因为现成的和定制的CLI   向导，用于简单易用的配置   wdio.conf.js文件（您可以通过wdio config启动向导   命令）

➮使用Nightwatch，您必须从Christian Bromann部分复制并粘贴模拟nightwatch.conf.js文件

➮这并不是说缺少Nightwatch，只是我个人觉得它为某些方面留出了更多的解释空间   方面，例如哪些配置键是必需的，什么是   nightwatch.json及其与nightwatch.conf.js有何不同，   等。似乎在读取初始配置后   文档中，我提出的问题多于答案。

❖WebdriverIO的配置助手（ CLI向导）：

Getting Started

❒编写并运行我们的第一个测试：

WebdriverIO（ 4.5/5 ⭐️ ）

NightwatchJS（ 4.5/5 ⭐️ ）

好，您现在终于可以建立您的项目了，您已经检查了所有软件依赖性，不是时候编写我们的第一个测试了。当前步骤中的项目应如下所示：

./ ├── /test | ├── /features | | └── test.js | ├── /pages | ├── /assets | └── /custom_commands ├── wdio.conf.js or nightwatch.conf.js └── package.json

我非常喜欢并赞赏Nightwatch和WebdriverIO在各自的主页上都有一些不错的，即用的工作示例。 即插即用！

NightwatchJS示例：（测试Google搜索伦勃朗）

module.exports = { 'Demo test Google' : function (client) { client .url('http://www.google.com') .waitForElementVisible('body', 1000) .assert.title('Google') .assert.visible('input[type=text]') .setValue('input[type=text]', 'rembrandt van rijn') .waitForElementVisible('button[name=btnG]', 1000) .click('button[name=btnG]') .pause(1000) .assert.containsText('ol#rso li:first-child', 'Rembrandt - Wikipedia') .end(); } };

WebdriverIO示例：（测试DuckDuckGo对WebdriverIO的搜索）

const webdriverio = require('webdriverio'); const options = { desiredCapabilities: { browserName: 'chrome' } }; const client = webdriverio.remote(options); client .init() .url('https://duckduckgo.com/') .setValue('#search_form_input_homepage', 'WebdriverIO') .click('#search_button_homepage') .getTitle().then(function(title) { console.log('Title is: ' + title); // outputs: "Title is: WebdriverIO (Software) at DuckDuckGo" }) .end();

当您想向某人展示快速的测试框架部署或教授自动化课程并且您缺少一个可以测试手头工作的工作示例时，这特别方便。


➮（强度）在编写第一个测试之前，WebdriverIO决定了要做出的决定。你想写你的代码吗   同步还是异步？即时提供极大的灵活性，让您选择自己的方式   想编写测试（使用sync标志）。

// By default WebdriverIO commands are executed in a synchronous way using // the wdio-sync package. If you still want to run your tests in an async way // e.g. using promises you can set the sync option to false. sync: true,

❖sync: true示例：

describe('DuckDuckGo - Search Test, () => { it('Should test the DuckDuckGo search page', () => { browser.url('https://duckduckgo.com/'); browser.setValue('#search_form_input_homepage', 'WebdriverIO'); browser.click('#search_button_homepage'); const title = browser.getTitle(); console.log('Title is: ' + title); }); });

❖sync: false示例：

describe('DuckDuckGo - Search Test, () => { it('Should test the DuckDuckGo search page', () => { return browser .url('https://duckduckgo.com/') .setValue('#search_form_input_homepage', 'WebdriverIO') .click('#search_button_homepage') .getTitle().then(function(title) { console.log('Title is: ' + title) // outputs: "Title is: WebdriverIO (Software) at DuckDuckGo" }); }); });

❒页面对象：

WebdriverIO（ 5/5 ⭐️ ）

NightwatchJS（ 5/5 ⭐️ ）

如今，几乎不可能进行有关 web自动化的讨论，而最终不会引起对，其有用性，其实现或通常是页面对象模型。

在深入探讨如何在这两个NodeJS测试框架中实现页面对象之前，我觉得我们必须了解 为什么？ ，我们正在使用它们。 / p>

为什么？（为什么要使用页面对象？）

有一句话，不要重新发明轮子，所以我不会。   相反，我引用 ThoughtWork的page objects   恕我直言最好的人：


”当您针对网页编写测试时，需要引用该网页中的元素才能单击链接并确定显示的内容。但是，如果编写的测试直接操作HTML元素，则您的测试页面对象将使用特定于应用程序的API包装HTML页面或片段，从而使您能够操作页面元素而无需深入HTML。”



什么？（页面对象为我们提供了什么？）


他们创建了关注点分离：测试与页面

他们创建了该应用程序的高级抽象

它们（应该）包含有关页面的所有静态信息

它们提供了无需更改测试即可重新设计应用程序的功能

它们可以代表页面上的任何元素（对象），也可以代表整个页面本身



如何？（我们如何创建此类页面对象？）

够b！让我们看看如何轻松实现一些   测试框架中的页面对象。

WebdriverIO页面对象示例：

❖page.js（这是您的页面对象基础）

export default class Page { open (path) { browser.url(path); // !Note: if you want to make sure your page was completely // loaded, then maybe add some logic to wait for // document.readyState = "complete", or "interactive" // Use a /custom_command for this! Go D.R.Y. principle! RAWWWWR! } }

❖form.page.js（这是一个登录表单页面对象示例）：

import Page from './page'

class FormPage extends Page {
    //
    // > define your elements here <
    //
    get username () { return $('#username') }
    get password () { return $('#password') }
    get submitButton () { return $('#login button[type=submit]') }
    get flash () { return $('#flash') }
    //
    // > define or overwrite page methods here <
    //
    open () {
        super.open('login')
    }

    submit () {
        this.submitButton.click()
    }
}

export default new FormPage()

NightwatchJS页面对象示例：

❖homepage.js（这是主页页面对象示例）：

const homepageCustomCommands = {

  checkHomePage: function() {
    this.api.perform((done) => {
      //
      // > do some homepage checks here <
      //
    });
    return this;
  }
};

const homepage = {
  url() {
    return `${this.api.globals.baseUrl}/homepage`;
  },
  elements: {
    'generic': '#generic',
    'elements': '#elements',
    'gohere': '#gohere',
    sections: {
      header: {
        selector: '#header',
        elements: {
          'these': '#these',
          'are': '#are',
          'your': '#your',
          'selectors': '#selectors'
        },
      },
      footer: {
        selector: '#footer',
        elements: {
          // > footer selectors go here <
        },
      },
    },
  }
  commands: [homepageCustomCommands]
};

module.exports = homepage;

❒文档和支持：

WebdriverIO（ 5/5 ⭐️ ）
NightwatchJS（ 3/5 ⭐️ ）

NightwatchJS和WebdriverIO都在文档方面提供了强大的支持：

❯WebdriverIO：Martin Fawler | Getting Started | API DOCs

❯NightwatchJS：Gitter Chat | Getting Started

➮（强度），两个项目都有非常整洁且内容丰富的文档以及出色的示例

➮（机会），有时我发现自己正在寻找一个或多个Nightwatch功能问题或框架限制的解决方案，只是为了找到解决方案，胡同要点，或死水博客。如果将这样的答案和贡献（像PR提交保持开放状态）集中并记录下来，我会很好

➮（弱点）我不确定由于Nightwatch的缓慢开发周期和对社区BUG的乏善可陈（最好是）的支持，该瓶颈在哪里？要求，甚至提交PR。 在我眼中，与WDIO周围蓬勃发展的开发社区或有用的Gitter API DOCs
相比，这似乎更是一个缺陷。

❒待续...

❒报告

❒CI / CD系统集成

❒架构差异

NightwatchJS和WebdriverIO有什么区别？

2 个答案: