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').type('{shift}',{delay:1,force:true,timeout:5})
       //type()中除支持输入键值外，还支持传递其他参数，例如delay：延迟1秒进行键值输入操作，force设置为true表示不会进行actionbility检查等 
    })
});

上面演示了如何模拟键盘输入，接着再看看如何模拟鼠标操作。实际前面讲过的click()就属于点击鼠标左键操作，这里主要介绍如何模拟点击鼠标右键、双击、拖动等操作。同样，Test Runner中选择“mouse_spec.js”即可运行下面的脚本。

describe("mouse action demo",()=> {
    it("should control mouse successfully",()=> {
        cy.visit('https://devexpress.github.io/testcafe/example/');
        cy.get('#developer-name').dblclick();
        //模拟双击鼠标左键操作

        cy.get('#developer-name').rightclick();
        //模拟点击鼠标右键，注意cypress封装的鼠标右键操作，不会显示右键菜单项

        cy.get('#developer-name').trigger('mousedown');
        cy.wait(1000);
        cy.get('#developer-name').trigger('mouseleave');
        //模拟长时间点击鼠标

        cy.get('#developer-name').trigger('mouseover');
        //模拟鼠标划过某个页面元素

        cy.get('#developer-name')
            .trigger('mousedown', { which: 1})
            .trigger('mousemove', { which: 1, pageX: 600, pageY: 600 })
            .trigger('mouseup')
    })
    //模拟鼠标拖动，通过调用trigger('mousedown').trigger('mousemove').trigger('mouseup')实现拖动操作
    //另外需要注意，因为cypress底层是调用jquery提供的实现鼠标拖动方法，如果要模拟拖动操作，那么mousedown()和mousemove()中要带参数{which:1}
});

上面讲解了如何模拟键盘和鼠标操作，接下来看看如何实现拖动页面元素。

拖动页面元素

实际拖动页面元素的过程就是点击鼠标后进行拖动的过程，为了实现页面元素拖动，调用trigger(mouseEvent)即可完成。另外，脚本中还需传递鼠标点击的原始位置、拖动的目标位置的X，Y坐标。下面脚本通过调用cy.get(targetElementSelector).getBoundingClientRect()获取目标元素的坐标信息，完成拖动操作。同样，Test Runner中选择“dragElement_spec.js”即可运行下面的脚本。

describe('drag element demo', () => {
    it('should drag element successfully', () => {
        cy.visit('https://devexpress.github.io/testcafe/example/');
        //打开被测应用

        cy.get('#tried-test-cafe').click();
        //点击页面按钮，下面的可读条才允许拖动

        moveToTargetElement()
        //调用封装好的拖动元素方法完成拖动操作
    });

   //如果要获取某个元素的坐标信息，需要调用cy.get(selector).then($el=>{$e1[0].getBoundingClientRect()})
    function moveToTargetElement() {
        cy.get('.slider-value:nth-child(2)')
        //定位需要拖动的目标位置元素

            .then($el => {
                const {top, left, bottom, right} = $el[0].getBoundingClientRect();
                //获取目标位置元素的坐标信息

                let targetX = (left + right) / 2;
                let targetY = (top + bottom) / 2;
                //计算拖动的目标位置X坐标和Y坐标值

                console.log(targetX);
                console.log(targetY);
                //打印坐标信息，方便调试

                cy.get('.slider-container #slider span')
                //定位拖动的起始位置元素

                    .trigger('mousedown', {which: 1})
                //在起始位置模拟鼠标点击操作

                    .trigger('mousemove', {
                        which: 1,
                        pageX: targetX,
                        pageY: targetY
                    })
                //模拟鼠标拖动操作，并传递了拖动的目标位置信息

                    .trigger('mouseup', {force: true});
                //拖动完成后，模拟释放鼠标操作    
            })
    }
});

拖动页面元素是一个通用的操作，接下来把上面的拖动脚本封装成cypress的用户自定义命令，这样当测试脚本中需要拖动页面元素时，调用此命令即可。下面是command.js中封装的命令。可以看到，调用该命令时需传入定位起始位置元素selector和目标位置元素selector即可。

Cypress.Commands.add('dragElement',(sourceElementSelector,targetElementSelector)=> {
    //通过参数的方式传入开始位置元素和目标位置元素selector，便于方法复用。

    cy.get(targetElementSelector)
        .then($el => {
            const {top, left, bottom, right} = $el[0].getBoundingClientRect();
            let targetX = (left + right) / 2;
            let targetY = (top + bottom) / 2;
            console.log(targetX);
            console.log(targetY);
            cy.get(sourceElementSelector)
                .trigger('mousedown', {which: 1})
                .trigger('mousemove', {
                    which: 1,
                    pageX: targetX,
                    pageY: targetY
                })
                .trigger('mouseup', {force: true});
        })
});

修改测试脚本，改为调用封装的自定义命令cy.dargElement(sourceSelector,targetSelector)完成拖动操作。同样，Test Runner中选择“dragElementWithCommand_spec.js”即可运行下面的脚本。

describe('drag element demo', () => {
    it('should drag element successfully', () => {
        cy.visit('https://devexpress.github.io/testcafe/example/');
        cy.get('#tried-test-cafe').click();
        cy.dragElement('.slider-container #slider span','.slider-value:nth-child(3)')
        //调用封装的自定义命令实现拖动操作，这里传入的参数时开始位置元素的selector和目标位置元素的selector。
    });
})

运行上面的脚本，结果如下所示，可以看到刻度尺上的小方块被拖动到了3的位置，与目标位置元素“.slider-value:nth-child(3)”一致。

处理隐藏的页面元素

如果测试场景中期望点击隐藏的页面元素，或者获取隐藏的页面元素属性值、innerText等，可以通过给click传入可选参数或者调用invoke('show')的方式完成。具体脚本如下所示，同样，Test Runner上选择“clickHidenElement_spec.js”即可运行下面的脚本。

describe("control hidden element demo",()=> {
    it("should click hidden element successfully", () => {
        cy.visit("https://www.jquery-az.com/css/demo.php?ex=123.0_4#");
        cy.get('p a').contains('Hide Menu').click();
        //点击页面的“Hide Menu”后，上面的菜单会被隐藏起来

        cy.get('li a').contains('Home').click({force:true});
        //click()方法中传递{force:true}参数时，不会校验页面元素是否达到可点击条件，也会对该元素执行点击操作，通过此方法可以点击被隐藏的页面元素。

        cy.get('li a').contains('Contact').invoke('show').click();
        //调用invoke('show')后再点击需要被点击的页面元素

        cy.get('li a').contains('Contact').click();
        //此点击操作未进行任何处理，当运行到此步骤时，脚本会失败，并提示“因为页面元素不可见，不允许被点击”
    })
});

 执行结果如下所示，可以看到，执行到最后一步时，运行失败，并给出了详细的错误信息。