cypress自用中文文档（一）

Commands

• should()同.and()，创建一个断言，断言会自动重试直到它们通过或超时。

.and(chainers)
.and(chainers, value)
.and(chainers, method, value)
.and(callbackFn)

使用案例

cy.get('.err').should('be.empty').and('be.hidden') // Assert '.err' is empty & hidden
cy.contains('Login').and('be.visible')             // Assert el is visible
cy.wrap({ foo: 'bar' })
  .should('have.property', 'foo')                  // Assert 'foo' property exists
  .and('eq', 'bar')                                // Assert 'foo' property is 'bar'

• as() 作用为分配别名以供以后使用，可在带有@前缀的cy.get（）或cy.wait（）命令中引用别名。在匹配多个相同名称的class和属性中很好用。

.as(aliasName)

使用方法

cy.get('.main-nav').find('li').first().as('firstNav') // Alias first 'li' as @firstNav
cy.route('PUT', 'users', 'fx:user').as('putUser')     // Alias that route as @putUser
cy.stub(api, 'onUnauth').as('unauth')                 // Alias that stub as @unauth
cy.spy(win, 'fetch').as('winFetch')                   // Alias that spy as @winFetch

案例

it('disables on click', () => {
  cy.get('button[type=submit]').as('submitBtn')
  cy.get('@submitBtn').click().should('be.disabled')
})

通过和cy.fixture()配合使用，可以使用this来访问和获取到别名

beforeEach(() => {
  cy.fixture('users-admins.json').as('admins')
})

it('the users fixture is bound to this.admins', function () {
  cy.log(`There are ${this.admins.length} administrators.`)
})

另外，可以通过fixture()和as()给所有的路由命名

cy.route(/company/, 'fixture:company').as('companyGet')
cy.route(/roles/, 'fixture:roles').as('rolesGet')
cy.route(/teams/, 'fixture:teams').as('teamsGet')
cy.route(/users\/\d+/, 'fixture:user').as('userGet')
cy.route('PUT', /^\/users\/\d+/, 'fixture:user').as('userPut')

• blur()和focus(),这就跟js的blur类似，就是从一个焦点的focus出来时，多值输入框，光标离开输入框的时候

使用案例

cy.get('[type="email"]').type('me@email.com').blur() // Blur email input
cy.get('[tabindex="1"]').focus().blur()              // Blur el with tabindex

• check(),在页面中用于chekbox(es)多选和radio(s)单选

使用案例

cy.get('[type="checkbox"]').check()       // Check checkbox element
cy.get('[type="radio"]').first().check()  // Check first radio element
cy.get('form input').check(['subscribe', 'accept'])//指定value="subscribe"和value="accept"的选中
cy.get('[type="radio"]').check('US') //指定value="US的radio选中

• children()获取一组dom元素下所有的子元素

使用案例

cy.get('nav').children()     // Yield children of nav
cy.get('ul.secondary-nav').children()
cy.get('ul').children('.active')
cy.get('.left-nav>.nav').children().should('have.length', 8)

• clear() 清除value的值，用于input和textarea

使用案例：

cy.get('[type="text"]').clear()        // Clear text input
cy.get('textarea').type('Hi!').clear() // Clear textarea
cy.focused().clear()                   // Clear focused input/textarea
cy.get('textarea').clear().type('Hello, World')

• click()点击一个dom元素

使用方法

.click()
.click(options)
.click(position)
.click(position, options)
.click(x, y)
.click(x, y, options)

使用案例

cy.get('.btn').click()          // Click on button
cy.focused().click()            // Click on el with focus
cy.contains('Welcome').click()  // Click on first el containing 'Welcome'
cy.get('.nav > a').click()
cy.get('img').click('topRight')
cy.get('#top-banner').click(15, 40)
cy.get('#collapse-sidebar').click('bottomLeft', { force: true })
cy.get('#footer .next').click(5, 60, { force: true })

.click（）命令还可以与.type（）命令结合使用键修饰符来触发，以便在单击时模拟字符序列，例如ALT + click。 为了使修饰键保持活动状态，应将{release：false}传递给.type（）命令的选项。

// execute a SHIFT + click on the first <li>
// { release: false } is necessary so that
// SHIFT will not be released after the type command
cy.get('body').type('{shift}', { release: false })
cy.get('li:first').click()