NightwatchJS和WebdriverIO有什么区别？

Question

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

看起来他们有相同的语法,并做几乎相同的事情.他们有什么不同？

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

Answer 1

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

Webdriver.io让你写你的测试用例"从零开始",并在报告有很大的控制,比如通过使用松弛NPM包等与松弛整合.您需要知道或快速学习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文件中配置浏览器,然后在运行测试时,您可以将浏览器或一组浏览器("配置文件")作为命令行参数调用,因此:

对于本地浏览器:

./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论据本地计算机上存在的浏览器,你可以挖掘到的酱实验室支持(目前)760个浏览器.继续粘贴到终端并点击返回:

./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世界:尝试这个锅炉

更新:人们提出的几点,自从发布以来我发生过这一点.

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

这个问题已经成为许多网络自动化POC决策的真正分支.我不希望它指出错误的方向!

因此,我觉得它需要一个更彻底的答案,更广泛的范围(易于安装,依赖,重要的插件,服务,记者,文档,支持和其他集成),并希望比接受的答案更主观的交付.

❒TL; DR: (为lazies! )

➮如果您是初学者,开始使用Web自动化,或者您只想为小型或中型Web应用程序构建一些测试覆盖率, 那么请选择其中任何一个!(不妨做一个硬币翻转!)两者之间的差异在较低的水平上非常渺茫.只有当您遇到更复杂的挑战时,裂缝才会成为裂缝.

➮如果您正在寻求构建一个成熟的,重量级的自动化工具来确保大型企业Web应用程序或大型Web门户的质量,那么请阅读整篇文章(或者听取我的建议并转到WDIO!)

❒证书:(什么建议我在此一说？)

自2013年初以来,我一直在广泛地使用基于NodeJS的测试框架,从入门级到高级,再到QA领导,已经担任过各种QA自动化工程角色.我将总结我在这些框架和Web自动化方面的工作经验:

• WebdriverIO(+ 3年)
• 守夜人(1.5 年)
• 使用这些工具构建,维护和扩展了几个框架,确保了所有主流浏览器和环境(桌面和移动设备)的质量
• 在各种聚会/会议上保留了几个WebdriverIO和NightwatchJS 讲座和演讲
• 相当熟悉整个NodeJS测试环境(除了WebdriverIO和Nightwatch之外,还使用过:WebdriverJS(WebdriverIO的原始分支),Nightmare,Robot和最近的Puppeteer).

❒推荐:如果您必须在两者之间进行选择以实施POC,我建议您仔细阅读整个答案.只有这样,您才能对整个画面有完整的展望.

❒项目详情:

.-------------.---------.-----------.----------.-------------.--------------.
|   project   | ??stars | forks | issues|  open PRs |   updated  |
:-------------+---------+-----------+----------+-------------+--------------:
| webdriverio |    5050 |      1450 |       68 |           6 |  12.Jul.2019 |
:-------------+---------+-----------+----------+-------------+--------------:
| nightwatch  |    9450 |       930 |  116|?306|          15 |  01.Jul.2019 |
'-------------'---------'-----------'----------'-------------'--------------'

^* -在第二个值表示的总和未解决的问题(open标签)陈旧的问题(stale标签,他们的199).如果你很好奇,(我知道我是!)stale代表打开机票的标签,机票已经暂停了一段时间.(这很可疑!)

• ❖浅小贴士:(这是上述数字的个人诠释,所以请随身携带的盐粮)

➮NightwatchJS是一种更广泛使用的解决方案(由Github明星总数强制执行的想法),在几家大公司(例如:LinkedIn)的QA团队进行整合和传播之后,它也迅速变得臭名昭着.

➮由于其强大,模块化和可扩展性,WebdriverIO拥有更多的分叉.最近与许多流行和随需应变服务的集成(例如:ChromeDevTools和VisualRegression插件)也加强了测试社区对解决方案的信任

➮接下来的两个类别实际上是贡献者平衡的真实形象(NightwatchJS主要由Andrei Rusu维护,而WebdriverIO除了它的主要贡献者Christian Bromann,背后有一个非常活跃的社区)

❒免责声明!

以下等级(on a scale of 1-5 ??)是我对两个框架进行广泛合作后的个人评估.除了我自己使用给定工具的经验外,它们没有反映任何其他内容.

❒设置项目:

• WebdriverIO(5/5 ??)
• NightwatchJS(4.0/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):

