Cypress 将会改变你的开发方式 – Hacker Noon

原文出处 Cypress will change the way you develop – Hacker Noon

主页

Hacker Noon

FollowSign inGet startedHomepage

Go to the profile of Paul Falgout

Paul FalgoutBlockedUnblockFollowFollowingMarionetteJS. RoundingWell. Seoul.Jan 1


Cypress 会改变你的开发方式

用Cypress使TDD成为您的前端新一年的解决方案

2015年11月 我看到 Brian Mann 在 Cypress.io 上面做了一个演示. 我感觉看到了未来.

当时我和我的同事们就挑战改进了我们的测试方式. 我在做MarionetteJs代码覆盖率方面的工作 , 我把我在那里学到的东西都带到了工作中。 Mocha的单元测试很好, 这对MarionetteJs来说很好, 但它几乎没有覆盖我们正在开发的应用. 我们进行了Selenium测试,但是这些测试常常是不稳定的,并且在开发之后又做了一些额外的工作。 尝试将Selenium测试与我们的开发人员工作流集成失败。难度太大了,所有的东西都有点像hacky。

“最后一个使我的工作流程发生了巨大变化的工具是git。”

5月,我对Cypress进行了早期测试,并编写了我的第一个测试。很明显,我不知道自己在做什么。Cypress感觉非常容易上手而且它使用了Mocha和Chai来写测试用例, 但是我知道从无到有一个成熟的应用是多么艰难,我第一个错误就是把 Cypress 当做 Selenium的替代品. 它完全可以替代 Selenium,我强烈建议暂时搁置端到端测试,并开始进行集成测试。

在我们开始对服务器API进行stubbing之后,我们立即看到了工作流的改进。 我们甚至还没有编写测试,但是我们能够轻松地处理复杂的数据场景。 我们不需要接触数据库或设置服务器。通过一些简单的javascript,我们可以设置我们需要覆盖的每一个场景来开发一个新特性,然后通过cypress, 在我们的应用中,与它交互,可以很好地了解浏览器中实际发生的事情。 不久我就停止了打开chrome来测试,并且只使用了cypress来开发。 最后一个使我的工作流程发生了巨大变化的工具是git。

让我们来看看实际情况是怎样的。

**describe**('User List', function() {
  **describe**('when there are users in selected group', function() {
    **beforeEach**(function() {
      cy.server()
        .route('/api/users?group_id=*', 'fixture:users')
        .visit('/users');
    });

    **it**('should load the list page', function() {});  
  });

  **describe**('when there are no users in group', function() {
    **beforeEach**(function() {
      cy.server()
        .route('/api/users?group_id=*', [])
        .visit('/users');
    });

    **it**('should load the empty page', function() {});
  });
});

在这个 Cypress 示例中, 我们为不同的API结果设置了两个数据场景. 在实践中,我们可以添加 describe.only 到其中一个场景种 这样我们就可以在那个环境中开发. 在运行 “test” 之后, Cypress 就是一个带有console完全交互式的Chrome实例

Cypress 的示例代码. 左边的就是可以互动的 test 运行结果.


虽然这并没有触及到cypress的前景和潜力,但如果这只是它所做的一切,那就足够了。在1月的第一周,我很高兴地说,我们推出了我们的第一个主要功能,包括对各个方面的cypress测试。 另外,我正在和Marionette团队合作,可能测试用cypress做的Marionette, 虽然它不是专门用来测试一个库的,但是所有的东西看起来都很有希望。我希望能更多地分享我在这个过程中所学到的东西。

cypress应该在不久的将来上市,我相信我们很快就会想,如果没有它,我们将如何工作。 现在就开始吧,让cypress和TDD成为你新的一年的解决方案。 Cypress 有一个活跃的社区,如果你没有权限去运行 cypress headlessly, 测试期间目前正在通过邀请访问GUI。获取权限是非常容易的; 只需要访问他们的 gitter room.