阿狗工具

钩子函数
before() ：在当前 describe 的第一个测试用例中仅调用一次
beforeEach() ：在当前 describe 下的每一个测试用例执行前都要先执行一次
afterEach() ：在当前 describe 下的每一个测试用例执行完都要先执行一次
after() ：在当前 describe 的最后一个测试用例中仅调用一次

若包含多级测试套件，那么父级套件、祖父级套件声明的 hook 函数会作用于所有子级套件的测试用例，孙子级套件的测试用例…以此类推

describe('父测试用例', () => {
  before(() => {
    cy.log('父 before')
  })
  beforeEach(() => {
    cy.log('父 beforeEach')
  })
  afterEach(() => {
    cy.log('父 afterEach')
  })
  after(() => {
    cy.log('父 after')
  })
  it('父1', () => {
    // 期待 true 等于 true
    expect(true).to.eq(true);
  })
  it('父2', () => {
    // 期待1等于1
    expect(1).to.be.eq(1)

  })
  describe('我是子用例', () => {
    before(() => {
      cy.log('子 before', 2222)
    })
    beforeEach(() => {
      cy.log('子 beforeEach', 1111)
    })
    it('子测试1', () => {
      expect(true).to.eq(true);
    })
    it('子测试2', () => {
      expect(false).to.eq(false);
    })
  })
})

image.png

获取元素

1. cy.get(selector)

cy.get('.el-button--primary')
cy.get('[placeholder="请输入域账号/邮箱/手机号"]')

2. cy.find(selector)
   该方法用来在 DOM 树中搜索已被定位到的元素的后代，并将匹配到的元素返回为一个新的 jQuery 对象，比如：

cy.get("ul").find('#li1')

3. cy.contains(content)
   该方法用来获取包含指定文本的 DOM 元素

cy.contains('提交')
cy.contains('ul>li', '测试')

4. children
   获取 匹配元素下的所有子元素

cy.get('ul').children()
cy.get('ul').children('#li1')

5. parents
   获取匹配的DOM元素下的所有父元素，包括爷爷祖父...

cy.get('#li1').parents()

6. eq(index)
   获取匹配元素索引下的元素

cy.get('ul>li').eq(1)

6. 断言
   should
   1). 长度 have.length

// 通过 get 获取到的元素是否有3个
cy.get('li.selected').should('have.length',3)

2). 类 have.class

// .completed 应该有 text-decoration 和 line-through 类
cy.get('.completed').should('have.css','text-decoration','line-through')
// 通过 get 找到的表单中的 input 输入框是否没有拥有 disabled 的 class
cy.get('form').find('input').should('not.hava.class','disabled')

3). 值 have.value

// 找到的元素中，是否有值为 poloyy 的元素
cy.get('textarea').should('have.value','poloyy')

4). 文本内容 not.contain

// 找到的元素中的文本应该不包含点击
cy.get('a').parent('span.help').should('not.contain','点击')

5). 针对元素是否可见 be.visible

// button 元素应该可见
cy.get('button').should('be.visible')
// button 元素应该不可见
cy.get('button').should('not.be.visible')

6). 元素是否存在 exist

// 应该不存在一个id 为 loading 的
cy.get('#loading').should('not.exist')

7). 针对元素状态 be.checked

// 应该有一个单选框为选中状态
cy.get(':radio').should('be.checked')

7. 点击事件

   
   
   

8. 操作页面元素命令

cy.get('input').type('输入')
cy.get('input').first().focus()
cy.get('input').eq(0).type('234').clear()
cy.get('form').submit()
cy.get('[type="radio"]').first().check()
cy.get('select').select('user')
cy.get('footer').scrollIntoView()
cy.get('a').trigger('mousedown')