Cypress之模拟键盘鼠标操作以及页面元素拖动操作 |
您所在的位置：网站首页 › 鼠标拖拽文件剪切怎么操作 › Cypress之模拟键盘鼠标操作以及页面元素拖动操作 |
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(); //此点击操作未进行任何处理，当运行到此步骤时，脚本会失败，并提示“因为页面元素不可见，不允许被点击” }) });执行结果如下所示，可以看到，执行到最后一步时，运行失败，并给出了详细的错误信息。
|
【本文地址】
今日新闻 |
推荐新闻 |