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','电子商务系统')
     })  
    })
})

4.2元素查找 - get

<input type="text" class="s_ipt" name="wd" id="kw" maxlength="100" autocomplete="off">

• 根据元素 id 查找

cy.get('#kw')

• 根据元素名称查找

cy.get('input[name="wd"]')

• 根据元素的类名查找

cy.get('.s_ipt')

• 根据CSS selector查找、

cy.get('input[maxlength ="100"]')

4.3元素查找 – contains

• 根据元素文本查找

cy.contains('value')

• 根据元素属性及其文本查找

cy.get('div[name="ele-name"]').contains('value')

• 使用正则匹配元素文本以查找

cy.get('.class-name').contains(/[0-9]*/)

4.4 操作

• type(String)、输入，比如
  

cy.get('#kw'). type('Testing')

• click()、点击，比如

cy.get('.btn'). click ()

• clear()、清空input或textarea的内容，比如

cy.get('.ant-input').clear()

• submit()、提交表单，比如

cy.get('.ant-form').submit()

• dblclick()、元素双击，比如

cy.get('.ant-btn').dblclick()

• rightclick()、元素右击，比如

cy.get('.ant-btn').rightclick()

• select(String)、对元素选择，比如check()、勾选checkbox，比如Uncheck、反选 checkbox，比如scrollIntoView()、如果某个元素不在当前可视范围，可以滑动至可视范围，比如scrollTo(String)、指定位置滑动，比如