一.前言
cypress对于iframe的操作比较蛋疼，虽然可以实现，但是丢失了很多特性，当我们操作iframe的时候，不会自动截图，在调试模式下也没法点选iframe内的元素。 关于iframe的实现，网上搜到到资料比较零散，官方已经提供了许多案例，直接分析官方例子吧。
官方代码: https://github.com/cypress-io/cypress-example-recipes/tree/master/examples/blogs__iframes/cypress/integration
二.实现
最佳实现是需要多写断言的，以下举例主要介绍iframe的操作，断言就不加了。
1.将获取iframe定义为公共方法
以下是新建某单据流程
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
| const getIframeDocument = () => {
return cy
.get('frame的id')
.its('0.contentDocument')
};
const getIframeBody = () => {
return getIframeDocument()
.its('body').should('not.be.undefined')
.then(cy.wrap)
};
describe("test", function () {
beforeEach(()=> {
cy.viewport(1920,1080);
cy.visit('登陆地址)
});
it('登陆', function () {
cy.on('uncaught:exception', (err, runnable) => {
return false
});
//输入用户名和密码
// cy.get().type(用户名)
// cy.get().type(密码)
//点击登录按钮
//cy.get().clickl()
//点击一级菜单
//cy.get().clickl()
//往后每一步都需要进入iframe操作，调用getIframeBody方法
//点击新建采购单
getIframeBody().contains('新建采购单').click();
getIframeBody().find('.title-row__hint').click();
//搜索
cy.iframe().find('').type(1);
//选择
cy.iframe().find('').click();
//模糊
cy.iframe().find('').find('').type(1);
//选择
cy.iframe().find('').click()
//保存并断言
cy.iframe().find('').should('include.text', '保存').click()
});
});
|
2.使用cypress-iframe
cypress-iframe需要单独安装，这个是一个专门解决cypress操作iframe的插件。
安装
1
| npm install cypress-iframe --save
|
在suppot/command.js引入
1
2
3
| import 'cypress-iframe';
require('cypress-iframe');
|
下面同样以新建某单据流程举例
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
| describe("test", function () {
beforeEach(()=> {
cy.viewport(1920,1080);
cy.visit('登陆地址')
});
it('登陆', function () {
cy.on('uncaught:exception', (err, runnable) => {
return false
});
cy.frameLoaded('frame的id');
cy.iframe().contains('新建采购单').click();
cy.iframe().find('.title-row__hint').click();
cy.iframe().find('').type(1);
cy.iframe().find('').click();
cy.iframe().find('').find('').type(1);
cy.iframe().find('').click()
cy.iframe().find('').should('include.text', '保存').click()
});
});
|
