wrap：包装 - 技术栈

1、wrap(对象)调用对象的函数，来产生新的值。

javascript 复制代码

const getName = () => {
  return 'Jane Lane'
}

cy.wrap({ name: getName }).invoke('name').should('eq', 'Jane Lane') // true

wrap(对象)，断言对象的属性、属性包含的值

javascript 复制代码

it('cy.wrap() - wrap an object', () => {
    // https://on.cypress.io/wrap
    cy.wrap({ foo: 'bar' })
      .should('have.property', 'foo')
      .and('include', 'bar')
  })

2、wrap(数组名称)

javascript 复制代码

 it('.spread() - spread an array as individual args to callback function', () => {
    // https://on.cypress.io/spread  //传递一个数组（作为单个函数）给回调函数
    const arr = ['foo', 'bar', 'baz']

    cy.wrap(arr).spread((foo, bar, baz) => {  //wrap包装了（接收了）一个对象（数组），然后调用数组里面的值
      expect(foo).to.eq('foo')
      expect(bar).to.eq('bar')
      expect(baz).to.eq('baz')
    })
  })

3、wrap(数值)

javascript 复制代码

it('yields the returned value to the next command', () => {
      //为下一个命令生成返回值
      cy.wrap(1)
        .then((num) => {
          expect(num).to.equal(1)

          return 2  //返回值2
        })
        .then((num) => {
          expect(num).to.equal(2)
        })
    })
 it('yields the original subject without return', () => {
      cy.wrap(1)
        .then((num) => {
          expect(num).to.equal(1)
          // note that nothing is returned from this callback这个回调中没有东西返回
        })
        .then((num) => {
          // this callback receives the original unchanged value 1  这俄格回调接受没有改变的原始值1
          expect(num).to.equal(1)
        })
    })
 it('yields the value yielded by the last Cypress command inside', () => {
      cy.wrap(1)
        .then((num) => {
          expect(num).to.equal(1)
          // note how we run a Cypress command  我们怎样允许命令
          // the result yielded by this Cypress command  通过命令生成结果
          // will be passed to the second ".then" 将通过第二个.then
          cy.wrap(2)
        })
        .then((num) => {
          // this callback receives the value yielded by "cy.wrap(2)"  这个回调接受通过 "cy.wrap(2)"生成的值
          expect(num).to.equal(2)
        })
    })

4、wrap(Cypress.spec)包一个用例文件

运行的时候看一下f12里面是否有这个效果：有，选中断言时，console里面有对应的keys内容

javascript 复制代码

it('Get current spec information', () => {
    // https://on.cypress.io/spec
    // wrap the object so we can inspect it easily by clicking in the command log  返回测试文件的属性/规格信息
      cy.wrap(Cypress.spec).should('include.keys', ['name', 'relative', 'absolute'])
    })

5、wrap(this.example)包当前测试套件中的名称为example的json文件

javascript 复制代码

/// <reference types="cypress" />

/// JSON fixture file can be loaded directly using
// the built-in JavaScript bundler
const requiredExample = require('../../fixtures/example')

context('Files', () => {
	beforeEach(() => {
	    cy.visit('https://example.cypress.io/commands/files')
	
	    // load example.json fixture file and store 加载example.json文件并且存储在测试context对象里面
	    // in the test context object
	    cy.fixture('example.json').as('example')
	  })
		it('cy.fixture() or require - load a fixture', function () {
		    // we are inside the "function () { ... }"
		    // callback and can use test context object "this"    我们里面的方法调用可以使用context对象this
		    // "this.example" was loaded in "beforeEach" function callback         this.example在"beforeEach"方法回调里面被加载
		    expect(this.example, 'fixture in the test context')
		      .to.deep.equal(requiredExample)
		
		    // or use "cy.wrap" and "should('deep.equal', ...)" assertion
		    cy.wrap(this.example)
		      .should('deep.equal', requiredExample)
		  })
})

6、在对象里装个监控，调用对象时再断言这个监控被调用了

javascript 复制代码

 it('cy.spy() - wrap a method in a spy', () => {
    // https://on.cypress.io/spy  在监控中包了一个方法
    cy.visit('https://example.cypress.io/commands/spies-stubs-clocks')

    const obj = {
      foo () {},
    }

    const spy = cy.spy(obj, 'foo').as('anyArgs')  //监控了一个对象，上方对象里面有个方法

    obj.foo()  //调用对象的方法时，下面断言监控被调用了
    //监控函数运行情况
    expect(spy).to.be.called
  })

7、包住li标签，断言里面的属性

javascript 复制代码

 it('Cypress.$ - call a jQuery method', () => {
    // https://on.cypress.io/$
    let $li = Cypress.$('.utility-jquery li:first')

    cy.wrap($li)
      .should('not.have.class', 'active')
      .click()
      .should('have.class', 'active')
  })