iTesting软件测试知识分享

你不知道的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吗?

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

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

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

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

(三)是时候表演真正的技术了

不废话了,看Cypress如何处理这种情况:

1
2
3
4
5
//"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”.

什么,你怕这个网址打不开?好说!

1
2
3
4
5
6
7
8
9
10
11
12
13
14
//"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里,你永远不会看到测试用例时好时坏。

(四)什么?打开新页面后还有操作?

哎,蔡老师全部满足你:

1
2
3
4
5
6
7
8
9
10
//"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永远不满足一种解决方案,来,看高阶版:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
//"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')

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

(六)教练,我想打篮球

我知道你一定会问,所以我偷偷的给你准备了一个简单的题目,超级简单哦:

请访问如下页面,然后试着测试下这里的超链接。我相信,你一定会回来找我的:)

https://www.w3schools.com/tags/tryit.asp?filename=tryhtml_a_target

Cypress有很多奇淫巧技, 我已经总结超过百篇, 别走开,下一篇更精彩!

往期回看:

你不知道的Cypress系列(1) –鸡肋的BDD

你不知道的Cypress系列(2) –该死的PO模型​

你不知道的Cypress系列(3) – 是时候重构你的思维了

你不知道的Cypress系列(4) – “PO”已死,App Action当立

你不知道的Cypress系列(5) – 眼瞎的TestRunner​

🐶 您的支持将鼓励我继续创作 🐶
-------------评论, 吐槽, 学习交流,请关注微信公众号 iTesting-------------
请关注微信公众号 iTesting wechat
扫码关注,跟作者互动

本文标题:你不知道的Cypress系列(6) -- 多Tab的小秘密

文章作者:请关注微信公众号 iTesting

发布时间:2021年03月29日 - 23:03

最后更新:2021年04月19日 - 23:04

原始链接:http://www.helloqa.com/2021/03/29/你不知道的Cypress系列/你不知道的Cypress系列(6) -- 多Tab的小秘密/

许可协议: 署名-非商业性使用-禁止演绎 4.0 国际 转载请保留原文链接及作者。