Cypress简易入门教程

1 Windows下安装

1.1方法一

1）安装node.js(https://nodejs.org/en/download/)，根据版本选择32位或64位。

2）确认ndejs和npm是否安装上:

C:\Users\xiang>node -v
v12.18.0
C:\Users\xiang>npm -v
6.14.

3）生成package.json（假设准备安装在c:\Cypress>）

C:\Users\xiang>cd c:\Cypress
C:\Cypress>npm init

4）安装Cypress

C:\Cypress>npm install cypress --save-dev

1.2方法二

1）安装yarn (https://yarnpkg.com/en/docs/install#windows-stable)

2）确认yarn是否安装上

C:\Users\xiang>yarn -v
1.22.4

3）安装Cypress

C:\Users\xiang>cd c:\Cypress
C:\Cypress>yarn add cypress --dev

2. 运行

2.1方法一

C:\Cypress\node_modules\.bin>cypress open

2.2方法二

C:\Cypress>yarn run cypress open

2.3 方法三（我经常用的方法）

配置C:\Cypress\package.json

{
   
  "license": "ISC",
  "scripts": {
   
    "cypress:open": "cypress open",
    "cypress:run": "cypress run"
  },
  "devDependencies": {
   
    "cypress": "^4.8.0"
  }
}

打开运行控制器

C:\Cypress>yarn run cypress open

运行默认路径下的所有测试代码

C:\Cypress>yarn run cypress run

默认路径为C:\Cypress\cypress\integration，可以通过

{
   
  …
"integrationFolder": "cypress/integration/demo",
…
}

改变默认路径，上述代码中默认路径改为

C:\Cypress\cypress\integration\demo

3测试框架

• before():相当于unittest中的def setUp(cls)方法或者Junit的@Before方法标签；
• after():相当于unittest中的 def teardown(cls) 方法或者Junit的 @Before方法标签；
• beforeEach() : 相当于unittest中的def setUpClass(cls) 方法或者Junit的@BeforeClass方法标签；
• afterEach() : 相当于unittest中的def tearDownClass(cls) 方法或者Junit的@AfterClass方法标签。
  4 GUI测试代码案例

4.1 第一个测试代码

测试电子商务系统登录程序

describe('login',function(){
   
  const username = 'cindy'
  const password = '123456'
  context('测试电子商务网站',function(){
   
    it('登录成功，调到商品列表页面',function(){
   
      cy.visit('http://127.0.0.1:8000')
      cy.get('input[name=username]').type(username)
      cy.get('input[name=password]').type(password)
      cy.get('form').submit()
      //断言
      cy.url().should('include','/goods_view')
      cy.get('title').should('contain','电子商务系统')
     })  
    })
}