Cypress使用整理

1、get() & within() 的使用

1、直接在cy后用，或者在其他command后chanined off使用，均是直接在整个document中找寻元素

cy.get('.class')
cy.contains('hello').get('.class')        //最终yield的DOM元素仍然等同于cy.get('.class')

2、如果在其他command后chained off使用，目标作用域是前面command所yield的范围，则要使用 **.within()** 函数

//以下例子则是在cy.contains('hello')输出的DOM元素中再get('.class')
cy.contains('hello').within({
    cy.get('.class');
})

image.png

2、trigger(event) & invoke('trigger', 'event') & click({force: true})

1、javascript实现的事件如click、mouseover、mousedown、mouseup、mouseleave、mousemove可以使用trigger(event) & invoke('trigger', 'event')来触发

cy.get('.hidden').trigger('mouseover')        //在某元素上触发mouseover事件
cy.get('.hidden').invoke('trigger', 'mouseover')   //在某元素上触发mouseover事件

2、CSS实现的事件如hover则不能使用trigger和invoke方法，应该通过配置click()函数的配置项force为true，即不管页面上元素是否visible，强制点击该元素。
** 前提是该元素确实在DOM树中存在 **

cy.get('.hidden').click({force: true})   // 强制点击页面不可见，但存在的元素
cy.get('.checkbox').check({ force: true })  //强制勾选页面不可见，但存在的元素

3、get(selector)及contains(selector, content)的区别

1. get(selector)可以按照selector找到所有满足的DOM元素，不仅仅是一个；
2. contains(selector, content)则是对DOM元素从浅到深进行遍历，找到满足selector及content的第一个元素就返回了，不会再进行，故只会返回一个DOM元素。

4、文件上传plugin —— cypress-file-upload的引入及使用

1. 安装：

npm install --save-dev cypress-file-upload 
yarn add cypress-file-upload -dev

2. 使用限制：
i. 带有<input>标签的上传文件元素，其他的暂未发现可以上传成功的

image.png
ii. 默认对象文件根目录：项目/cypress/fixture
3. 使用方法：

const yourFixturePath = `${对象文件存储Path}`          \\ 默认对象文件根目录：项目/cypress/fixture
cy.get("input[type = 'file']").attachFile(yourFixturePath)

/* You can also attach multiple files by chaining the command */

const yourBestPicture = 'meow.png';
cy.get('[data-cy="file-input"]')
  .attachFile(yourFixturePath)
  .attachFile(yourBestPicture);

4. 支持拖拽上传 —— Drag n Drop：

cy.get('[data-cy="dropzone"]').attachFile(yourFixturePath, { subjectType: 'drag-n-drop' });