image.png

本文章主要讲解cypress 自动化。github 地址：https://github.com/cypress-io/cypress

解决问题：UI 脚本自动化执行。
例子：github 自动登录
级别：简单入门

一、环境安装
准备：必须有node 环境，可以通过npm 安装。

下载cypress ：

npm install cypress --save-dev

安装完成后打开：

cypress open

#或

node_modules/.bin/cypress open

会启动一个 Electron 程序。

image.png

自动登录效果：

github-test.gif

代码预览：

describe("github测试", () => {
  it("github", () => {
    cy.visit("https://github.com/login");
    cy.get("#login_field")
      .type("你的帐号");
    cy.get("#password")
      .type("你的密码");
      cy.get(".btn").click();
  });
});

有人说，我不会写代码怎么办，别急。已经有人为你考虑到了。
点击这里可以检测你所选中的选择器。

image.png

例如我要到登录帐号那个框框

image.png

里面去。
新建一个js文件。

describe("github测试", () => {
  it("github", () => {
   //这里放你的测试代码
  });
});

//把这句代码拷贝到你刚刚的新建的文件里面
    cy.get("#login_field")

下面是在输入框里面填写内容

     //在刚刚的代码后面加上   .type("帐号")
     cy.get("#login_field").type("帐号");

如果需要点击某个按钮 在获取到某个按钮后加 .click() 即可

      cy.get(".btn").click();

当然如果你想登录后获取Cookie，下次直接通过cookies 登录，可以用cy.getCookis();
具体用法可以以看Example 里面的例子。