你不知道的Cypress系列（6） -- 多Tab的小秘密

今天是你不知道的Cypress系列（6） -- 多Tab的小秘密

自从Cypress出现后，市面上Web端自动化测试框架就只剩下了两个： 一个是吊打一切的Cypress， 另一个是其它。虽然Cypress这么优秀，但它也有一些妥协和倔强，其中就包括这么一条：

• There will never be support for multiple browser tabs.

饶是经验丰富的测试老专家，在技术选型初次接触Cypress时，听到这个消息也不免倒吸一口凉气：“什么框架，怎么连多Tab都不支持？那还能推广吗？”

被诱入歧途的多Tab测试

在微信横空出世之前，你不会觉得用手机短信聊天有什么不对，你甚至很习惯，也从来没想过改变，直到微信一巴掌扇过来。同样的，多Tab测试也是如此。

我们先来看一下多Tabs测试的典型场景：

通常页面有一个超链接，它有href属性，当你点击文本的时候，会跳转。例如下面这个例子：

<a href="https://www.helloqa.com" target="_blank">关注iTesting!</a>

很显然，当你点击“关注iTesting”，浏览器就会重新打开一个页面，页面的网址是“https://www.helloqa.com”.

在Cypress出现之前，Selenium/WebDriver， 作为Web端自动化测试的巨无霸，是这么告诉我们的，UI自动化测试要模拟真实用户，用户怎么做，你就怎么做。

于是乎，你要测试这个功能，你就要点击一下“关注iTesting”这个超链接，然后等页面跳转后，你再把句柄移到这个新页面，来判断页面的URL正确性。

这个逻辑好像挺对的，就是代码写起来好累，而且运行时还经常出错。

测试多Tab需要打开多Tab吗？

不知道你有没有想过，你费那么老大劲写代码，是为了验证如下两个事实：

• 点击跳转这个功能正确。
• 跳转的新页面能打开。

真正的实力在于不战而屈人之兵。同样的，真正的测试是“不真的测试”。

我们想一下，Cypress跟其它“平（yao）平（yan）无（jian）奇（huo）框架”相比，最大的特点是什么？运行在浏览器内对吧。 能够直接操作DOM元素对吧？既然如此，操练起来吧！

是时候表演真正的技术了

不废话了，看Cypress如何处理这种情况：

cy
  .contains('关注iTesting')
  .should('have.attr', 'href', 'https://www.helloqa.com')
  .should('have.attr', 'target', '_blank')

这就完了？是的，这就完了！

如果你学过一点HTML的皮毛就会知道，target=_blank这个属性就是用来保证一定会打开新页面的。 而验证href是我期待的网址，一定能说明点击它就可以访问到“https://www.helloqa.com”.

什么，你怕这个网址打不开？好说！

cy
  .contains('关注iTesting')
  .should('have.attr', 'href', 'https://www.helloqa.com')
  .should('have.attr', 'target', '_blank')
  
cy
  .contains('关注iTesting')
  .then(link => {
    cy
      .request(link.prop('href'))
      .its('status')
      .should('eq', 200)
  })

直接发接口请求看HTTP Code返回，就这么生猛。在Cypress里，你永远不会看到测试用例时好时坏。

什么？打开新页面后还有操作？

哎，蔡老师全部满足你：

cy
  .contains('关注iTesting')
  .should('have.attr', 'href', 'https://www.helloqa.com')
  .should('have.attr', 'target', '_blank')
  
cy
  .contains('关注iTesting')
  .invoke('removeAttr', 'target').click()
// 请继续你的操作，此动作将会在当前页面打开超链接

秀儿？是你么

Cypress永远不满足一种解决方案，来，看高阶版：

//spy来了，直接监视窗口打开
cy
  .window().then((win) => {
    cy.spy(win, 'open').as('newWindow')
  })

cy
  .contains('关注iTesting')
  .click()

cy
  .get('@newWindow')
  .should('be.calledWith', '_blank', 'https://www.helloqa.com')

这才是使用Cypress正确的姿势啊！使用Cypress进行自动化测试，请优先考虑走后门。毕竟，Cypress可以访问任何你的应用程序可以访问的资源，那么，不如先“监控”下window打开这件小事儿：）