抱歉，您的浏览器无法访问本站

本页面需要浏览器支持（启用）JavaScript


了解详情 >

Cypress--安装和使用

不言
cypress

发布于：2020年3月19日
次浏览

安装

先为你的工程创建个目录

mac/linux

1
2
3
mkdir ~/cypressdemo
cd ~/cypressdemo
npm install cypress --save-dev

windows

创建目录

1
D:\develop\autotest\cypressdemo

进入cypressdemo文件夹

执行

1
npm install cypress --save-dev

打开

1
./node_modules/.bin/cypress open

接下来就打开如下界面了

image.png

然后选择刚刚的cypress目录

image.png

可以看到默认有个examples目录，是官方自带的demo，还是挺全的，点击就运行了，右侧会加载出你本地可执行的浏览器，Chrome内核的就行。

这个是运行界面，编写脚本可以通过webstorm或者vscode打开刚刚的cypressdemo文件夹，下面说。

脚本编写

脚本放在了cypressdemo下的integration下。

image.png

我们新建的时候也在integration下编写，可以新建文件夹。

下面写个登陆F6的case. (用户名密码已去除)

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
describe("打开F6并且登陆", function () {
    beforeEach(()=> {
        // 浏览器模式访问时，可按照自己的需要设置窗口大小，如 cy.viewport(1920,1100)
        cy.viewport(1920,1080);

        //前置工作，打开https://m.f6car.com/
        cy.visit('https://m.f6car.com/');
    });


    it('登陆', function () {
        cy.on('uncaught:exception', (err, runnable) => {
            return false
        });
            //输入用户名和密码
        cy.get('.usernameInput > .el-input__inner').type('此处用户名已省略');
        cy.get('.passwordInput > .el-input__inner').type('此处密码已省略');

        //点击登录按钮
        cy.get('[style="margin-bottom: 16px;"] > .el-form-item__content > .el-button').click();

});

此处注意在cypress.json加一句话：

{

“chromeWebSecurity”: false

}

// 需要注意的是这个配置没办法解决一个标签页下，两次visit域不同第二次无法跳转的问题。

博客内容遵循 署名-非商业性使用-相同方式共享 4.0 国际 (CC BY-NC-SA 4.0) 协议

本文永久链接是：http://example.com/2020/03/19/Cypress--%E5%AE%89%E8%A3%85%E5%92%8C%E4%BD%BF%E7%94%A8/

更新于：2025年6月17日

cypress

UI自动化

test

评论