➮ (➚Strength➚)这是在这一点上WebdriverIO就能取得优势,因为它涉及外的开箱用一个特制的CLI向导为一个简单的与直接的配置的的 wdio.conf.js文件(你可以开始通过该向导wdio config 命令)

with使用Nightwatch,您必须从" 入门"部分复制粘贴模拟nightwatch.conf.js文件

➮并不是Nightwatch在这方面缺乏,只是因为我个人认为它在某些方面留下了更多的解释空间,例如配置键是强制性的,nightwatch.json它是什么 以及它与之不同nightwatch.conf.js,等等.阅读初始配置文档,我留下的问题多于答案.

❖WebdriverIO的配置助手(CLI向导):

❒编写和运行我们的第一个测试:

• WebdriverIO(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例如:(测试谷歌搜索伦勃朗)

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)

describe('DuckDuckGo - Search Test, () => {

    it('Should test the DuckDuckGo search page', async () => {

        await browser.url('https://duckduckgo.com/');
        await browser.setValue('#search_form_input_homepage', 'WebdriverIO');
        await $('#search_button_homepage').click();
        // 
        const title = await browser.getTitle();
        assert.equal(title, 'WebdriverIO at DuckDuckGo', `Checking the title ...`);
    });
});

当您想要向某人展示快速测试框架部署,或者教授自动化课程并且您缺少一个测试手头工作的工作示例时,这将变得特别方便.

➮ (➚Strength➚)在编写第一个测试之前,WebdriverIO会给你一个决定.您想同步还是异步编写代码 ？这提供了极大的灵活性,让您选择编写测试的方式(使用wdio-v5标志).

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();

❖ wdio-v4例子:

// 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例子:

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);
    });
});

❒页面对象:

• WebdriverIO(wdio-v4)
• NightwatchJS(wdio-v5)

如今,关于Web自动化的讨论几乎是不可能的,并且最终不会在关于页面对象,它们的实用性,它们的实现或一般的页面对象模型的热烈讨论中结束.

在我们讨论如何在这两个NodeJS测试框架中实现页面对象之前,我觉得我们必须明白为什么？我们正在使用它们.

为什么？(为什么我们使用页面对象？)

有一种说法,不要重新发明轮子,所以我不会.相反,我会引用ThoughtWork的Martin Fawler ,恕我直言最好说:

"当您针对网页编写测试时,您需要引用该网页中的元素,以便单击链接并确定显示的内容.但是,如果您编写直接操作HTML元素的测试,那么您的测试将变得脆弱. UI.页面对象使用特定于应用程序的API包装HTML页面或片段,允许您操作页面元素而无需在HTML中进行挖掘.

什么？(页面对象为我们提供了什么？)

• 他们创造了一个关注的分离:测试与页面
• 他们创建了应用程序的高级抽象
• 它们(应该)包含有关页面的所有静态信息
• 他们提供了重新设计应用程序的能力,无需更改测试
• 它们可以表示页面上的任何元素(对象),也可以表示整个页面本身

怎么样？(我们如何创建这样的页面对象？)

足够的喋喋不休!让我们看看如何在测试框架内轻松实现一些页面对象.

WebdriverIO页面对象示例:

❖ wdio-v4(这是你的页面对象基础)

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"
            });
    });
});

❖ sync: true(这是登录表单页面对象示例):

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!
    }
}

NightwatchJS页面对象示例:

❖ sync: false(这是主页页面对象示例):

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()

❒文档和支持:

• WebdriverIO(5/5 ??)
• NightwatchJS(5/5 ??)

NightwatchJS和WebdriverIO都在文档方面提供了很好的支持:

❯WebdriverIO:入门 | API DOCs | Gitter Chat

❯WatwatchwatchJS:入门 | API DOC

➮ (➚Strength➚)这两个项目都有非常简洁和信息丰富的文档,并附有很好的例子

➮作为一种评论,我有时会发现自己在寻找一个或多个Nightwatch特征问题或框架限制的解决方案,只是为了在一些后巷要点或者回水博客上找到解决方案.如果这些答案和贡献(如功能PR提交保持打开)将被集中和记录,我会很高兴

➮ (➘Weakness➘)我不确定瓶颈所在的瓶颈所在的关于Nightwatch缓慢的开发周期和对社区BUG,功能请求甚至提交的PR的支持不足(最好).在我看来,这与WDIO周围充满活力的开发社区或有用的Gitter 聊天频道形成鲜明对比.

❒继续......

❒报告

❒CI/ CD系统集成

❒建筑差异