场景
很多时候有这样的场景，在页面上操作，点击了什么然后浏览器新开了标签页，但是在实际使用中没找到cypress切换标签页的API。
官网称之为将永久存在的缺陷。原文地址https://docs.cypress.io/zh-cn/guides/references/trade-offs.html#
具体解释如下。
解决办法
尽管如此，依然有一些方法可以来实现。官方提供的四种实现方式 Git代码地址
以下为个人参考实现
强制在当前页打开
例如我们在bing搜索“百度百科”，并打开，我们知道，搜索引擎打开搜索结果是跳转新窗口的。
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
| describe("test", function () {
beforeEach(()=> {
cy.visit('https://cn.bing.com/?FORM=BEHPTB');
});
it('搜索百度百科并且打开', function () {
cy.get('#sb_form_q').type('百度百科');
cy.get('#sb_form_go').click();
cy.contains('百度百科_全球最大中文百科全书')
.invoke("removeAttr", "target")
.click({force: true});
});
});
|
获取href并visit
这里不用百科搜索来举例来，因为从bing.com到baidu.baike.com涉及到跨域，在cypress中不允许访问（同一个域名下的子域名可以）。
这边试一下打开baidu.baike.com并且点击个人中心的case，个人中心是跳转到新标签的，我们获取他的地址，在当前页打开。
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
| describe("获取href重新visit", function () {
beforeEach(()=> {
cy.visit('https://baike.baidu.com/');
});
it('进入百科打开个人中心', function () {
cy.get('.usercenter > div > a')
.then(function ($a) {
const href =$a.prop('href');
console.log(href)
cy.visit(href)
cy.url().should('include', 'usercenter')
})
});
});
|
只验证地址不进行跳转
如果不需要到新页面操作只是验证跳转，可以这么做。
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
| describe("只验证地址不跳转", function () {
beforeEach(() => {
cy.visit('https://bing.com/');
});
it('只验证地址不跳转', function () {
cy.get('#sb_form_q').type('百度百科');
cy.get('#sb_form_go').click();
cy.contains('百度百科_全球最大中文百科全书')
.should('prop', 'href')
.and('include', 'baike.baidu.com')
});
});
|
使用cy.request验证
这个和上面类似，并不在新页面做操作，使用cy.request来访问，并可以访问response的Body, Headers，Status属性。我们可以判断状态码，判断body内容来做校验。
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
| describe("使用cy.request访问新标签页", function () {
beforeEach(() => {
cy.visit('https://bing.com/');
});
it('使用cy.request访问新标签页', function () {
cy.get('#sb_form_q').type('百度百科');
cy.get('#sb_form_go').click();
cy.contains('百度百科_全球最大中文百科全书')
.then(function ($a) {
const href = $a.prop('href')
cy.request(href)
.its('body')
.should('include', '百度百科_全球最大中文百科全书')
})
})
});
|
