Cypress之模拟键盘鼠标操作以及页面元素拖动操作

上篇文章讲解了使用cypress框架时，如何上传或者下载文件，以及定位操作iframe和shadow dom下的页面元素。此次课程将讲解如何模拟键盘输入、鼠标操作以及如何拖动页面元素,另外，会介绍如何点击隐藏的页面元素，为了完成此次课程目标拆分了3个task。

• 模拟键盘输入和鼠标操作
• 拖动页面元素
• 处理隐藏的页面元素

接下来就从第一个task开始。

模拟键盘输入和鼠标操作

使用cypress框架，如果要模拟键盘输入很简单，调用cy.type({键盘值})即可。下面脚本模拟了输入enter、shift等键盘值，Cypress支持的可输入的键盘值可查看“ type | Cypress Documentation ”。同样，Test Runner上选择“keyboard_spec.js”即可运行下面的脚本。

describe("type key with keyboard",()=> {
    it("should input key successfully",()=> {
        cy.visit('https://devexpress.github.io/testcafe/example/');
        cy.get('#developer-name').type('{rightarrow}');
        cy.get('#developer-name').type('{leftarrow}');
        cy.get('#developer-name').type('{enter}');
        cy.get('#developer-name').type('{alt}');
        //如果要模拟键盘输入，调用type({key})，注意，cypress不支持输入tab键

        cy.get('#developer-name').type('{shift}{alt}Q');
        //模拟输入组合键

        cy.get('#developer-name').type('{ctrl}test');
        //模拟输入ctrl+test字符串
        
        cy.get('#developer-name').clear()
        cy.get('#developer-name').type('{ctrl}test').type('everything');
        //模拟输入键盘值后再向输入框输入字符串“everything”

        cy.get('#developer-name'