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

转眼之间，你不知道的Cypress系列已经到第6篇了。在Cypress中国群内、在公众号iTesting里，我每天都能看到大量关于Cypress的使用讨论和私下问询。这让我感到无比荣幸。[买了书的同学们，公众号回复你的微信，拉你到Cypress中国群]。

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

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

There will never be support for multiple browser tabs.

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

（一）被诱入歧途的多Tab测试

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

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

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

1 2	//"iTesting" <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如何处理这种情况：

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

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

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

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

//"iTesting"
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里，你永远不会看到测试用例时好时坏。

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

哎，蔡老师全部满足你：

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

（五）秀儿？是你么

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

//"iTesting"
//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')